wcs-core 7.0.0 → 7.2.0

package/dist/types/utils/control-component-interface.d.ts

@@ -0,0 +1,22 @@
+/**
+ * For form controls components which have a label within like a wcs-switch or wcs-checkbox
+ */
+export interface ControlComponentWithLabel {
+    /**
+     * Get the label text
+     */
+    getLabel(): Promise<string>;
+}
+export declare function isControlComponentWithLabel(el: any): el is ControlComponentWithLabel;
+/**
+
+ * Extracts the text content from nodes assigned to a slot in a Web Component's Shadow DOM.
+ *
+ * @param element - The Web Component HTMLElement containing a Shadow DOM with slots
+ * @param slotName - Optional name of the slot to target (if not provided, targets the default slot)
+ * @returns The combined text content of all nodes assigned to the specified slot, with normalized whitespace
+ *
+ * @throws Will not throw errors, but returns empty string if the element has no Shadow DOM,
+ *         no matching slot, or no assigned nodes
+ */
+export declare function getSlottedContentText(element: HTMLElement, slotName?: string): string;

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

@@ -47,6 +47,17 @@ export declare const compareLists: <T>(sourceList: T[], newList: T[], compareFn:
     kept: T[];
     added: T[];
 };
+/**
+ * Normalizes whitespace by replacing multiple consecutive whitespace characters
+ * with a single space and removes leading and trailing whitespace.
+ *
+ * @param content - String potentially containing multiple whitespace characters to normalize, if the content is null or undefined, it will return an empty string.
+ * @returns Normalized string where sequences of whitespace are replaced by a single space.
+ *
+ * @example
+ * normalizeWhitespace("  Text   with    spaces  ") // Returns "Text with spaces"
+ */
+export declare function normalizeWhitespace(content: string): string;
 /**
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run
@@ -58,6 +69,10 @@ export declare const raf: (h: any) => any;
 export declare const clickInsideElement: (event: MouseEvent, element: HTMLElement) => boolean;
 export declare const clickTargetIsElementOrChildren: (mouseEvent: MouseEvent, element: HTMLElement) => boolean;
 export declare function generateUniqueId(componentName: string): string;
+/**
+ * `clientX` property doesn't exist on KeyboardEvent, we therefore deduce it's a MouseEvent.
+ */
+export declare function isMouseEvent(event: MouseEvent | KeyboardEvent): event is MouseEvent;
 export declare function isKeyup(evt: KeyboardEvent): boolean;
 export declare function isKeydown(evt: KeyboardEvent): boolean;
 export declare function isEscapeKey(evt: KeyboardEvent): boolean;
@@ -74,3 +89,9 @@ export declare function isPageUpKey(evt: KeyboardEvent): boolean;
 export declare function isTabKey(evt: KeyboardEvent): boolean;
 export declare function isCtrlA(evt: KeyboardEvent): boolean;
 export declare function getCssRootPropertyValue(name: string): string | null;
+/**
+ * Converts a CSS time value string (e.g., '150ms', '1.5s') into milliseconds
+ * @param {string} timeValue - The CSS time value string
+ * @returns {number} Time in milliseconds
+ */
+export declare function parseCssTimeValueToMilliseconds(timeValue: string): number;

package/dist/wcs/p-0017d766.js

@@ -0,0 +1,2 @@
+import{g as n}from"./p-52d77e1f.js";function t(n,t){n.forEach((n=>{n.addEventListener("focusout",(r=>{const c=r.relatedTarget;if(!o(n,c)){const n=r.composedPath();if(s(n,t)){n.filter(e(t))[0].close()}}}))}))}function o(n,t){return n.contains(t)}function e(n){return t=>t.nodeName===n}function s(n,t){return n.map((n=>n.nodeName)).indexOf(t)!==-1}function r(t){const o=n("--wcs-phone-breakpoint-max-width")||"575px";const e=parseInt(o,10);return new ResizeObserver((n=>{const o=n[0].contentRect;const s=o.right-o.width;const r=o.left;if(o.width<=e-(r+s)){t.currentActiveSizing="mobile"}else{t.currentActiveSizing="desktop"}}))}export{r as c,t as r};
+//# sourceMappingURL=p-0017d766.js.map

package/dist/wcs/{p-5ea2aba5.entry.js → p-0424e545.entry.js}

@@ -1,2 +1,2 @@
-import{r as c,h as a,H as L}from"./p-32e583ea.js";const i=":host{--wcs-galactic-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-text-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-height:var(--wcs-semantic-size-s);--wcs-galactic-font-size:var(--wcs-semantic-font-size-label-2);--wcs-galactic-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-galactic-max-width:var(--wcs-com-content-max-width);--wcs-galactic-padding-horizontal:calc(2 * var(--wcs-semantic-spacing-base));--wcs-galactic-logo-height:var(--wcs-semantic-size-s);--wcs-galactic-logo-margin-right:calc(2 * var(--wcs-semantic-spacing-base));--wcs-semantic-color-foreground-action-tertiary-default:var(--wcs-galactic-text-color);display:block;background-color:var(--wcs-galactic-background-color)}.container{height:var(--wcs-galactic-height);align-items:center;justify-content:space-between;color:var(--wcs-galactic-text-color);font-size:var(--wcs-galactic-font-size);font-weight:var(--wcs-galactic-font-weight);display:flex;max-width:var(--wcs-galactic-max-width);padding:0 var(--wcs-galactic-padding-horizontal);margin:0 auto}.container #sncf-logo{height:var(--wcs-galactic-logo-height);margin-right:var(--wcs-galactic-logo-margin-right)}.container .logo-container{display:flex;align-items:center}.actions-container{display:flex;align-items:center}";const s=i;const t=class{constructor(a){c(this,a);this.text=undefined;this.show=false}render(){return a(L,{key:"ccf6b6d2122201e49058bbda7d5c374b47f9b3db"},a("div",{key:"b4bb7ecd4e2bb70b845492370724bee2de253838",class:"container"},a("div",{key:"c2d2cfcc98d545536e53bf3e734f79fc9509f155",class:"logo-container"},a("img",{key:"861c9ae4c2ab344d3c20f4a8fd86580d08b6fa11",src:w,id:"sncf-logo",alt:"SNCF"}),a("span",{key:"a56d1f48689b7a45262fa1941d7aa0b3c9ab5013"},this.text)),a("div",{key:"b007ba5ae702d1932413564ba690207ecad8f09b",class:"actions-container"},a("slot",{key:"f05d6a51edb4013fcc26a4102da99ab0dc72688f"}))))}};const w="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy"+"c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5"+"rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW"+"VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e"+"WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz"+"dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x"+"vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj"+"csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL"+"TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj"+"RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA"+"uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS"+"wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL"+"jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN"+"OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw"+"yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC"+"wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM"+"S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu"+"OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw"+"wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT"+"kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K";t.style=s;export{t as wcs_galactic};
-//# sourceMappingURL=p-5ea2aba5.entry.js.map
+import{r as c,h as a,H as L}from"./p-32e583ea.js";const i=":host{--wcs-galactic-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-text-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-height:var(--wcs-semantic-size-s);--wcs-galactic-font-size:var(--wcs-semantic-font-size-label-2);--wcs-galactic-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-galactic-max-width:var(--wcs-com-content-max-width);--wcs-galactic-padding-horizontal:calc(2 * var(--wcs-semantic-spacing-base));--wcs-galactic-logo-height:var(--wcs-semantic-size-s);--wcs-galactic-logo-margin-right:calc(2 * var(--wcs-semantic-spacing-base));--wcs-semantic-color-foreground-action-tertiary-default:var(--wcs-galactic-text-color);display:block;background-color:var(--wcs-galactic-background-color)}.container{height:var(--wcs-galactic-height);align-items:center;justify-content:space-between;color:var(--wcs-galactic-text-color);font-size:var(--wcs-galactic-font-size);font-weight:var(--wcs-galactic-font-weight);display:flex;max-width:var(--wcs-galactic-max-width);padding:0 var(--wcs-galactic-padding-horizontal);margin:0 auto}.container #sncf-logo{height:var(--wcs-galactic-logo-height);margin-right:var(--wcs-galactic-logo-margin-right)}.container .logo-container{display:flex;align-items:center}.actions-container{display:flex;align-items:center}";const s=i;const t=class{constructor(a){c(this,a);this.text=undefined;this.show=false}render(){return a(L,{key:"bcede9aa03d2014887eeaa4d5728d57c32a69de2"},a("div",{key:"2d031655b20b592b77e2227a195f15535071c069",class:"container"},a("div",{key:"1d3a345c56925946f5b39ad9edaad7ee927343cc",class:"logo-container"},a("img",{key:"3f7e9a0a7df3a954d21e328da562189771baf8a8",src:w,id:"sncf-logo",alt:"SNCF"}),a("span",{key:"68c00801e7f2564930d6a5f77fc6f45511a321cf"},this.text)),a("div",{key:"3724b08dca457a9be21ecb84925ed3fea4e49f95",class:"actions-container"},a("slot",{key:"572f4ca9036c737a579f2c58ec113cada4dd421c"}))))}};const w="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy"+"c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5"+"rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW"+"VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e"+"WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz"+"dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x"+"vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj"+"csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL"+"TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj"+"RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA"+"uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS"+"wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL"+"jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN"+"OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw"+"yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC"+"wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM"+"S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu"+"OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw"+"wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT"+"kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K";t.style=s;export{t as wcs_galactic};
+//# sourceMappingURL=p-0424e545.entry.js.map

