wcs-core 7.3.0 → 7.4.1

package/composite-elements/wcs-dropdown-divider.js

@@ -0,0 +1,2 @@
+import{p as d,H as r,h as o,c as e}from"./p-2bef72c7.js";const s=":host{--wcs-dropdown-divider-margin:var(--wcs-semantic-spacing-base) 0;--wcs-dropdown-divider-color:var(--wcs-semantic-color-border-secondary);display:block;margin:var(--wcs-dropdown-divider-margin);overflow:hidden;border-top:1px solid var(--wcs-dropdown-divider-color)}";const t=s;const i=d(class d extends r{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return o(e,{key:"52d90154f003445f1d62badde51df437a38d6f19",slot:"item",tabindex:"-1","aria-hidden":"true"})}static get style(){return t}},[1,"wcs-dropdown-divider"]);function n(){if(typeof customElements==="undefined"){return}const d=["wcs-dropdown-divider"];d.forEach((d=>{switch(d){case"wcs-dropdown-divider":if(!customElements.get(d)){customElements.define(d,i)}break}}))}n();const c=i;const a=n;export{c as WcsDropdownDivider,a as defineCustomElement};
+//# sourceMappingURL=wcs-dropdown-divider.js.map

package/composite-elements/wcs-dropdown-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownDividerCss","WcsDropdownDividerStyle0","DropdownDivider","proxyCustomElement","H","render","h","Host","key","slot","tabindex"],"sources":["src/components/dropdown-divider/dropdown-divider.scss?tag=wcs-dropdown-divider&encapsulation=shadow","src/components/dropdown-divider/dropdown-divider.tsx"],"sourcesContent":[":host {\n    --wcs-dropdown-divider-margin: var(--wcs-semantic-spacing-base) 0;\n    --wcs-dropdown-divider-color: var(--wcs-semantic-color-border-secondary);\n\n    display: block;\n    margin: var(--wcs-dropdown-divider-margin);\n    overflow: hidden;\n    border-top: 1px solid var(--wcs-dropdown-divider-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * You can add a divider between groups of items\n * \n * @cssprop --wcs-dropdown-divider-margin - Margin of the divider\n * @cssprop --wcs-dropdown-divider-color - Color of the divider\n * \n */\n@Component({\n    tag: 'wcs-dropdown-divider',\n    styleUrl: 'dropdown-divider.scss',\n    shadow: true\n})\nexport class DropdownDivider {\n    render() {\n        return (\n            <Host slot=\"item\" tabindex=\"-1\" aria-hidden=\"true\"></Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,iRAC3B,MAAAC,EAAeD,E,MCaFE,EAAeC,EAAA,MAAAD,UAAAE,E,kEACxB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,SAAS,KAAI,cAAa,Q"}

package/composite-elements/wcs-dropdown-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdownHeader extends Components.WcsDropdownHeader, HTMLElement {}
+export const WcsDropdownHeader: {
+    prototype: WcsDropdownHeader;
+    new (): WcsDropdownHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-dropdown-header.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,h as r,c as s}from"./p-2bef72c7.js";const t=":host{--wcs-dropdown-header-color:var(--wcs-semantic-color-text-tertiary);--wcs-dropdown-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-font-size:var(--wcs-semantic-font-size-label-2);--wcs-dropdown-header-font-weight:var(--wcs-semantic-font-weight-medium);display:block;padding:var(--wcs-dropdown-header-padding-vertical) var(--wcs-dropdown-header-padding-horizontal);font-size:var(--wcs-dropdown-header-font-size);font-weight:var(--wcs-dropdown-header-font-weight);text-transform:uppercase;color:var(--wcs-dropdown-header-color);white-space:nowrap}";const d=t;const a=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return r(s,{key:"a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8",slot:"item",tabindex:"-1"},r("slot",{key:"ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b"}))}static get style(){return d}},[1,"wcs-dropdown-header"]);function c(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown-header"];e.forEach((e=>{switch(e){case"wcs-dropdown-header":if(!customElements.get(e)){customElements.define(e,a)}break}}))}c();const n=a;const i=c;export{n as WcsDropdownHeader,i as defineCustomElement};
+//# sourceMappingURL=wcs-dropdown-header.js.map

package/composite-elements/wcs-dropdown-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownHeaderCss","WcsDropdownHeaderStyle0","DropdownHeader","proxyCustomElement","H","render","h","Host","key","slot","tabindex"],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=wcs-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":[":host {\n    --wcs-dropdown-header-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-dropdown-header-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-header-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-header-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-dropdown-header-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    display: block;\n    padding: var(--wcs-dropdown-header-padding-vertical) var(--wcs-dropdown-header-padding-horizontal);\n    font-size: var(--wcs-dropdown-header-font-size);\n    font-weight: var(--wcs-dropdown-header-font-weight);\n    text-transform: uppercase;\n    color: var(--wcs-dropdown-header-color);\n    white-space: nowrap;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n\n/**\n * You can add `wcs-dropdown-header` before a group of items to describe it\n * @slot <no-name> the slot that contains the header's name\n * \n * @cssprop --wcs-dropdown-header-color - Text color of the header\n * @cssprop --wcs-dropdown-header-padding-vertical - Vertical padding of the header\n * @cssprop --wcs-dropdown-header-padding-horizontal - Horizontal padding of the header\n * @cssprop --wcs-dropdown-header-font-size - Font size of the header\n * @cssprop --wcs-dropdown-header-font-weight - Font weight of the header\n *\n */\n@Component({\n    tag: 'wcs-dropdown-header',\n    styleUrl: 'dropdown-header.scss',\n    shadow: true\n})\nexport class DropdownHeader {\n\n    render() {\n        return (\n            <Host slot=\"item\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,mpBAC1B,MAAAC,EAAeD,E,MCkBFE,EAAcC,EAAA,MAAAD,UAAAE,E,kEAEvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,SAAS,MACvBJ,EAAA,QAAAE,IAAA,6C"}

package/composite-elements/wcs-dropdown-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdownItem extends Components.WcsDropdownItem, HTMLElement {}
+export const WcsDropdownItem: {
+    prototype: WcsDropdownItem;
+    new (): WcsDropdownItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-dropdown-item.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,d as e,h as t,c}from"./p-2bef72c7.js";import{c as d,d as s}from"./p-e803bb26.js";const n="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=n;const a=o(class o extends r{constructor(){super();this.__registerHost();this.wcsDropdownItemClick=e(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(d(o)||s(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return t(c,{key:"70e0767afe5fe295df4292e356db89d555fa71a3",slot:"item",role:"menuitem",tabindex:"-1"},t("slot",{key:"11cd674f89784aec6bfa1ba4d15f0fb0f25d976e"}))}static get style(){return i}},[4,"wcs-dropdown-item",undefined,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]);function w(){if(typeof customElements==="undefined"){return}const o=["wcs-dropdown-item"];o.forEach((o=>{switch(o){case"wcs-dropdown-item":if(!customElements.get(o)){customElements.define(o,a)}break}}))}w();const m=a;const u=w;export{m as WcsDropdownItem,u as defineCustomElement};
+//# sourceMappingURL=wcs-dropdown-item.js.map

package/composite-elements/wcs-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownItemCss","WcsDropdownItemStyle0","DropdownItem","proxyCustomElement","H","onMouseUp","_","this","wcsDropdownItemClick","emit","onKeyDown","evt","isSpaceKey","isEnterKey","preventDefault","stopImmediatePropagation","render","h","Host","key","slot","role","tabindex"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=wcs-dropdown-item","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["wcs-dropdown-item {\n    --wcs-dropdown-item-height: var(--wcs-semantic-size-m);\n    --wcs-dropdown-item-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-item-padding-vertical: 0;\n\n    --wcs-dropdown-item-text-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-dropdown-item-text-color-default: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-dropdown-item-text-color-hover: var(--wcs-semantic-color-foreground-action-neutral-hover);\n    --wcs-dropdown-item-text-color-press: var(--wcs-semantic-color-foreground-action-neutral-press);\n\n    --wcs-dropdown-item-background-color-default: var(--wcs-semantic-color-background-action-neutral-default);\n    --wcs-dropdown-item-background-color-hover: var(--wcs-semantic-color-background-action-neutral-hover);\n    --wcs-dropdown-item-background-color-press: var(--wcs-semantic-color-background-action-neutral-press);\n\n    --wcs-dropdown-item-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-dropdown-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-dropdown-item-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-dropdown-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    padding: 0 var(--wcs-dropdown-item-padding-horizontal);\n    font-weight: var(--wcs-dropdown-item-text-font-weight);\n    cursor: pointer;\n    color: var(--wcs-dropdown-item-text-color-default);\n    height: var(--wcs-dropdown-item-height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--wcs-dropdown-item-border-radius);\n    transition: background-color var(--wcs-dropdown-item-transition-duration) ease-in-out;\n}\n\nwcs-dropdown-item:hover {\n    color: var(--wcs-dropdown-item-text-color-hover);\n    background-color: var(--wcs-dropdown-item-background-color-hover);\n}\n\n/* Press state */\nwcs-dropdown-item:active {\n    color: var(--wcs-dropdown-item-text-color-press);\n    background-color: var(--wcs-dropdown-item-background-color-press);\n}\n\nwcs-dropdown-item:focus-visible {\n    outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n    outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n}\n\n@supports not selector(wcs-dropdown-item:focus-visible) {\n    wcs-dropdown-item:focus-within {\n        outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n        outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, h, Event, Listen, Host } from '@stencil/core';\nimport { isEnterKey, isSpaceKey } from \"../../utils/helpers\";\n\n/**\n * You must add `wcs-dropdown-item` to `wcs-dropdown`\n * @slot <no-name> the slot that contains the item's name\n * \n * @cssprop --wcs-dropdown-item-height - Height of the dropdown item\n * @cssprop --wcs-dropdown-item-padding-horizontal - Padding horizontal\n * @cssprop --wcs-dropdown-item-padding-vertical - Padding vertical\n * @cssprop --wcs-dropdown-item-text-font-weight - Font weight of the dropdown item\n * @cssprop --wcs-dropdown-item-text-color-default - Default text color of the dropdown item \n * @cssprop --wcs-dropdown-item-text-color-hover - Text color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-text-color-press - Text color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-background-color-default - Default background color of the dropdown item\n * @cssprop --wcs-dropdown-item-background-color-hover - Background color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-background-color-press - Background color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-border-width-focus - Border width of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-color-focus - Border color of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-radius - Border radius of the dropdown item\n * @cssprop --wcs-dropdown-item-transition-duration - Transition duration of the dropdown item\n */\n@Component({\n    tag: 'wcs-dropdown-item',\n    styleUrl: 'dropdown-item.scss'\n})\nexport class DropdownItem implements ComponentInterface {\n    /**\n     * Event emitted when the dropdown item is clicked\n     */\n    @Event({\n        eventName: 'wcsDropdownItemClick',\n    })\n    wcsDropdownItemClick: EventEmitter<void>;\n    \n    @Listen('mouseup')\n    onMouseUp(_: MouseEvent): void {\n        this.wcsDropdownItemClick.emit();\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (isSpaceKey(evt) || isEnterKey(evt)) {\n            evt.preventDefault();\n            evt.stopImmediatePropagation();\n            this.wcsDropdownItemClick.emit();\n        }\n    }\n\n    render() {\n        return (\n            <Host slot=\"item\" role=\"menuitem\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,mxEACxB,MAAAC,EAAeD,E,MCyBFE,EAAYC,EAAA,MAAAD,UAAAE,E,uGAUrB,SAAAC,CAAUC,GACNC,KAAKC,qBAAqBC,M,CAI9B,SAAAC,CAAUC,GACN,GAAIC,EAAWD,IAAQE,EAAWF,GAAM,CACpCA,EAAIG,iBACJH,EAAII,2BACJR,KAAKC,qBAAqBC,M,EAIlC,MAAAO,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,KAAK,WAAWC,SAAS,MACvCL,EAAA,QAAAE,IAAA,6C"}

package/composite-elements/wcs-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdown extends Components.WcsDropdown, HTMLElement {}
+export const WcsDropdown: {
+    prototype: WcsDropdown;
+    new (): WcsDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-dropdown.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,h as t,c as r}from"./p-2bef72c7.js";import{S as s}from"./p-35d7af48.js";import{l as a,s as i,i as n,a as c}from"./p-e803bb26.js";import{k as d}from"./p-2454bcae.js";import{d as l}from"./p-6dd2b564.js";import{d as p}from"./p-04663560.js";import{c as w}from"./p-e1fb3625.js";function h(e,o){const t=d(e);if(t==="UNKNOWN"){return[]}switch(o){case"closed":switch(t){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(t){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const u=':host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const b=u;const f=["tabindex"];const m=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){this.popper=w(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=a(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const t=h(e,o);if(t.length!=0){e.preventDefault()}for(const e of t){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){i(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let t=Array.from(o).indexOf(this.lastFocusedItemElement);const r=0;const s=o.length-1;if(e==="next"&&t<s){t++}else if(e==="previous"&&t>r){t--}else{if(e==="next"&&t>=s){t=0}if(e==="previous"&&t===r){t=s}}return t}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),c(this.el,f))}render(){return t(r,{key:"96be2f9df0a80b4d6c88cf15419ff29cb001c695"},t("button",Object.assign({key:"562456822837e6ff61ed23569335e42ad4e36df9",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),t("wcs-button",{key:"66348725409b810219dd1bd4658611c63bbb5eb8",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},t("div",{key:"028e06637e35ecc14b66cf74fba32dc59d58121a",class:"wcs-button-content-wrapper"},t("slot",{key:"7f7e2db54f9b5d3a20588c48c1d3fd6750187017",name:"placeholder"}),this.noArrow?null:t(s,{up:this.expanded}))),t("div",{key:"7f6f4efe22cab63033b3e7775791856ed8e1b921",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},t("div",{key:"ca7ce6adea1005d7126d4ae060ada55e9d3b6d70",role:"presentation",id:"arrow","data-popper-arrow":true}),t("div",{key:"0f2a9e15df898550117743f855e7ee0746157ab1",role:"presentation",class:"container"},t("slot",{key:"688fd29a894bae8aee4c848a9b07380c95302ca2",name:"item"},t("span",{key:"a80c902d26d7afed58e8a17646dac92473042fa4",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{placement:["placementChange"]}}static get style(){return b}},[17,"wcs-dropdown",{noArrow:[516,"no-arrow"],mode:[1],shape:[1],size:[1],disabled:[516],placement:[1],expanded:[32],setAriaAttribute:[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{placement:["placementChange"]}]);function v(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown","wcs-button","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-dropdown":if(!customElements.get(e)){customElements.define(e,m)}break;case"wcs-button":if(!customElements.get(e)){l()}break;case"wcs-spinner":if(!customElements.get(e)){p()}break}}))}v();const k=m;const g=v;export{k as WcsDropdown,g as defineCustomElement};
+//# sourceMappingURL=wcs-dropdown.js.map

package/composite-elements/wcs-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","proxyCustomElement","H","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","size","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}

package/composite-elements/wcs-editable-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsEditableField extends Components.WcsEditableField, HTMLElement {}
+export const WcsEditableField: {
+    prototype: WcsEditableField;
+    new (): WcsEditableField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-editable-field.js

@@ -0,0 +1,2 @@
+import{p as e,H as i,d as t,h as s,c as a}from"./p-2bef72c7.js";import{b as l,q as d,r as o,d as r}from"./p-e803bb26.js";import{d as c}from"./p-5a3d7fec.js";import{d as n}from"./p-ef26b4d8.js";import{d as h}from"./p-0c306f8c.js";import{d as f}from"./p-55668982.js";import{d as b}from"./p-04663560.js";const w=["m","l"];function u(e){return w.includes(e)}const v=":host{--wcs-editable-field-label-color:var(--wcs-semantic-color-text-primary);--wcs-editable-field-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-editable-field-label-gap:var(--wcs-semantic-spacing-base);--wcs-editable-field-label-font-size:var(--wcs-semantic-font-size-m);--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-default);--wcs-editable-field-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-editable-field-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-hover:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-height-m:var(--wcs-semantic-size-m);--wcs-editable-field-height-l:var(--wcs-semantic-size-l);--wcs-editable-field-font-size-m:var(--wcs-semantic-font-size-m);--wcs-editable-field-font-size-l:var(--wcs-semantic-font-size-l);--wcs-editable-field-border-radius:var(--wcs-semantic-border-radius-base);--wcs-editable-field-border-width:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-editable-field-border-width-hover:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-editable-field-border-color-hover:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-style:var(--wcs-semantic-border-style-focus-control);--wcs-editable-field-padding-vertical-m:0;--wcs-editable-field-padding-vertical-l:0;--wcs-editable-field-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-editable-field-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m);display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-editable-field-label-gap);font-weight:var(--wcs-editable-field-label-font-weight);font-size:var(--wcs-editable-field-label-font-size);color:var(--wcs-editable-field-label-color)}:host .edit-container{display:flex;width:100%}:host .edit-container .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}:host button.display-container{width:100%;border:none;font-family:inherit;text-align:start;box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host button.display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-editable-field-icon-color-readonly)}:host([readonly]){--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-readonly)}:host([readonly]) .display-container{color:var(--wcs-editable-field-value-color-readonly)}:host([readonly]) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default)}:host(:not([readonly])) .display-container:hover wcs-mat-icon,:host(:not([readonly])) .display-container:focus-visible wcs-mat-icon{display:flex;align-items:center}:host(:not([readonly])) .display-container:hover{color:var(--wcs-editable-field-value-color-hover);cursor:pointer;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover)}:host(:not([readonly])) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus)}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);--wcs-editable-field-host-height:var(--wcs-editable-field-height-l);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-l)}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m)}";const m=v;var p;(function(e){e[e["DISPLAY"]=0]="DISPLAY";e[e["EDIT"]=1]="EDIT";e[e["LOAD"]=2]="LOAD"})(p||(p={}));const g="Éditer";const y=20;const k=e(class e extends i{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=t(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=p.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!u(this.size)){console.warn(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${w.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidLoad(){const e=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(e);break;case"textarea":this.initWithTextArea(e);break;case"select":this.initWithSelect(e);break}}disconnectedCallback(){this.cleanUpSpiedElementEventListeners()}keyboardSubmitHandler(e){const i=this.type==="textarea"||this.type==="select"?r(e)&&e.ctrlKey:r(e);if(i){this.sendCurrentValue()}if(l(e)){this.discardChanges()}}onWcsInputOrChange(e){e.stopImmediatePropagation();const i=this.type==="select"?e.detail.value:e.detail.target.value;this.currentValue=i;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}cleanUpSpiedElementEventListeners(){var e,i,t;(e=this.spiedElement)===null||e===void 0?void 0:e.removeEventListener("keydown",this.onInputKeydownCallback);(i=this.spiedElement)===null||i===void 0?void 0:i.removeEventListener("wcsInput",this.onWcsInputOrChangeCallback);(t=this.spiedElement)===null||t===void 0?void 0:t.removeEventListener("wcsChange",this.onWcsInputOrChangeCallback)}initWithInput(e){const i=e.filter((e=>e.tagName==="WCS-INPUT"))[0];if(!i)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithTextArea(e){const i=e.filter((e=>e.tagName==="WCS-TEXTAREA"))[0];if(!i)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithSelect(e){const i=e.filter((e=>e.tagName==="WCS-SELECT"))[0];if(!i)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=i;this.addWcsChangeEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}addWcsChangeEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsChange",this.onWcsInputOrChangeCallback)}addWcsInputEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsInput",this.onWcsInputOrChangeCallback)}addKeyDownHandler(e){this.onInputKeydownCallback=this.keyboardSubmitHandler.bind(this);e.addEventListener("keydown",this.onInputKeydownCallback)}focusEditModeBtn(){setTimeout((()=>{var e;(e=this.editModeBtn)===null||e===void 0?void 0:e.focus()}),y)}sendCurrentValue(){if(this.currentState===p.EDIT){if(this.value===this.currentValue){this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=p.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorHandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=p.DISPLAY;this.isError=false;this.focusEditModeBtn()}forceDisplayStateAndValidate(){if(this.currentState===p.LOAD){this.value=this.currentValue;this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{throw new Error("You cannot set display state from "+p[this.currentState]+" state")}}onWindowClickEvent(e){if(d(e)&&e.detail!==0&&!o(e,this.el)){if(this.currentState===p.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=p.DISPLAY}onDisplayContainerClick(){if(this.currentState===p.DISPLAY&&this.readonly===false){this.currentState=p.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}setTimeout((()=>{if(this.type==="input"){this.spiedElement.focus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.focus()}}),y)}}getReadonlySvgIcon(){return s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},s("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),s("path",{d:"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z",transform:"translate(-0.5 -1.5)"}),s("path",{d:"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z",transform:"translate(-0.5 -1.5)"}))}formatValues(){let e=this.value;let i=this.currentValue;if(this.formatFn){e=this.formatFn(this.value);i=this.formatFn(this.currentValue)}if(Array.isArray(this.value)){e=this.value.join(", ")}if(Array.isArray(this.currentValue)){i=this.currentValue.join(", ")}return{formattedValue:e?s("span",null,e):s("span",null),formattedValueText:e,formattedCurrentValue:i?s("span",null,i):s("span",null)}}render(){const{formattedValue:e,formattedValueText:i,formattedCurrentValue:t}=this.formatValues();return s(a,{key:"81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478"},s("div",{key:"1278b7794e0127f1f2bc819d246712d55a139abd",class:"label"},this.label),s("button",{key:"6049a936d198c5ee68db9a29466b82dc0ca55fa2",type:"button",class:"display-container "+(this.currentState!==p.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick(),ref:e=>this.editModeBtn=e,"aria-label":`${g} ${this.label} ${i}`},e,s("wcs-mat-icon",{key:"97020f20f553553b1e3a866d6d2ad274504b1bc9",icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),s("div",{key:"17c58773fdaa738eef36c20545815ff10c35c5eb",class:"load-container "+(this.currentState!==p.LOAD?"display-none":"")},t,s("wcs-spinner",{key:"b2ef7dd52a95d0604cd74368a17cf26283a663a9"})),s("wcs-form-field",{key:"38891efe6c9c119ad7d261f31edba4b4e5e3ae71","is-error":this.isError,class:"edit-container "+(this.currentState!==p.EDIT?"display-none":"")},s("wcs-label",{key:"80ff051b722d175932c4cf56410f8c4081fe4cb8",class:"visually-hidden"},this.label),s("slot",{key:"4e8592e8283ce75e629f61dafd609c59cd5fbbc0"}),this.isError&&this.errorMsg?s("wcs-error",null,this.errorMsg):null))}get el(){return this}static get watchers(){return{value:["onValueChange"]}}static get style(){return m}},[1,"wcs-editable-field",{type:[1],label:[1],readonly:[516],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],size:[513],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]],{value:["onValueChange"]}]);function z(){if(typeof customElements==="undefined"){return}const e=["wcs-editable-field","wcs-error","wcs-form-field","wcs-label","wcs-mat-icon","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-editable-field":if(!customElements.get(e)){customElements.define(e,k)}break;case"wcs-error":if(!customElements.get(e)){c()}break;case"wcs-form-field":if(!customElements.get(e)){n()}break;case"wcs-label":if(!customElements.get(e)){h()}break;case"wcs-mat-icon":if(!customElements.get(e)){f()}break;case"wcs-spinner":if(!customElements.get(e)){b()}break}}))}z();const x=k;const E=z;export{x as WcsEditableField,E as defineCustomElement};
+//# sourceMappingURL=wcs-editable-field.js.map

package/composite-elements/wcs-editable-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","proxyCustomElement","H","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","warn","join","value","componentDidLoad","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","disconnectedCallback","cleanUpSpiedElementEventListeners","keyboardSubmitHandler","event","shouldValidateOnEnterKey","isEnterKey","ctrlKey","sendCurrentValue","isEscapeKey","discardChanges","onWcsInputOrChange","stopImmediatePropagation","detail","target","validateFn","isError","_a","removeEventListener","onInputKeydownCallback","_b","onWcsInputOrChangeCallback","_c","element","filter","x","tagName","Error","addWcsInputEventHandler","addKeyDownHandler","addWcsChangeEventHandler","elt","bind","addEventListener","focusEditModeBtn","setTimeout","editModeBtn","focus","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorHandler","onWindowClickEvent","isMouseEvent","clickInsideElement","onValueChange","onDisplayContainerClick","readonly","fitContent","getReadonlySvgIcon","h","xmlns","width","height","viewBox","class","d","transform","formatValues","formattedValue","formattedCurrentValue","formatFn","Array","isArray","formattedValueText","render","Host","key","label","onClick","ref","icon","errorMsg"],"sources":["src/components/editable-field/editable-field-interface.tsx","src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    /**\n     * The new value sent by the component inside the `wcs-editable-field`\n     */\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to commit the value, when the value is not systematically updated at every event firing\n     */\n    successHandler: () => void;\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to discard the value, when the value should not be updated \n     */\n    errorHandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    --wcs-editable-field-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-editable-field-label-gap: var(--wcs-semantic-spacing-base);\n    --wcs-editable-field-label-font-size: var(--wcs-semantic-font-size-m);\n\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-default);\n    --wcs-editable-field-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-editable-field-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-readonly: var(--wcs-semantic-color-text-tertiary);\n    --wcs-editable-field-height-m: var(--wcs-semantic-size-m);\n    --wcs-editable-field-height-l: var(--wcs-semantic-size-l);\n    --wcs-editable-field-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-editable-field-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-editable-field-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-editable-field-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-editable-field-border-width-hover: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-editable-field-border-color-hover: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-style: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-editable-field-padding-vertical-m: 0;\n    --wcs-editable-field-padding-vertical-l: 0;\n    --wcs-editable-field-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-editable-field-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);\n\n    // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-editable-field-label-gap);\n        font-weight: var(--wcs-editable-field-label-font-weight);\n        font-size: var(--wcs-editable-field-label-font-size);\n        color: var(--wcs-editable-field-label-color);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n\n        .visually-hidden {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            clip-path: inset(50%);\n            white-space: nowrap;\n            outline: 0;\n            outline-offset: 0;\n        }\n    }\n\n    button.display-container {\n        // Reset native button styles\n        width: 100%;\n        border: none;\n        font-family: inherit;\n        text-align: start;\n\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-editable-field-icon-color-readonly);\n    }\n}\n\n:host([readonly]) {\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-readonly);\n\n    .display-container {\n        color: var(--wcs-editable-field-value-color-readonly);\n\n        &:focus-visible {\n            outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default);\n        }\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover,\n    .display-container:focus-visible {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .display-container:hover {\n        color: var(--wcs-editable-field-value-color-hover);\n        cursor: pointer;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover);\n    }\n\n    .display-container:focus-visible {\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-l);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n *\n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n *\n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n *\n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n *\n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n *\n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field.  \n     * Will also be part of the edit button `aria-label`.\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidLoad() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_BEFORE_FOCUS)\n        }\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}\n                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/composite-elements/wcs-error.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsError extends Components.WcsError, HTMLElement {}
+export const WcsError: {
+    prototype: WcsError;
+    new (): WcsError;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-error.js

@@ -0,0 +1,2 @@
+import{L as o,d as s}from"./p-5a3d7fec.js";const t=o;const a=s;export{t as WcsError,a as defineCustomElement};
+//# sourceMappingURL=wcs-error.js.map

package/composite-elements/wcs-error.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/composite-elements/wcs-field-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsFieldContent extends Components.WcsFieldContent, HTMLElement {}
+export const WcsFieldContent: {
+    prototype: WcsFieldContent;
+    new (): WcsFieldContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-field-content.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as c,c as s}from"./p-2bef72c7.js";const n=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return c(s,{key:"251b9ccc1b13766b287f356dfc51d6a953ad0a5e",slot:"content"},c("slot",{key:"ee7d55bf47c0f468829e99a26a0fe340fbafcc9f"}))}},[1,"wcs-field-content"]);function o(){if(typeof customElements==="undefined"){return}const e=["wcs-field-content"];e.forEach((e=>{switch(e){case"wcs-field-content":if(!customElements.get(e)){customElements.define(e,n)}break}}))}o();const f=n;const r=o;export{f as WcsFieldContent,r as defineCustomElement};
+//# sourceMappingURL=wcs-field-content.js.map

package/composite-elements/wcs-field-content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldContent","proxyCustomElement","H","render","h","Host","key","slot"],"sources":["src/components/field-content/field-content.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The field-content is a subcomponent of `wcs-field`. It represents the text content of the field.\n * \n * @cssprop --wcs-field-content-color - Color of the content\n * @cssprop --wcs-field-content-font-weight - Font weight of the content\n * @cssprop --wcs-field-content-font-size - Font size of the content\n * @cssprop --wcs-field-content-line-height - Line height of the content\n */\n@Component({\n    tag: 'wcs-field-content',\n    shadow: true\n})\nexport class FieldContent implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"content\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"+DAcaA,EAAYC,EAAA,MAAAD,UAAAE,E,kEACrB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,WACPH,EAAA,QAAAE,IAAA,6C"}

package/composite-elements/wcs-field-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsFieldLabel extends Components.WcsFieldLabel, HTMLElement {}
+export const WcsFieldLabel: {
+    prototype: WcsFieldLabel;
+    new (): WcsFieldLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-field-label.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as t,c}from"./p-2bef72c7.js";const l=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(c,{key:"a051b09993d67bf56b087d86ba433caf1bdbb7a6",slot:"label"},t("slot",{key:"6044b728151fd48878f555d3db3e0754f31b7e51"}))}},[1,"wcs-field-label"]);function b(){if(typeof customElements==="undefined"){return}const e=["wcs-field-label"];e.forEach((e=>{switch(e){case"wcs-field-label":if(!customElements.get(e)){customElements.define(e,l)}break}}))}b();const n=l;const o=b;export{n as WcsFieldLabel,o as defineCustomElement};
+//# sourceMappingURL=wcs-field-label.js.map

package/composite-elements/wcs-field-label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldLabel","proxyCustomElement","H","render","h","Host","key","slot"],"sources":["src/components/field-label/field-label.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host, } from '@stencil/core';\n\n/**\n * The field-label is a subcomponent of `wcs-field`. It represents the label or title of the field.\n * \n * @cssprop --wcs-field-label-color - Color of the label\n * @cssprop --wcs-field-label-font-weight - Font weight of the label\n * @cssprop --wcs-field-label-font-size - Font size of the label \n * @cssprop --wcs-field-label-line-height - Line height of the label\n */\n@Component({\n    tag: 'wcs-field-label',\n    shadow: true\n})\nexport class FieldLabel implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"label\"><slot /></Host>\n        );\n    }\n}\n"],"mappings":"0DAcaA,EAAUC,EAAA,MAAAD,UAAAE,E,kEACnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQH,EAAA,QAAAE,IAAA,6C"}

package/composite-elements/wcs-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsField extends Components.WcsField, HTMLElement {}
+export const WcsField: {
+    prototype: WcsField;
+    new (): WcsField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-field.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as c,c as s}from"./p-2bef72c7.js";const i=":host{--wcs-field-label-color:var(--wcs-semantic-color-text-secondary);--wcs-field-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-field-label-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-label-line-height:var(--wcs-semantic-font-line-height-large);--wcs-field-content-color:var(--wcs-semantic-color-text-secondary);--wcs-field-content-font-weight:var(--wcs-semantic-font-weight-book);--wcs-field-content-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-content-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-field-margin-top:var(--wcs-semantic-spacing-base);--wcs-field-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-field-gap:var(--wcs-semantic-spacing-small);display:flex;flex-direction:column;margin-top:var(--wcs-field-margin-top);margin-bottom:var(--wcs-field-margin-bottom);gap:var(--wcs-field-gap)}::slotted([slot=label]){color:var(--wcs-field-label-color);font-weight:var(--wcs-field-label-font-weight);font-size:var(--wcs-field-label-font-size);line-height:var(--wcs-field-label-line-height)}::slotted([slot=content]){color:var(--wcs-field-content-color);font-weight:var(--wcs-field-content-font-weight);font-size:var(--wcs-field-content-font-size);line-height:var(--wcs-field-content-line-height)}";const n=i;const o=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return c(s,{key:"ae0a6c7224dc199cd6cd342d77878bfff17aa49b"},c("slot",{key:"408c146f3e6bfa1868964a29934494215627fb59",name:"label"}),c("slot",{key:"9c2151491f6acc4a5a6da36676e21e8dee6f156a",name:"content"}))}static get style(){return n}},[1,"wcs-field"]);function a(){if(typeof customElements==="undefined"){return}const e=["wcs-field"];e.forEach((e=>{switch(e){case"wcs-field":if(!customElements.get(e)){customElements.define(e,o)}break}}))}a();const l=o;const f=a;export{l as WcsField,f as defineCustomElement};
+//# sourceMappingURL=wcs-field.js.map

package/composite-elements/wcs-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fieldCss","WcsFieldStyle0","Field","proxyCustomElement","H","render","h","Host","key","name"],"sources":["src/components/field/field.scss?tag=wcs-field&encapsulation=shadow","src/components/field/field.tsx"],"sourcesContent":[":host{\n    --wcs-field-label-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-field-label-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-field-label-font-size: var(--wcs-semantic-font-size-body-3);\n    --wcs-field-label-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-field-content-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-field-content-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-field-content-font-size: var(--wcs-semantic-font-size-body-3);\n    --wcs-field-content-line-height: var(--wcs-semantic-font-line-height-medium);\n\n    --wcs-field-margin-top: var(--wcs-semantic-spacing-base);\n    --wcs-field-margin-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-field-gap: var(--wcs-semantic-spacing-small);\n\n    display: flex;\n    flex-direction: column;\n    margin-top: var(--wcs-field-margin-top);\n    margin-bottom: var(--wcs-field-margin-bottom);\n    gap: var(--wcs-field-gap);\n}\n::slotted([slot=label]) {\n    color: var(--wcs-field-label-color);\n    font-weight: var(--wcs-field-label-font-weight);\n    font-size: var(--wcs-field-label-font-size);\n    line-height: var(--wcs-field-label-line-height);\n}\n\n::slotted([slot=content]) {\n    color: var(--wcs-field-content-color);\n    font-weight: var(--wcs-field-content-font-weight);\n    font-size: var(--wcs-field-content-font-size);\n    line-height: var(--wcs-field-content-line-height);\n}\n","import { Component, ComponentInterface, h, Host, } from '@stencil/core';\n\n/**\n * This field component can be used to display the details of an entity. It is built around the label and the content of the field.\n * \n * @slot label Label of the field\n * @slot content Content of the field\n *\n * @cssprop --wcs-field-label-color - The color of the label\n * @cssprop --wcs-field-label-font-weight - The font weight of the label\n * @cssprop --wcs-field-label-font-size - The font size of the label\n * @cssprop --wcs-field-label-line-height - The line height of the label\n * \n * @cssprop --wcs-field-content-color - The color of the content\n * @cssprop --wcs-field-content-font-weight - The font weight of the content\n * @cssprop --wcs-field-content-font-size - The font size of the content\n * \n * @cssprop --wcs-field-margin-top - The margin top of the field \n * @cssprop --wcs-field-margin-bottom - The margin bottom of the field\n * @cssprop --wcs-field-gap - The gap between the label and the content\n *\n */\n@Component({\n    tag: 'wcs-field',\n    styleUrl: 'field.scss',\n    shadow: true\n})\nexport class Field implements ComponentInterface {\n    render() {\n        return (\n            <Host>\n                <slot name=\"label\"/>\n                <slot name=\"content\"/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAW,wvCACjB,MAAAC,EAAeD,E,MC0BFE,EAAKC,EAAA,MAAAD,UAAAE,E,kEACd,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,UACXH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,Y"}

package/composite-elements/wcs-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsFooter extends Components.WcsFooter, HTMLElement {}
+export const WcsFooter: {
+    prototype: WcsFooter;
+    new (): WcsFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-footer.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,h as t,c}from"./p-2bef72c7.js";const a=":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 s=a;const n=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(c,{key:"6fe975235d6de2793e55e8d10860649b5684c093"},t("footer",{key:"80b0ff721eedab3e4cc00fd2484a638718fc8b13",role:"contentinfo"},t("div",{key:"f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1",class:"container"},t("div",{key:"e1f9ea823133d972d3eb2bc8e7eaa18558448a73"},t("slot",{key:"d7177b9e98ac24ad39008669de01899e71c27079"})),t("div",{key:"849ceafdd459f24b672e1f68edf86ffd4fcce733",class:"end"},t("div",{key:"7077861e872bbb50e7e5de0c968fe2222e9bf7d7",class:"end-left"},t("slot",{key:"dded653e62bf683e0514c51b06e55ccb44f70c54",name:"end-left"})),t("div",{key:"ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5",class:"end-right"},t("slot",{key:"4201096294b44a29f74112c2acaa2163f9ecfcb9",name:"end-right"}))))))}static get style(){return s}},[1,"wcs-footer"]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-footer"];e.forEach((e=>{switch(e){case"wcs-footer":if(!customElements.get(e)){customElements.define(e,n)}break}}))}r();const d=n;const i=r;export{d as WcsFooter,i as defineCustomElement};
+//# sourceMappingURL=wcs-footer.js.map

package/composite-elements/wcs-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["footerCss","WcsFooterStyle0","Footer","proxyCustomElement","H","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":"oDAAA,MAAMA,EAAY,unDAClB,MAAAC,EAAeD,E,MCyBFE,EAAMC,EAAA,MAAAD,UAAAE,E,kEACf,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/composite-elements/wcs-form-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsFormField extends Components.WcsFormField, HTMLElement {}
+export const WcsFormField: {
+    prototype: WcsFormField;
+    new (): WcsFormField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-form-field.js

@@ -0,0 +1,2 @@
+import{F as o,d as s}from"./p-ef26b4d8.js";const t=o;const p=s;export{t as WcsFormField,p as defineCustomElement};
+//# sourceMappingURL=wcs-form-field.js.map

package/composite-elements/wcs-form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/composite-elements/wcs-galactic-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsGalacticMenu extends Components.WcsGalacticMenu, HTMLElement {}
+export const WcsGalacticMenu: {
+    prototype: WcsGalacticMenu;
+    new (): WcsGalacticMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-galactic-menu.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as t,c}from"./p-2bef72c7.js";import{i as o,a as i,s,r,b as n}from"./p-e803bb26.js";import{d as l}from"./p-55668982.js";import{c as u}from"./p-e1fb3625.js";const d=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const m=d;const p=["tabindex","title"];const b=e(class e extends a{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=u(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,p))}async setAriaAttribute(e,a){s(this.menuButton,e,a)}onWindowClickEvent(e){if(r(e,this.tooltip)||r(e,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(e){var a;if(n(e)){e.preventDefault();this.showPopoverMenu=false;(a=this.menuButton)===null||a===void 0?void 0:a.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return t(c,{key:"bc460c17b222723b8cc037042cc758f8ca0e50ec"},t("span",{key:"d324ff624a9e5c9f6984134d4091986cac11f18b"},this.text),t("button",Object.assign({key:"7b0160174a249b30e082b9b2a77aca334ee6256a","aria-haspopup":"true","aria-controls":"menu",ref:e=>{this.menuButton=e},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:e=>this.toggleMenu()}),t("wcs-mat-icon",{key:"96b20053845f5490791ea278c2444392ba630600",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),t("span",{key:"6f959f220edbf293fe6922f7aaeaab0f213bf736",id:"menu",role:"menu","data-show":this.showPopoverMenu},t("div",{key:"6a05e468d65252ecbb57b421a53be0a0a1974f98",id:"arrow","data-popper-arrow":true}),t("slot",{key:"c9398cbb856d836820ac1cddf3113710eeaff5fb"})))}get el(){return this}static get style(){return m}},[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32],setAriaAttribute:[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]);function g(){if(typeof customElements==="undefined"){return}const e=["wcs-galactic-menu","wcs-mat-icon"];e.forEach((e=>{switch(e){case"wcs-galactic-menu":if(!customElements.get(e)){customElements.define(e,b)}break;case"wcs-mat-icon":if(!customElements.get(e)){l()}break}}))}g();const h=b;const f=g;export{h as WcsGalacticMenu,f as defineCustomElement};
+//# sourceMappingURL=wcs-galactic-menu.js.map

package/composite-elements/wcs-galactic-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["galacticMenuCss","WcsGalacticMenuStyle0","GALACTIC_MENU_INHERITED_ATTRS","Galactic","proxyCustomElement","H","this","inheritedAttributes","componentDidLoad","menu","el","shadowRoot","getElementById","tooltip","popper","createPopper","placement","modifiers","name","options","offset","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","menuButton","onWindowClickEvent","event","clickInsideElement","showPopoverMenu","toggleMenu","onKeyDown","_event","isEscapeKey","preventDefault","_a","focus","componentDidRender","update","render","h","Host","key","text","ref","onClick","_","id","icon","size","role"],"sources":["src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-height: var(--wcs-semantic-size-s);\n\n    --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */\n    --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: var(--wcs-galactic-menu-height);\n    gap: var(--wcs-galactic-menu-gap);\n    padding: 0 var(--wcs-galactic-menu-padding-horizontal);\n    background-color: var(--wcs-galactic-menu-background-color);\n\n}\n#menu {\n    display: none;\n    background-color: var(--wcs-galactic-menu-overlay-background-color);\n    color: var(--wcs-galactic-menu-overlay-color);\n    padding: var(--wcs-galactic-menu-overlay-padding);\n    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-text-inverse, white); // resolve bad contrast issue with focus outline of wcs-button\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\nbutton {\n    background: transparent;\n    border: none;\n    color: inherit;\n\n    cursor: pointer;\n    user-select: none;\n\n    &:focus-visible {\n        @include focus-outline(var(--wcs-galactic-menu-icon-focus-outline-color), $outline-offset: 0);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport {\n    clickInsideElement,\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEscapeKey,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\n\nconst GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * *Part of communication design system*\n * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-galactic-menu-background-color - Background color of the menu\n * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu\n * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu\n * @cssprop --wcs-galactic-menu-height - Height of the menu\n * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon\n * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay\n * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay\n * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay\n */\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    private menuButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GALACTIC_MENU_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.menuButton, attr, value);\n    }\n\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toggleMenu();\n            }\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event)) {\n            _event.preventDefault();\n            this.showPopoverMenu = false;\n            this.menuButton?.focus();\n        }\n    }\n    \n    private toggleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <button aria-haspopup=\"true\"\n                        aria-controls=\"menu\"\n                        ref={el => {\n                            this.menuButton = el\n                        }}\n                        aria-expanded={this.showPopoverMenu ? \"true\" : \"false\"}\n                        {...this.inheritedAttributes}\n                        onClick={_ => this.toggleMenu()}>\n                    <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\"></wcs-mat-icon>\n                </button>\n                <span id=\"menu\" role=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kLAAA,MAAMA,EAAkB,+vDACxB,MAAAC,EAAeD,ECWf,MAAME,EAAgC,CAAC,WAAY,S,MAsBtCC,EAAQC,EAAA,MAAAD,UAAAE,E,kEAGTC,KAAAC,oBAA4C,G,qBAER,M,oBAS5C,gBAAAC,GACIF,KAAKG,KAAOH,KAAKI,GAAGC,WAAWC,eAAe,oBAC9CN,KAAKO,QAAUP,KAAKI,GAAGC,WAAWC,eAAe,QACjDN,KAAKQ,OAASC,EAAaT,KAAKG,KAAMH,KAAKO,QAAS,CAChDG,UAAW,aACXC,UAAW,CACP,CACIC,KAAM,SACNC,QAAS,CACLC,OAAQ,CAAC,EAAG,O,CAOhC,iBAAAC,GACIf,KAAKC,oBAAmBe,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlB,KAAKI,KAC3Be,EAAkBnB,KAAKI,GAAIR,G,CAKtC,sBAAMwB,CAAiBC,EAAyBC,GAC5CC,EAAqBvB,KAAKwB,WAAYH,EAAMC,E,CAKhD,kBAAAG,CAAmBC,GACf,GAAIC,EAAmBD,EAAO1B,KAAKO,UAAYoB,EAAmBD,EAAO1B,KAAKG,MAAO,CACjF,M,KACG,CACH,GAAIH,KAAK4B,gBAAiB,CACtB5B,KAAK6B,Y,GAMjB,SAAAC,CAAUC,G,MACN,GAAIC,EAAYD,GAAS,CACrBA,EAAOE,iBACPjC,KAAK4B,gBAAkB,OACvBM,EAAAlC,KAAKwB,cAAU,MAAAU,SAAA,SAAAA,EAAEC,O,EAIjB,UAAAN,GACJ7B,KAAK4B,iBAAmB5B,KAAK4B,e,CAGjC,kBAAAQ,GACI,GAAIpC,KAAKQ,OAAQ,CACbR,KAAKQ,OAAO6B,Q,EAIpB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,4CAAOzC,KAAK0C,MACZH,EAAA,SAAAvB,OAAAC,OAAA,CAAAwB,IAAA,2DAAsB,OAAM,gBACN,OACdE,IAAKvC,IACDJ,KAAKwB,WAAapB,CAAE,EACvB,gBACcJ,KAAK4B,gBAAkB,OAAS,SAC3C5B,KAAKC,oBAAmB,CAC5B2C,QAASC,GAAK7C,KAAK6B,eACvBU,EAAA,gBAAAE,IAAA,2CAAcK,GAAG,mBAAmBC,KAAK,aAAaC,KAAK,OAE/DT,EAAA,QAAAE,IAAA,2CAAMK,GAAG,OAAOG,KAAK,OAAM,YAAYjD,KAAK4B,iBACxCW,EAAA,OAAAE,IAAA,2CAAKK,GAAG,QAAO,2BACfP,EAAA,QAAAE,IAAA,8C"}

package/composite-elements/wcs-galactic.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsGalactic extends Components.WcsGalactic, HTMLElement {}
+export const WcsGalactic: {
+    prototype: WcsGalactic;
+    new (): WcsGalactic;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/composite-elements/wcs-galactic.js

@@ -0,0 +1,2 @@
+import{p as c,H as a,h as s,c as t}from"./p-2bef72c7.js";const L=":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 i=L;const w=c(class c extends a{constructor(){super();this.__registerHost();this.__attachShadow();this.text=undefined;this.show=false}render(){return s(t,{key:"bcede9aa03d2014887eeaa4d5728d57c32a69de2"},s("div",{key:"2d031655b20b592b77e2227a195f15535071c069",class:"container"},s("div",{key:"1d3a345c56925946f5b39ad9edaad7ee927343cc",class:"logo-container"},s("img",{key:"3f7e9a0a7df3a954d21e328da562189771baf8a8",src:M,id:"sncf-logo",alt:"SNCF"}),s("span",{key:"68c00801e7f2564930d6a5f77fc6f45511a321cf"},this.text)),s("div",{key:"3724b08dca457a9be21ecb84925ed3fea4e49f95",class:"actions-container"},s("slot",{key:"572f4ca9036c737a579f2c58ec113cada4dd421c"}))))}static get style(){return i}},[1,"wcs-galactic",{text:[1],show:[32]}]);const M="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";function e(){if(typeof customElements==="undefined"){return}const c=["wcs-galactic"];c.forEach((c=>{switch(c){case"wcs-galactic":if(!customElements.get(c)){customElements.define(c,w)}break}}))}e();const j=w;const o=e;export{j as WcsGalactic,o as defineCustomElement};
+//# sourceMappingURL=wcs-galactic.js.map

package/composite-elements/wcs-galactic.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["galacticCss","WcsGalacticStyle0","Galactic","proxyCustomElement","H","render","h","Host","key","class","src","SNCF_BASE64_SVG_LOGO","id","alt","this","text"],"sources":["src/components/galactic/galactic.scss?tag=wcs-galactic&encapsulation=shadow","src/components/galactic/galactic.tsx"],"sourcesContent":["\n:host {\n    --wcs-galactic-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-height: var(--wcs-semantic-size-s);\n    --wcs-galactic-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-galactic-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-galactic-max-width: var(--wcs-com-content-max-width);\n    --wcs-galactic-padding-horizontal: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-galactic-logo-height: var(--wcs-semantic-size-s);\n    --wcs-galactic-logo-margin-right: calc(2 * var(--wcs-semantic-spacing-base));\n\n    /* To enforce contrast color on dropdown / buttons added in the galactic slot */\n    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-galactic-text-color);\n\n    display: block;\n    background-color: var(--wcs-galactic-background-color);\n}\n\n.container {\n    height: var(--wcs-galactic-height);\n    align-items: center;\n    justify-content: space-between;\n    color: var(--wcs-galactic-text-color);\n    font-size: var(--wcs-galactic-font-size);\n    font-weight: var(--wcs-galactic-font-weight);\n    display: flex;\n    max-width: var(--wcs-galactic-max-width);\n    padding: 0 var(--wcs-galactic-padding-horizontal);\n    margin: 0 auto;\n\n    #sncf-logo {\n        height: var(--wcs-galactic-logo-height);\n        margin-right: var(--wcs-galactic-logo-margin-right);\n    }\n\n    .logo-container {\n        display: flex;\n        align-items: center;\n    }\n}\n\n.actions-container {\n    display: flex;\n    align-items: center;\n}\n","import { Component, ComponentInterface, Host, h, Prop, State } from '@stencil/core';\n\n/**\n * *Part of communication design system*\n * This component replaces the vertical navbar for sites and applications that use the communication design system\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-galactic-background-color - Background color of the bar\n * @cssprop --wcs-galactic-height - Height of the bar\n * @cssprop --wcs-galactic-text-color - Text color of the bar\n * @cssprop --wcs-galactic-font-size - Font size of the text in the bar\n * @cssprop --wcs-galactic-font-weight - Font weight of the text in the bar\n * @cssprop --wcs-galactic-max-width - Maximum width of the bar\n * @cssprop --wcs-galactic-padding-horizontal - Horizontal padding of the bar\n * @cssprop --wcs-galactic-logo-height - Height of the SNCF logo\n * @cssprop --wcs-galactic-logo-margin-right - Margin right of the SNCF logo\n */\n@Component({\n    tag: 'wcs-galactic',\n    styleUrl: 'galactic.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    /** Text to display in the bar */\n    @Prop() text: string;\n    @State() show: boolean = false;\n\n\n    render(): any {\n        return (<Host>\n                <div class=\"container\">\n                    <div class=\"logo-container\">\n                        <img\n                            src={SNCF_BASE64_SVG_LOGO}\n                            id=\"sncf-logo\"\n                            alt=\"SNCF\"/>\n                        <span>{this.text}</span>\n                    </div>\n                    <div class=\"actions-container\">\n                        <slot/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n\nconst SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +\n    'c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5' +\n    'rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW' +\n    'VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e' +\n    'WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz' +\n    'dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x' +\n    'vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj' +\n    'csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL' +\n    'TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj' +\n    'RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA' +\n    'uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS' +\n    'wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL' +\n    'jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN' +\n    'OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw' +\n    'yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC' +\n    'wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM' +\n    'S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu' +\n    'OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw' +\n    'wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT' +\n    'kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K';\n"],"mappings":"yDAAA,MAAMA,EAAc,8xCACpB,MAAAC,EAAeD,E,MCsBFE,EAAQC,EAAA,MAAAD,UAAAE,E,gGAGQ,K,CAGzB,MAAAC,GACI,OAAQC,EAACC,EAAI,CAAAC,IAAA,4CACLF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,OAAAE,IAAA,2CACIE,IAAKC,EACLC,GAAG,YACHC,IAAI,SACRP,EAAA,QAAAE,IAAA,4CAAOM,KAAKC,OAEhBT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACPH,EAAA,QAAAE,IAAA,+C,wEASxB,MAAMG,EAAuB,6FACzB,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,qC"}