package/dist/wcs/{p-25b96cde.entry.js → p-0758d22e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,H as a}from"./p-32e583ea.js";const t=":host{--wcs-footer-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-footer-text-color:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-text-color:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-text-color-hover:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-font-size:var(--wcs-semantic-font-size-label-2);--wcs-footer-link-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-footer-link-gap:calc(4 * var(--wcs-semantic-spacing-base));--wcs-footer-gap:var(--wcs-semantic-spacing-large);--wcs-footer-end-gap:var(--wcs-semantic-spacing-large);--wcs-footer-max-width:var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));--wcs-footer-padding:calc(3 * var(--wcs-semantic-spacing-base));display:block;width:100%;background-color:var(--wcs-footer-background-color);color:var(--wcs-footer-text-color)}:host .end{margin-top:var(--wcs-footer-gap);gap:var(--wcs-footer-end-gap);width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline}:host .end .end-left,:host .end .end-right{display:flex;flex-wrap:wrap;column-gap:var(--wcs-footer-link-gap)}@media only screen and (max-width: 1024px){:host .end .end-left,:host .end .end-right{flex-direction:column}}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));font-size:14px;font-weight:500;text-decoration:none}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-footer-link-text-color-hover)}:host .container{margin:0 auto;display:flex;flex-direction:column;max-width:var(--wcs-footer-max-width);padding:var(--wcs-footer-padding)}";const c=t;const s=class{constructor(o){e(this,o)}render(){return o(a,{key:"8dc3c7853a401e2254d5dc706ee0168608e423ed"},o("div",{key:"a55ca8287f245b86252801c6a4426533d6fa5663",class:"container"},o("div",{key:"97ea23df4cbc2698a390a0af601587a84da5e1dd"},o("slot",{key:"4ed79ab9b2a96716dd9698635c0668a707b871f0"})),o("div",{key:"c8ed43a578d3e77c279d62b724d9b4460c6856cc",class:"end"},o("div",{key:"a53cfe34fc4c257c4aece95a23ab3d88e28fc446",class:"end-left"},o("slot",{key:"97453846523298ecb25c259414a3b4b0d279da6d",name:"end-left"})),o("div",{key:"adf5130e60bb3514635f5a6808873067e947bfcf",class:"end-right"},o("slot",{key:"5295d63977c1515fdda45160a964969738f6273c",name:"end-right"})))))}};s.style=c;export{s as wcs_footer};
-//# sourceMappingURL=p-25b96cde.entry.js.map
+import{r as e,h as o,H as t}from"./p-32e583ea.js";const c=":host{--wcs-footer-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-footer-text-color:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-text-color:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-text-color-hover:var(--wcs-semantic-color-text-inverse);--wcs-footer-link-font-size:var(--wcs-semantic-font-size-label-2);--wcs-footer-link-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-footer-link-gap:calc(4 * var(--wcs-semantic-spacing-base));--wcs-footer-gap:var(--wcs-semantic-spacing-large);--wcs-footer-end-gap:var(--wcs-semantic-spacing-large);--wcs-footer-max-width:var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));--wcs-footer-padding:calc(3 * var(--wcs-semantic-spacing-base));display:block;width:100%;background-color:var(--wcs-footer-background-color);color:var(--wcs-footer-text-color)}:host .end{margin-top:var(--wcs-footer-gap);gap:var(--wcs-footer-end-gap);width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline}:host .end .end-left,:host .end .end-right{display:flex;flex-wrap:wrap;column-gap:var(--wcs-footer-link-gap)}@media only screen and (max-width: 1024px){:host .end .end-left,:host .end .end-right{flex-direction:column}}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));font-size:14px;font-weight:500;text-decoration:none}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-footer-link-text-color-hover)}:host .container{margin:0 auto;display:flex;flex-direction:column;max-width:var(--wcs-footer-max-width);padding:var(--wcs-footer-padding)}";const a=c;const r=class{constructor(o){e(this,o)}render(){return o(t,{key:"6fe975235d6de2793e55e8d10860649b5684c093"},o("footer",{key:"80b0ff721eedab3e4cc00fd2484a638718fc8b13",role:"contentinfo"},o("div",{key:"f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1",class:"container"},o("div",{key:"e1f9ea823133d972d3eb2bc8e7eaa18558448a73"},o("slot",{key:"d7177b9e98ac24ad39008669de01899e71c27079"})),o("div",{key:"849ceafdd459f24b672e1f68edf86ffd4fcce733",class:"end"},o("div",{key:"7077861e872bbb50e7e5de0c968fe2222e9bf7d7",class:"end-left"},o("slot",{key:"dded653e62bf683e0514c51b06e55ccb44f70c54",name:"end-left"})),o("div",{key:"ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5",class:"end-right"},o("slot",{key:"4201096294b44a29f74112c2acaa2163f9ecfcb9",name:"end-right"}))))))}};r.style=a;export{r as wcs_footer};
+//# sourceMappingURL=p-0758d22e.entry.js.map

package/dist/wcs/p-0758d22e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["footerCss","WcsFooterStyle0","Footer","render","h","Host","key","role","class","name"],"sources":["src/components/footer/footer.scss?tag=wcs-footer&encapsulation=shadow","src/components/footer/footer.tsx"],"sourcesContent":[":host {\n    --wcs-footer-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-footer-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color-hover:  var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-footer-link-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-footer-link-gap: calc(4 * var(--wcs-semantic-spacing-base));\n\n    --wcs-footer-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-end-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-max-width: var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));\n    --wcs-footer-padding: calc(3 * var(--wcs-semantic-spacing-base));\n\n    display: block;\n    width: 100%;\n    background-color: var(--wcs-footer-background-color);\n    color: var(--wcs-footer-text-color);\n\n    .end {\n        margin-top: var(--wcs-footer-gap);\n        gap: var(--wcs-footer-end-gap);\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: baseline;\n\n        .end-left, .end-right {\n            display: flex;\n            flex-wrap: wrap;\n            column-gap: var(--wcs-footer-link-gap);\n        }\n\n        @media only screen and (max-width:1024px) {\n            .end-left, .end-right {\n                flex-direction: column;\n            }\n        }\n\n        slot[name=end-left]::slotted(a) {\n            color: var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));\n            font-size: 14px;\n            font-weight: 500;\n            text-decoration: none;\n        }\n\n        slot[name=end-left]::slotted(a:hover) {\n            color: var(--wcs-footer-link-text-color-hover);\n        }\n\n    }\n\n    .container {\n        margin: 0 auto;\n        display: flex;\n        flex-direction: column;\n        max-width: var(--wcs-footer-max-width);\n        padding: var(--wcs-footer-padding);\n    }\n\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The footer component has been designed to leave as much customization as possible to the developer. The footers are often specific to the application developed.\n * \n * @cssprop --wcs-footer-background-color - Background color of the footer\n * @cssprop --wcs-footer-text-color - Text color of the footer\n * @cssprop --wcs-footer-link-text-color - Text color of the links in the footer\n * @cssprop --wcs-footer-link-text-color-hover - Text color of the links in the footer when hovered\n * @cssprop --wcs-footer-link-font-size - Font size of the links in the footer\n * @cssprop --wcs-footer-link-font-weight - Font weight of the links in the footer\n * @cssprop --wcs-footer-link-gap - Gap between the links in the footer\n * @cssprop --wcs-footer-gap - Vertical gap between the content and the two end slots\n * @cssprop --wcs-footer-end-gap - Horizontal gap between the right and left end slots\n * @cssprop --wcs-footer-max-width - Max width of the footer for responsive purposes \n * @cssprop --wcs-footer-padding - Padding all around the content of the footer\n * \n * @slot <no-name> Main container slot\n * @slot end-left Bottom-left part of the footer\n * @slot end-right Bottom-right part of the footer\n */\n@Component({\n    tag: 'wcs-footer',\n    styleUrl: 'footer.scss',\n    shadow: true,\n})\nexport class Footer implements ComponentInterface {\n    render(): any {\n        return (\n            <Host>\n                <footer role=\"contentinfo\">\n                    <div class=\"container\">\n                        <div>\n                            <slot/>\n                        </div>\n                        <div class=\"end\">\n                            <div class=\"end-left\">\n                                <slot name=\"end-left\"/>\n                            </div>\n                            <div class=\"end-right\">\n                                <slot name=\"end-right\"/>\n                            </div>\n                        </div>\n                    </div>\n                </footer>\n            </Host>\n        )\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,unDAClB,MAAAC,EAAeD,E,MCyBFE,EAAM,M,yBACf,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,UAAAE,IAAA,2CAAQC,KAAK,eACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACPJ,EAAA,OAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OACPJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACPJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,cAEfL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACPJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,kB"}

package/dist/wcs/p-0b8157e7.entry.js

@@ -0,0 +1,2 @@
+export{G as wcs_grid_pagination}from"./p-c5bad0b8.js";import"./p-32e583ea.js";import"./p-52d77e1f.js";
+//# sourceMappingURL=p-0b8157e7.entry.js.map

package/dist/wcs/p-0dd07842.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as s,H as e,g as o}from"./p-32e583ea.js";import{i,a as d}from"./p-fb2751c2.js";import{i as c,a as l,s as r,n}from"./p-52d77e1f.js";const h="wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}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 var(--wcs-modal-border-width) var(--wcs-modal-border-color)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding);width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";const m=h;const w=[];const f=class{constructor(s){t(this,s);this.wcsDialogClosed=a(this,"wcsDialogClosed",7);this.inheritedAttributes={};this.modalId=b++;this.showAttributeChangedMarker=false;this.hasBeenClosedBefore=false;this.withoutBackdrop=false;this.show=false;this.showCloseButton=false;this.closeButtonAriaLabel="Fermer";this.size="m";this.hideActions=false;this.modalTriggerControlsId=undefined;this.initialFocusElementId=undefined;this.disableAutoFocus=false}componentWillLoad(){if(!this.modalTriggerControlsId){console.warn("wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly")}this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),l(this.el,w))}componentDidLoad(){this.updateFocusableElements()}componentDidRender(){var t;this.updateFocusableElements();if(this.showAttributeChangedMarker){this.showAttributeChangedMarker=false;if(this.disableAutoFocus){return}if(!this.initialFocusElementId){(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus()}else{const t=document.getElementById(this.initialFocusElementId);if(!t){console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`)}t===null||t===void 0?void 0:t.focus()}}}async setAriaAttribute(t,a){r(this.nativeDivDialog,t,a)}onShowChange(){if(this.show){this.hasBeenClosedBefore=false;this.showAttributeChangedMarker=true}else{if(this.hasBeenClosedBefore){return}this.hasBeenClosedBefore=true;if(this.modalTriggerControlsId){const t=document.getElementById(this.modalTriggerControlsId);if(!t){console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`)}t===null||t===void 0?void 0:t.focus()}}}updateFocusableElements(){const t=Array.from(this.el.querySelectorAll("*")).filter((t=>i(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){if(n(t)){this.updateFocusableElements();const a=this.firstFocusableElement;const s=this.lastFocusableElement;if(t.shiftKey&&d(a)){t.preventDefault();s.focus()}else if(!t.shiftKey&&d(s)){t.preventDefault();a.focus()}}}}onCloseButtonClick(t){this.close()}handleSlotContentChange(){this.updateFocusableElements()}render(){const t=`wcs-modal-title-${this.modalId}`;return s(e,{key:"e609fe2024b73cab0bed97c0d3b7012d8deba893"},s("div",Object.assign({key:"23007c4ad4971263f7fd99d0e594216cd112f6ea",class:"wcs-modal-container","data-size":this.size,"aria-modal":"true",role:"dialog","aria-labelledby":t,ref:t=>this.nativeDivDialog=t},this.inheritedAttributes),s("div",{key:"bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9",class:"wcs-modal-header"},s("h1",{key:"87561fc92b0990d00e06463afc111e9bdeab6f20",id:t},s("slot",{key:"dbf6d932257e7a264206ddf7caea8a80e4b2b069",name:"header"})),this.showCloseButton&&s("wcs-button",{key:"97036ea40d111c5ac737b1e3f789571cd524cb2d",shape:"round",mode:"clear",id:"wcs-modal-close-button","aria-label":this.closeButtonAriaLabel,onClick:t=>this.onCloseButtonClick(t)},s("wcs-mat-icon",{key:"24d6b531e788c2760c66804df96037714c9f854b",icon:"close"}))),s("div",{key:"34d9ddf3c4527395864a238f329d7b499eb9791b",class:"wcs-modal-content"},s("slot",{key:"5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447",onSlotchange:()=>this.handleSlotContentChange()})),!this.hideActions&&s("div",{key:"0c082f533dd77e73721b3bcf29a6f3d3baac65b3",class:"wcs-modal-actions"},s("slot",{key:"56bfb65b4784492747eda2f5eb87b29dc7704db3",name:"actions"}))))}get el(){return o(this)}static get watchers(){return{show:["onShowChange"]}}};let b=0;f.style=m;export{f as wcs_modal};
+//# sourceMappingURL=p-0dd07842.entry.js.map

package/dist/wcs/p-0dd07842.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","WcsModalStyle0","MODAL_INHERITED_ATTRS","Modal","this","inheritedAttributes","modalId","modalIds","showAttributeChangedMarker","hasBeenClosedBefore","undefined","componentWillLoad","modalTriggerControlsId","console","warn","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","updateFocusableElements","componentDidRender","disableAutoFocus","initialFocusElementId","_a","firstFocusableElement","focus","modalElementToFocusOnOpening","document","getElementById","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeDivDialog","onShowChange","show","modalTriggerControlsHtmlElement","focusableElements","Array","from","querySelectorAll","filter","element","isFocusable","length","lastFocusableElement","close","wcsDialogClosed","emit","onKeyDown","event","showCloseButton","key","isTabKey","firstElement","lastElement","shiftKey","isElementFocused","preventDefault","onCloseButtonClick","_","handleSlotContentChange","render","modalTitleId","h","Host","class","size","role","ref","id","name","shape","mode","closeButtonAriaLabel","onClick","$event","icon","onSlotchange","hideActions"],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n    --wcs-modal-max-height: 80%;\n    --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n    // Specific component level tokens\n    --wcs-modal-width-s: 288px;\n    --wcs-modal-width-m: 480px;\n    --wcs-modal-width-l: 864px;\n    --wcs-modal-width-xl: 1200px;\n\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: var(--wcs-modal-backdrop-color);\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 var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: var(--wcs-modal-background-color);\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-radius: var(--wcs-modal-border-radius);\n    z-index: 20000;\n    padding: var(--wcs-modal-padding);\n\n    width: var(--wcs-modal-width-m); // Default size\n}\n\n.wcs-modal-container[data-size=s] {\n    width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n    width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n    width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n    /* h1 for semantic but h3 for style */\n    h1 {\n        font-size: var(--wcs-modal-title-font-size);\n        font-weight: var(--wcs-modal-title-font-weight);\n        line-height: var(--wcs-modal-title-line-height);\n        margin: 0;\n    }\n\n    margin-bottom: var(--wcs-modal-title-margin-bottom);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n    margin-top: var(--wcs-modal-actions-margin-top);\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, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\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, mutable: 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     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\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     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: 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     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\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            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\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                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\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":"0JAAA,MAAMA,EAAW,41EACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,G,MA+CjBC,EAAK,M,0EAGNC,KAAAC,oBAA4C,GAuE5CD,KAAAE,QAAkBC,IAUlBH,KAAAI,2BAAsC,MAStCJ,KAAAK,oBAA+B,M,qBArFW,M,UAKI,M,qBAWJ,M,0BAMX,S,UAMb,I,iBAKoB,M,iEAkBLC,U,sBASY,K,CA2BrD,iBAAAC,GACI,IAAKP,KAAKQ,uBAAwB,CAC9BC,QAAQC,KAAK,+G,CAGjBV,KAAKC,oBAAmBU,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBb,KAAKc,KAC3BC,EAAkBf,KAAKc,GAAIhB,G,CAItC,gBAAAkB,GACIhB,KAAKiB,yB,CAGT,kBAAAC,G,MACIlB,KAAKiB,0BACL,GAAIjB,KAAKI,2BAA4B,CACjCJ,KAAKI,2BAA6B,MAElC,GAAGJ,KAAKmB,iBAAkB,CACtB,M,CAGJ,IAAInB,KAAKoB,sBAAuB,EAC5BC,EAAArB,KAAKsB,yBAAqB,MAAAD,SAAA,SAAAA,EAAEE,O,KACzB,CACH,MAAMC,EAA+BC,SAASC,eAAe1B,KAAKoB,uBAClE,IAAII,EAA8B,CAC9Bf,QAAQC,KAAK,4CAA4CV,KAAKoB,0C,CAGlEI,IAA4B,MAA5BA,SAA4B,SAA5BA,EAA8BD,O,GAM1C,sBAAMI,CAAiBC,EAAyBC,GAC5CC,EAAqB9B,KAAK+B,gBAAiBH,EAAMC,E,CAIrD,YAAAG,GACI,GAAGhC,KAAKiC,KAAM,CACVjC,KAAKK,oBAAsB,MAC3BL,KAAKI,2BAA6B,I,KAC/B,CAEH,GAAGJ,KAAKK,oBAAqB,CACzB,M,CAGJL,KAAKK,oBAAsB,KAE3B,GAAGL,KAAKQ,uBAAwB,CAC5B,MAAM0B,EAAkCT,SAASC,eAAe1B,KAAKQ,wBACrE,IAAI0B,EAAiC,CACjCzB,QAAQC,KAAK,+BAA+BV,KAAKQ,6C,CAErD0B,IAA+B,MAA/BA,SAA+B,SAA/BA,EAAiCX,O,GAKrC,uBAAAN,GACJ,MAAMkB,EAAoBC,MAAMC,KAAKrC,KAAKc,GAAGwB,iBAAiB,MACzDC,QAAOC,GAAWC,EAAYD,KAEnCxC,KAAKsB,sBAAwBa,EAAkBO,OAAS,GAAKP,EAAkB,GAC/EnC,KAAK2C,qBAAuBR,EAAkBO,OAAS,GAAKP,EAAkBA,EAAkBO,OAAS,E,CAGrG,KAAAE,GAEJ,GAAI5C,KAAKiC,KAAM,CACXjC,KAAKiC,KAAO,MACZjC,KAAK6C,gBAAgBC,M,EAK7B,SAAAC,CAAUC,GACN,GAAIhD,KAAKiC,MAAQjC,KAAKiD,iBAAmBD,EAAME,MAAQ,SAAU,CAC7DlD,KAAK4C,O,CAGT,GAAI5C,KAAKiC,KAAM,CACX,GAAIkB,EAASH,GAAQ,CACjBhD,KAAKiB,0BACL,MAAMmC,EAAepD,KAAKsB,sBAC1B,MAAM+B,EAAcrD,KAAK2C,qBAEzB,GAAIK,EAAMM,UAAYC,EAAiBH,GAAe,CAClDJ,EAAMQ,iBACNH,EAAY9B,O,MACT,IAAKyB,EAAMM,UAAYC,EAAiBF,GAAc,CACzDL,EAAMQ,iBACNJ,EAAa7B,O,IAMrB,kBAAAkC,CAAmBC,GACvB1D,KAAK4C,O,CAGD,uBAAAe,GACJ3D,KAAKiB,yB,CAGT,MAAA2C,GACI,MAAMC,EAAe,mBAAmB7D,KAAKE,UAC7C,OACI4D,EAACC,EAAI,CAAAb,IAAA,4CACDY,EAAA,MAAAnD,OAAAC,OAAA,CAAAsC,IAAA,2CAAKc,MAAM,sBAAqB,YAChBhE,KAAKiE,KAAI,aACT,OACXC,KAAM,SAAQ,kBACGL,EACjBM,IAAMrD,GAAQd,KAAK+B,gBAAkBjB,GACjCd,KAAKC,qBAEV6D,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,oBACPF,EAAA,MAAAZ,IAAA,2CAAIkB,GAAIP,GACJC,EAAA,QAAAZ,IAAA,2CAAMmB,KAAK,YAEdrE,KAAKiD,iBACFa,EAAA,cAAAZ,IAAA,2CAAYoB,MAAM,QACNC,KAAK,QACLH,GAAG,yBAAwB,aACfpE,KAAKwE,qBACjBC,QAAUC,GAAW1E,KAAKyD,mBAAmBiB,IACrDZ,EAAA,gBAAAZ,IAAA,2CAAcyB,KAAK,YAK/Bb,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,qBACPF,EAAA,QAAAZ,IAAA,2CAAM0B,aAAc,IAAM5E,KAAK2D,8BAEjC3D,KAAK6E,aACHf,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,qBACPF,EAAA,QAAAZ,IAAA,2CAAMmB,KAAK,c,+EASvC,IAAIlE,EAAW,E"}

package/dist/wcs/{p-87b69cac.entry.js → p-1244daa0.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as o,h as a,H as n,g as c}from"./p-32e583ea.js";import{r as i,c as t}from"./p-d7acbf01.js";import{i as s,a as r,b as l}from"./p-a3aece7a.js";const m=':host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}: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:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}';const d=m;const v=["title"];const h="WCS-COM-NAV-SUBMENU";const b=class{constructor(o){e(this,o);this.inheritedAttributes={};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.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),r(this.el,v));const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");i(e,h)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,a){this.inheritedAttributes[e]=a;o(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return a(n,{key:"85451701261dc64faebd405a0186b857d1881655"},a("div",{key:"84e33d688f36901ee1608b765c3c20c26d099f83",class:"container"},a("div",{key:"f8fe43fcf24ce46ad57d010a46bb19ebbea8175c",class:"container-left"},a("div",{key:"246da8710a8b10e52753a865b1345ce8a9d6f0e9",class:"app-name"},this.appName,a("slot",{key:"0c6ad2ea30db8cc6ae51ec44d4f6e253b7cca850",name:"app-name"})),this.currentActiveSizing==="desktop"?a("nav",Object.assign({role:"navigation"},this.inheritedAttributes),a("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?a("slot",null):null)):null),a("div",{key:"34e2eb03491479f033a891d1f2bf46814e45057c",class:"container-right"},a("slot",{key:"18bd4464e1ce6725f63d152dba5ddff4a73e48cf",name:"actions"}),this.currentActiveSizing==="mobile"?a("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),a("button",{id:"mobile-menu-icon","aria-label":e,"aria-expanded":this.mobileMenuOpen?"true":"false","aria-controls":"wcs-com-nav-mobile-menu",onClick:()=>this.mobileMenuIconClick()}),this.currentActiveSizing==="mobile"?a("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},a("slot",null)):null):null)))}exitMobileMenuOnKeyDown(e){if(l(e)){this.closeMobileMenu()}}get el(){return c(this)}};b.style=d;export{b as wcs_com_nav};
-//# sourceMappingURL=p-87b69cac.entry.js.map
+import{r as e,f as o,h as a,H as n,g as c}from"./p-32e583ea.js";import{r as i,c as t}from"./p-0017d766.js";import{i as s,a as r,b as l}from"./p-52d77e1f.js";const m=':host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}: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:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}';const d=m;const v=["title"];const b="WCS-COM-NAV-SUBMENU";const h=class{constructor(o){e(this,o);this.inheritedAttributes={};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.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),r(this.el,v));const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");i(e,b)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,a){this.inheritedAttributes[e]=a;o(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return a(n,{key:"b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db"},a("div",{key:"f84b73c9cee6295a7776576afeb61b65b71ea34e",class:"container"},a("div",{key:"a39b867e9d102abb4e4c13503a544681cd9b7fd8",class:"container-left"},a("div",{key:"49db5dd80f097a9b2ccaf39fc64be9f6100108be",class:"app-name"},this.appName,a("slot",{key:"2936888d5a805c67a3be4079a7eea62d460d42fe",name:"app-name"})),this.currentActiveSizing==="desktop"?a("nav",Object.assign({role:"navigation"},this.inheritedAttributes),a("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?a("slot",null):null)):null),a("div",{key:"c2c97d21d21d542a18fb141f90ce7ce91d0b12c0",class:"container-right"},a("slot",{key:"51912b232ac4d51baf1d2c164e90ab59a787924e",name:"actions"}),this.currentActiveSizing==="mobile"?a("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),a("button",{id:"mobile-menu-icon","aria-label":e,"aria-expanded":this.mobileMenuOpen?"true":"false","aria-controls":"wcs-com-nav-mobile-menu",onClick:()=>this.mobileMenuIconClick()}),this.currentActiveSizing==="mobile"?a("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},a("slot",null)):null):null)))}exitMobileMenuOnKeyDown(e){if(l(e)){this.closeMobileMenu()}}get el(){return c(this)}};h.style=d;export{h as wcs_com_nav};
+//# sourceMappingURL=p-1244daa0.entry.js.map

package/dist/wcs/{p-80a23f9c.entry.js → p-18fa39f4.entry.js}

@@ -1,2 +1,2 @@
-import{h as r,r as t,c as e,H as s,g as o}from"./p-32e583ea.js";import{i,a,s as n,c as d,d as h}from"./p-a3aece7a.js";const c=({state:t})=>r("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},r("g",{class:(t==="none"?"":t)+" arrow-group"},r("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const l=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=l;const u=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const f=u;const w=["tabindex","title"];const b=class{constructor(r){t(this,r);this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,w))}async setAriaAttribute(r,t){n(this.nativeTh,r,t)}parseMyObjectProp(r){this.wcsHiddenChange.emit(r)}sortOrderChange(r){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(r){switch(r){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var r,t;return((r=this.cursorPosition)===null||r===void 0?void 0:r.col)===this.columnPosition&&((t=this.cursorPosition)===null||t===void 0?void 0:t.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return r(s,{key:"05815f3b9f03f3248347108555a3fea6495d9193",slot:"grid-column"},r("th",Object.assign({key:"e25a02d656e7f4cbf9c6bb8ada58b0300f41ce12",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:r=>this.nativeTh=r},this.inheritedAttributes),r(t,{key:"8954f92f00869d26c0bcea419ff0173e02ecbb94",class:"grid-column-th-content",ref:r=>this.buttonOrDiv=r,tabIndex:this.sort?this.getTabIndex():-1},r("span",{key:"84006eeb0d8f91817aab26af7ba89e47ceedf850"},this.name),this.sort?r(c,{state:this.sortOrder}):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(r){if(d(r)||h(r)){r.preventDefault();this.onSortClick()}}get el(){return o(this)}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}};b.style=g+f;export{b as wcs_grid_column};
-//# sourceMappingURL=p-80a23f9c.entry.js.map
+import{h as r,r as t,c as e,H as s,g as o}from"./p-32e583ea.js";import{i,a,s as n,c as d,d as h}from"./p-52d77e1f.js";const c=({state:t})=>r("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},r("g",{class:(t==="none"?"":t)+" arrow-group"},r("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const l=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=l;const u=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const f=u;const w=["tabindex","title"];const b=class{constructor(r){t(this,r);this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,w))}async setAriaAttribute(r,t){n(this.nativeTh,r,t)}parseMyObjectProp(r){this.wcsHiddenChange.emit(r)}sortOrderChange(r){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(r){switch(r){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var r,t;return((r=this.cursorPosition)===null||r===void 0?void 0:r.col)===this.columnPosition&&((t=this.cursorPosition)===null||t===void 0?void 0:t.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return r(s,{key:"e2c93e817abc5a61d6285f32779d915ff7368710",slot:"grid-column"},r("th",Object.assign({key:"c23695b8680146e66e75ea958dc9dd9cac6056ac",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:r=>this.nativeTh=r},this.inheritedAttributes),r(t,{key:"e936f0bd861b2d243071d45ccb4fa6bf8448f7a6",class:"grid-column-th-content",ref:r=>this.buttonOrDiv=r,tabIndex:this.sort?this.getTabIndex():-1},r("span",{key:"33e9e0238aa5cea93bff5f0522e30b7cfa787283"},this.name),this.sort?r("div",{class:"sort-arrow-container"},r(c,{state:this.sortOrder})):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(r){if(d(r)||h(r)){r.preventDefault();this.onSortClick()}}get el(){return o(this)}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}};b.style=g+f;export{b as wcs_grid_column};
+//# sourceMappingURL=p-18fa39f4.entry.js.map

package/dist/wcs/{p-80a23f9c.entry.js.map → p-18fa39f4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop() sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop() customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop() hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"sHAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAU,M,uHAIXC,KAAAC,oBAA4C,G,kDAY5B,M,8DAayB,O,sCAQlB,M,YAIL,M,4DAwB1B,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQhD,EAACsD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACfxD,EAAA,KAAAiB,OAAAC,OAAA,CAAAqC,IAAA,2CAAIE,MAAO,CAACvD,MAAOY,KAAKZ,OACpBI,MAAOQ,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETf,EAACqD,EAAW,CAAAE,IAAA,2CAACjD,MAAM,yBACX4D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChDzC,EAAA,QAAAuD,IAAA,4CAAOzC,KAAKqD,MAERrD,KAAKoB,KAAOlC,EAACF,EAAa,CAACC,MAAOe,KAAKwB,YAAe,K,CAOlE,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}
+{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop({ reflect: true }) sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop({ reflect: true }) customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop({ reflect: true }) hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"sHAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAU,M,uHAIXC,KAAAC,oBAA4C,G,kDAYX,M,8DAaQ,O,sCAQD,M,YAIL,M,4DAwB3C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQhD,EAACsD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACfxD,EAAA,KAAAiB,OAAAC,OAAA,CAAAqC,IAAA,2CAAIE,MAAO,CAACvD,MAAOY,KAAKZ,OACpBI,MAAOQ,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETf,EAACqD,EAAW,CAAAE,IAAA,2CAACjD,MAAM,yBACX4D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChDzC,EAAA,QAAAuD,IAAA,4CAAOzC,KAAKqD,MAERrD,KAAKoB,KAAOlC,EAAA,OAAKM,MAAM,wBAAuBN,EAACF,EAAa,CAACC,MAAOe,KAAKwB,aAAqB,K,CAO1G,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}

package/dist/wcs/p-1ba616c2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,H as i,g as a}from"./p-32e583ea.js";import{i as n,a as r,p as o,s as c,e as u,f as h,h as d,j as l}from"./p-52d77e1f.js";const f="@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";const w=f;const m=["tabindex","title"];const v=class{constructor(e){t(this,e);this.wcsChange=s(this,"wcsChange",7);this.wcsBlur=s(this,"wcsBlur",7);this.inheritedAttributes={};this.ANIMATION_DURATION=150;this.animateRunning=false;this.handleDecrement=()=>{if(this.disabled)return;if(this.min===undefined||this.value>this.min){this.animateRunning=true;this.value-=this.step;this.notifyChange();this.animate("up")}};this.handleIncrement=()=>{if(this.disabled)return;if(this.max===undefined||this.value<this.max){this.animateRunning=true;this.value+=this.step;this.notifyChange();this.animate("down")}};this.animate=t=>{this.animateRunning=true;const s=Array.from(this.counterContainer.children).filter((t=>t.classList.contains("outliers")));this.counterContainer.classList.add("animate-"+t);s.forEach((t=>{t.hidden=false}));setTimeout((()=>{this.counterContainer.classList.remove("animate-"+t);s.forEach((t=>{t.hidden=true}));this.displayedValue=this.value;this.animateRunning=false}),this.ANIMATION_DURATION-20)};this.size="m";this.label=undefined;this.disabled=false;this.min=undefined;this.max=undefined;this.step=1;this.value=undefined;this.displayedValue=undefined}componentWillLoad(){this.handleValueChange();this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,m))}componentDidRender(){var t,s;this.ANIMATION_DURATION=(s=o((t=window.getComputedStyle(this.el).getPropertyValue("--wcs-counter-transition-duration"))!==null&&t!==void 0?t:"150ms"))!==null&&s!==void 0?s:150}async setAriaAttribute(t,s){c(this.spinButton,t,s)}valueChange(t,s){if(s===t)return;this.handleValueChange()}handleValueChange(){this.setMinimumIfValueIsUndefinedOrNull();this.ensureValueIsNotOutOfMinMax();this.updateDisplayValueIfNoAnimationRunning()}updateDisplayValueIfNoAnimationRunning(){if(!this.animateRunning){this.displayedValue=this.value}}ensureValueIsNotOutOfMinMax(){if(this.max!==undefined&&this.value>this.max){this.value=this.max}else if(this.min!==undefined&&this.value<this.min){this.value=this.min}}setMinimumIfValueIsUndefinedOrNull(){var t;if(this.value===undefined||this.value===null){this.value=(t=this.min)!==null&&t!==void 0?t:0}}onKeyDown(t){if(this.disabled)return;if(u(t)){t.preventDefault();this.handleIncrement()}if(h(t)){t.preventDefault();this.handleDecrement()}if(d(t)){t.preventDefault();if(this.min!=null){this.value=this.min;this.displayedValue=this.value;this.notifyChange()}}if(l(t)){t.preventDefault();if(this.max!=null){this.value=this.max;this.displayedValue=this.value;this.notifyChange()}}}notifyChange(){this.wcsChange.emit({value:this.value})}render(){return e(i,{key:"6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834"},e("div",{key:"c3ed2c944c2a8f61ab862411b1d503a84ac37ae4",class:"counter"},e("wcs-button",{key:"c0d0d41e07a99ef0730b22d029529e629ff2f8d3",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleDecrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.min},e("wcs-mat-icon",{key:"5003db6a007f8ede51d567a76ea18160fdb60949",icon:"remove",size:"s"})),e("div",{key:"ae3b0ca61a95fe908583df73748b7e7d19242fd0",class:"counter-container",ref:t=>this.counterContainer=t},e("span",{key:"499a0d0ff7f38fcae6664b118991aeb39f5d6034",id:"outlier-down",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue-this.step),e("span",Object.assign({key:"62cab421b796106f0b2957e4d8445266bd6ba754",tabindex:this.disabled?-1:0,role:"spinbutton",ref:t=>this.spinButton=t,class:"current-value",onBlur:t=>this.wcsBlur.emit(t),onKeyDown:t=>this.onKeyDown(t),"aria-disabled":this.disabled?"true":null,"aria-valuenow":this.value,"aria-valuetext":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-label":this.label},this.inheritedAttributes),this.displayedValue),e("span",{key:"339b6949d2b64262085f7bda19897f9533166cb4",id:"outlier-up",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue+this.step)),e("wcs-button",{key:"ee77cee6c9d08225c1844d1c4703ea6868c054da",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleIncrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.max},e("wcs-mat-icon",{key:"b1b6cc395186ee871801d47ad2b9b62791f64b29",icon:"add",size:"s"}))))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{value:["valueChange"]}}};v.style=w;export{v as wcs_counter};
+//# sourceMappingURL=p-1ba616c2.entry.js.map

package/dist/wcs/p-1ba616c2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["counterCss","WcsCounterStyle0","COUNTER_INHERITED_ATTRS","Counter","this","inheritedAttributes","ANIMATION_DURATION","animateRunning","handleDecrement","disabled","min","undefined","value","step","notifyChange","animate","handleIncrement","max","direction","outliers","Array","from","counterContainer","children","filter","span","classList","contains","add","forEach","hidden","setTimeout","remove","displayedValue","componentWillLoad","handleValueChange","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidRender","_b","parseCssTimeValueToMilliseconds","_a","window","getComputedStyle","getPropertyValue","setAriaAttribute","attr","setOrRemoveAttribute","spinButton","valueChange","newVal","oldVal","setMinimumIfValueIsUndefinedOrNull","ensureValueIsNotOutOfMinMax","updateDisplayValueIfNoAnimationRunning","onKeyDown","_event","isKeyup","preventDefault","isKeydown","isHomeKey","isEndKey","wcsChange","emit","render","h","Host","key","class","shape","size","tabindex","onClick","onBlur","event","wcsBlur","icon","ref","input","id","role","label"],"sources":["src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","src/components/counter/counter.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);\n\n    --wcs-counter-height-m: var(--wcs-semantic-size-m);\n    --wcs-counter-height-l: var(--wcs-semantic-size-l);\n    --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);\n    --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);\n\n    --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n\n    display: flex;\n\n\n    .counter {\n        box-sizing: border-box;\n        height: var(--wcs-counter-height);\n        font-family: var(--wcs-font-sans-serif);\n        font-size: var(--wcs-counter-font-size);\n        font-weight: var(--wcs-counter-font-weight);\n        color: var(--wcs-counter-value-color-default);\n        display: flex;\n        align-items: center;\n        padding: var(--wcs-counter-padding);\n        width: fit-content;\n        overflow: hidden;\n        border-radius: var(--wcs-counter-border-radius);\n        background-color: var(--wcs-counter-background-color);\n        background-clip: padding-box;\n        gap: var(--wcs-counter-gap);\n\n        &:focus-within {\n            outline: none;\n        }\n\n        &:has(.current-value:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(.current-value:focus-visible)){\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n            }\n        }\n    }\n\n    .counter-container {\n        height: var(--wcs-counter-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    .current-value {\n        outline: none;\n    }\n\n    .animate-up {\n        animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    [hidden] {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n}\n\n:host([size='l']) {\n    --wcs-counter-padding: var(--wcs-counter-padding-l);\n    --wcs-counter-height: var(--wcs-counter-height-l);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-l);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-l);\n}\n\n:host([disabled]) {\n    cursor: not-allowed;\n\n    .counter {\n        color: var(--wcs-counter-value-color-disabled);\n    }\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    parseCssTimeValueToMilliseconds,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, WcsCounterSize } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Default animation duration, in milliseconds\n     * @private\n     */\n    private ANIMATION_DURATION = 150;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning: boolean = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n    componentDidRender() {\n        this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, this.ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"qJAAA,MAAMA,EAAa,8lHACnB,MAAAC,EAAeD,ECuBf,MAAME,EAA0B,CAAC,WAAY,S,MAoChCC,EAAO,M,+FAIRC,KAAAC,oBAA4C,GAM5CD,KAAAE,mBAAqB,IAkDrBF,KAAAG,eAA0B,MAgG1BH,KAAAI,gBAAkB,KACtB,GAAIJ,KAAKK,SAAU,OACnB,GAAIL,KAAKM,MAAQC,WAAaP,KAAKQ,MAAQR,KAAKM,IAAK,CAGjDN,KAAKG,eAAiB,KACtBH,KAAKQ,OAASR,KAAKS,KACnBT,KAAKU,eACLV,KAAKW,QAAQ,K,GAIbX,KAAAY,gBAAkB,KACtB,GAAIZ,KAAKK,SAAU,OACnB,GAAIL,KAAKa,MAAQN,WAAaP,KAAKQ,MAAQR,KAAKa,IAAK,CAGjDb,KAAKG,eAAiB,KACtBH,KAAKQ,OAASR,KAAKS,KACnBT,KAAKU,eACLV,KAAKW,QAAQ,O,GAIbX,KAAAW,QAAWG,IAGfd,KAAKG,eAAiB,KAEtB,MAAMY,EAAWC,MAAMC,KAAKjB,KAAKkB,iBAAiBC,UAC7CC,QAAQC,GAA0BA,EAAKC,UAAUC,SAAS,cAE/DvB,KAAKkB,iBAAiBI,UAAUE,IAAI,WAAaV,GACjDC,EAASU,SAASJ,IACdA,EAAKK,OAAS,KAAK,IAEvBC,YAAW,KACP3B,KAAKkB,iBAAiBI,UAAUM,OAAO,WAAad,GACpDC,EAASU,SAASJ,IACdA,EAAKK,OAAS,IAAI,IAEtB1B,KAAK6B,eAAiB7B,KAAKQ,MAE3BR,KAAKG,eAAiB,KAAK,GAC5BH,KAAKE,mBAAqB,GAAG,E,UAzLU,I,mCAWD,M,gDAiBP,E,mDAwBtC,iBAAA4B,GACI9B,KAAK+B,oBAEL/B,KAAKC,oBAAmB+B,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlC,KAAKmC,KAC3BC,EAAkBpC,KAAKmC,GAAIrC,G,CAItC,kBAAAuC,G,QACIrC,KAAKE,oBAAqBoC,EAAAC,GAAgCC,EAAAC,OAAOC,iBAAiB1C,KAAKmC,IAAIQ,iBAAiB,wCAAoC,MAAAH,SAAA,EAAAA,EAAI,YAAQ,MAAAF,SAAA,EAAAA,EAAI,G,CAIpK,sBAAMM,CAAiBC,EAAyBrC,GAC5CsC,EAAqB9C,KAAK+C,WAAYF,EAAMrC,E,CAOhD,WAAAwC,CAAYC,EAAaC,GACrB,GAAGA,IAAWD,EAAQ,OAEtBjD,KAAK+B,mB,CAGD,iBAAAA,GACJ/B,KAAKmD,qCACLnD,KAAKoD,8BACLpD,KAAKqD,wC,CAGD,sCAAAA,GACJ,IAAKrD,KAAKG,eAAgB,CACtBH,KAAK6B,eAAiB7B,KAAKQ,K,EAI3B,2BAAA4C,GACJ,GAAIpD,KAAKa,MAAQN,WAAaP,KAAKQ,MAAQR,KAAKa,IAAK,CACjDb,KAAKQ,MAAQR,KAAKa,G,MACf,GAAIb,KAAKM,MAAQC,WAAaP,KAAKQ,MAAQR,KAAKM,IAAK,CACxDN,KAAKQ,MAAQR,KAAKM,G,EAIlB,kCAAA6C,G,MACJ,GAAInD,KAAKQ,QAAUD,WAAaP,KAAKQ,QAAU,KAAM,CACjDR,KAAKQ,OAAQgC,EAAAxC,KAAKM,OAAG,MAAAkC,SAAA,EAAAA,EAAI,C,EAIjC,SAAAc,CAAUC,GACN,GAAIvD,KAAKK,SAAU,OAEnB,GAAImD,EAAQD,GAAS,CACjBA,EAAOE,iBACPzD,KAAKY,iB,CAET,GAAI8C,EAAUH,GAAS,CACnBA,EAAOE,iBACPzD,KAAKI,iB,CAET,GAAIuD,EAAUJ,GAAS,CACnBA,EAAOE,iBACP,GAAIzD,KAAKM,KAAO,KAAM,CAClBN,KAAKQ,MAAQR,KAAKM,IAClBN,KAAK6B,eAAiB7B,KAAKQ,MAC3BR,KAAKU,c,EAGb,GAAIkD,EAASL,GAAS,CAClBA,EAAOE,iBACP,GAAIzD,KAAKa,KAAO,KAAM,CAClBb,KAAKQ,MAAQR,KAAKa,IAClBb,KAAK6B,eAAiB7B,KAAKQ,MAC3BR,KAAKU,c,GAKT,YAAAA,GACJV,KAAK6D,UAAUC,KAAK,CAChBtD,MAAOR,KAAKQ,O,CAmDpB,MAAAuD,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,cAAAE,IAAA,2CAAYC,MAAM,cACNC,MAAM,QACNC,KAAK,IACLC,UAAW,EACXC,QAAS,IAAMvE,KAAKI,kBACpBoE,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCpE,SAAUL,KAAKK,UAAYL,KAAKQ,QAAUR,KAAKM,KACvD0D,EAAA,gBAAAE,IAAA,2CAAcS,KAAK,SAASN,KAAK,OAErCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAAoBS,IAAKC,GAAS7E,KAAKkB,iBAAmB2D,GACjEb,EAAA,QAAAE,IAAA,2CAAMY,GAAG,eACHX,MAAM,WACNzC,OAAM,mBACM,QAAQ1B,KAAK6B,eAAiB7B,KAAKS,MACrDuD,EAAA,OAAAhC,OAAAC,OAAA,CAAAiC,IAAA,2CAAMI,SAAUtE,KAAKK,UAAY,EAAI,EAC/B0E,KAAK,aACLH,IAAMzC,GAAOnC,KAAK+C,WAAaZ,EAC/BgC,MAAM,gBACNK,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCnB,UAAYmB,GAAUzE,KAAKsD,UAAUmB,GAAM,gBAC5BzE,KAAKK,SAAW,OAAS,KAAI,gBAC7BL,KAAKQ,MAAK,iBACTR,KAAKQ,MAAK,gBACXR,KAAKM,IAAG,gBACRN,KAAKa,IAAG,aACXb,KAAKgF,OACbhF,KAAKC,qBAAsBD,KAAK6B,gBAC1CmC,EAAA,QAAAE,IAAA,2CAAMY,GAAG,aACHX,MAAM,WACNzC,OAAM,mBACM,QAAQ1B,KAAK6B,eAAiB7B,KAAKS,OAEzDuD,EAAA,cAAAE,IAAA,2CAAYC,MAAM,cACNC,MAAM,QACNC,KAAK,IACLC,UAAW,EACXC,QAAS,IAAMvE,KAAKY,kBACpB4D,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCpE,SAAUL,KAAKK,UAAYL,KAAKQ,QAAUR,KAAKa,KACvDmD,EAAA,gBAAAE,IAAA,2CAAcS,KAAK,MAAMN,KAAK,Q"}

package/dist/wcs/p-1e7ea63c.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,g as a,H as r}from"./p-32e583ea.js";import{i as s,a as c,s as o}from"./p-52d77e1f.js";const i=":host{--wcs-header-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-header-gap:var(--wcs-semantic-spacing-large);--wcs-header-height:calc(8 * var(--wcs-semantic-size-base));--wcs-header-logo-height:calc(4 * var(--wcs-semantic-size-base));--wcs-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-header-title-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-header-title-font-size:var(--wcs-semantic-font-size-label-1)}header{border-bottom:var(--wcs-header-border-bottom);display:flex;align-items:center;box-sizing:border-box;z-index:1;background:var(--wcs-header-background-color);padding:0 var(--wcs-header-padding-horizontal);height:var(--wcs-header-height);gap:var(--wcs-header-gap)}::slotted(img){height:var(--wcs-header-logo-height)}::slotted(h1),::slotted(a){color:var(--wcs-header-title-color);margin:0;font-weight:var(--wcs-header-title-font-weight);font-size:var(--wcs-header-title-font-size);text-decoration:none}::slotted([slot=center]){flex:1;display:flex;justify-content:center;align-items:center}::slotted([slot=actions]){margin-left:auto}";const n=i;const d=[];const h=class{constructor(t){e(this,t);this.inheritedAttributes={}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),c(this.el,d))}async setAriaAttribute(e,t){o(this.nativeHeader,e,t)}hostData(){return{slot:"header"}}__stencil_render(){return t("header",Object.assign({key:"110c72f1b40917efdaa2c864c61a8ee99e35ce38",role:"banner",ref:e=>this.nativeHeader=e},this.inheritedAttributes),t("slot",{key:"8a593fc8e96ea73573fae78d9107897dee680c87",name:"logo"}),t("slot",{key:"1fefec6eee8652ac531c450f15d70cf7ab8ba1c9",name:"title"}),t("slot",{key:"ef151920a52804693a99501ee62688036e7bcda8",name:"center"}),t("slot",{key:"9d817dd99f3edb3dbe4b5a4bced020c42b64a903",name:"actions"}))}get el(){return a(this)}render(){return t(r,this.hostData(),this.__stencil_render())}};h.style=n;export{h as wcs_header};
+//# sourceMappingURL=p-1e7ea63c.entry.js.map

package/dist/wcs/p-1e7ea63c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["headerCss","WcsHeaderStyle0","HEADER_INHERITED_ATTRS","Header","constructor","hostRef","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeHeader","hostData","slot","__stencil_render","h","key","role","ref","name"],"sources":["src/components/header/header.scss?tag=wcs-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":[":host {\n    --wcs-header-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-header-gap: var(--wcs-semantic-spacing-large);\n    --wcs-header-height: calc(8 * var(--wcs-semantic-size-base));\n    --wcs-header-logo-height: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-header-padding-horizontal: var(--wcs-semantic-spacing-large);\n\n    --wcs-header-border-bottom: solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);\n    --wcs-header-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-header-title-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-header-title-font-size: var(--wcs-semantic-font-size-label-1);\n}\n\nheader {\n    border-bottom: var(--wcs-header-border-bottom);\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    z-index: 1;\n    background: var(--wcs-header-background-color);\n    padding: 0 var(--wcs-header-padding-horizontal);\n    height: var(--wcs-header-height);\n    gap: var(--wcs-header-gap);\n}\n\n::slotted(img) {\n    height: var(--wcs-header-logo-height);\n}\n\n::slotted(h1), ::slotted(a) {\n    color: var(--wcs-header-title-color);\n    margin: 0;\n    font-weight: var(--wcs-header-title-font-weight);\n    font-size: var(--wcs-header-title-font-size);\n    text-decoration: none;\n}\n\n::slotted([slot=\"center\"]) {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\n::slotted([slot=actions]) {\n    margin-left: auto;\n}\n","import { Component, ComponentInterface, Element, h, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\nconst HEADER_INHERITED_ATTRS = [];\n\n/**\n * The header component is an element that appears across the top of all pages on a website or application; it contains the logo, the site name and main actions.\n * \n * @slot logo SNCF Logo\n * @slot title Title of your application\n * @slot center Content to display in the center of the header, useful for a search bar\n * @slot actions Actions such as buttons, dropdown or any useful information to always display on your application\n * \n * @cssprop --wcs-header-background-color - Background color of the header\n * \n * @cssprop --wcs-header-gap - Gap between elements in the header\n * @cssprop --wcs-header-height - Height of the header\n * @cssprop --wcs-header-logo-height - Height of the logo\n * @cssprop --wcs-header-padding-horizontal - Horizontal padding of the header\n * \n * @cssprop --wcs-header-title-color - Color of the title\n * @cssprop --wcs-header-title-font-weight - Font weight of the title\n * @cssprop --wcs-header-title-font-size - Font size of the title\n * \n */\n@Component({\n    tag: 'wcs-header',\n    styleUrl: 'header.scss',\n    shadow: true\n})\nexport class Header implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    private nativeHeader!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, HEADER_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeHeader, attr, value);\n    }\n    \n    hostData() {\n        return {\n            'slot': 'header'\n        };\n    }\n\n    render() {\n        return (\n            <header role=\"banner\" ref={(el) => (this.nativeHeader = el)} {...this.inheritedAttributes}>\n                <slot name=\"logo\"/>\n                <slot name=\"title\"/>\n                <slot name=\"center\"/>\n                <slot name=\"actions\"/>\n            </header>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,uwCAClB,MAAAC,EAAeD,ECGf,MAAME,EAAyB,G,MA2BlBC,EAAM,MALnB,WAAAC,CAAAC,G,UAQYC,KAAAC,oBAA4C,E,CAEpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,aAAcH,EAAMC,E,CAGlD,QAAAG,GACI,MAAO,CACHC,KAAQ,S,CAIhB,gBAAAC,GACI,OACIC,EAAA,SAAAb,OAAAC,OAAA,CAAAa,IAAA,2CAAQC,KAAK,SAASC,IAAMb,GAAQN,KAAKY,aAAeN,GAASN,KAAKC,qBAClEe,EAAA,QAAAC,IAAA,2CAAMG,KAAK,SACXJ,EAAA,QAAAC,IAAA,2CAAMG,KAAK,UACXJ,EAAA,QAAAC,IAAA,2CAAMG,KAAK,WACXJ,EAAA,QAAAC,IAAA,2CAAMG,KAAK,Y"}

package/dist/wcs/p-1f593d06.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as a,H as e,g as o}from"./p-32e583ea.js";import{i as r,a as i,s as c}from"./p-52d77e1f.js";import{S as n}from"./p-84e22272.js";import{c as b}from"./p-0f864e86.js";const l=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}';const d=l;const h=[];const w=class{constructor(a){s(this,a);this.tabChange=t(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=v++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.mobileOverlayExpanded=false;this.mobile=false;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}onMobileChange(s){if(!s){this.popper.destroy();this.popper=null}}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const a=this.tabs[t];if(a.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}onWindowClickEvent(s){if(this.mobile){const t=s.composedPath().some((s=>s===this.mobileButton||s===this.popoverDiv));if(this.mobileOverlayExpanded&&!t){this.mobileOverlayExpanded=false}}}tabsDidLoadWithResizeObserver(){const s=getComputedStyle(this.el).getPropertyValue("--wcs-tabs-mobile-breakpoint")||"575px";const t=parseInt(s,10);return new ResizeObserver((s=>{const a=s[0].contentRect;const e=a.right-a.width;const o=a.left;this.mobile=a.width<=t-(o+e)}))}initMobileOverlay(){this.popper=b(this.mobileButton,this.popoverDiv,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}if(!this.resizeObserver){this.resizeObserver=this.tabsDidLoadWithResizeObserver();this.resizeObserver.observe(document.body)}}componentDidRender(){if(this.mobile){if(!this.popper){this.initMobileOverlay()}else{this.popper.update()}}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowLeft":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}handleKeyDownMobile(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowUp":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header-mobile")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowDown":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header-mobile")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:last-child");if(t){t.focus();s.preventDefault()}break}case"Escape":{this.mobileOverlayExpanded=false;s.preventDefault();break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const a=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return a.length!==0?a:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){var t;this.currentActiveTabIndex=s;this.emitActiveTabChange();if(this.mobile){this.mobileOverlayExpanded=false;(t=this.mobileButton)===null||t===void 0?void 0:t.focus()}}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,h))}disconnectedCallback(){var s;if(this.popper){this.popper.destroy();this.popper=null}(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}async setAriaAttribute(s,t){c(this.mobile?this.popoverDiv:this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}onMobileButtonClick(){this.mobileOverlayExpanded=!this.mobileOverlayExpanded;const s=this.popoverDiv.querySelectorAll("[role=tab]")[this.currentActiveTabIndex];requestAnimationFrame((()=>{s===null||s===void 0?void 0:s.focus()}))}onMobileButtonKeyDown(s){if(s.key==="ArrowDown"||s.key==="ArrowUp"){this.onMobileButtonClick()}}mobileLayout(){return[a("button",{id:"mobile-button",class:"wcs-tab-header active","aria-controls":"menu",role:"button","aria-expanded":this.mobileOverlayExpanded?"true":"false",ref:s=>this.mobileButton=s,onClick:()=>this.onMobileButtonClick(),onKeyDown:s=>this.onMobileButtonKeyDown(s),onBlur:s=>s.stopImmediatePropagation()},a("span",null,this.headers[this.currentActiveTabIndex]," ",a(n,{up:this.mobileOverlayExpanded}))),a("div",Object.assign({class:(this.mobileOverlayExpanded?"show ":"")+"popover",role:"tablist",id:"menu","aria-label":this.description,"aria-orientation":"vertical",ref:s=>this.popoverDiv=s,tabIndex:-1},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header-mobile "+(this.currentActiveTabIndex===t?"mobile-active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDownMobile(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s)))))]}desktopLayout(){return this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))}render(){return a(e,{key:"072fa3551b320a6415c20a3107500f2bee2aa690"},a("div",Object.assign({key:"294008dc27c2ff694119c3ce136caf866a0802b3",class:"wcs-tabs-headers",role:this.mobile?null:"tablist",ref:s=>this.nativeTablist=s,"aria-orientation":this.mobile?null:"horizontal","aria-label":this.mobile?null:this.description},!this.mobile&&this.inheritedAttributes),this.mobile?this.mobileLayout():this.desktopLayout()),a("div",{key:"d20bb48fe80434a6797c86d206a86d11081b92ea",class:"wcs-tabs"},a("slot",{key:"d4a31047e41627dc9c2cfb63f201e5e7ddc40f15",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.refreshHeaders();this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return o(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}}};let v=0;w.style=d;export{w as wcs_tabs};
+//# sourceMappingURL=p-1f593d06.entry.js.map