wcs-core 7.3.0 → 7.4.1

package/README.md

@@ -18,6 +18,8 @@ It is built using  [Stencil](https://github.com/ionic-team/stencil) and document
 
 If you read this documentation on GitHub, only the development branch is updated at the moment. We use the [GitLab project](https://gitlab.com/SNCF/wcs/) for WCS development and releases.
 
+We support the latest version (and LTS if applicable) of the following browsers : Chrome, Firefox, Safari, Edge, Opera.
+
 ## Documentation archives
 
 If you are looking for the documentation of a specific version, you can find using the following links (we only keep the latest version of each major version) :
@@ -58,7 +60,7 @@ You can get a preview of what's planned for the following versions using our [bo
 
 Consult the [changelog](https://wcs.dev.sncf/?path=/docs/documentation-changelog--documentation) to know what's going on.
 
-### Example usage
+## Example usage
 
 There are example projects under `example` folder for angular and react.
 
@@ -95,7 +97,7 @@ npm run start
 
 If you have any question, don't hesitate to [fill an issue](https://gitlab.com/SNCF/wcs/-/issues/new).
 
-### Install in your project
+## Install in your project
 
 You can refer to the [official WCS documentation](https://wcs.dev.sncf/?path=/docs/documentation-getting-started-angular--documentation)
 to use the lib with Angular or React. For other, StencilJS offers many integrations with different JS frameworks.
@@ -106,9 +108,11 @@ You can refer to [their official documentation](https://stenciljs.com/docs/overv
 
 ### Bug, Feature request, etc...
 
-Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss about it.
+Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss it.
 If you want to contribute code, please fill in an issue first so we can handle it properly.
 
+Also, if you are an SNCF employee, you can join the `Web Components` group on Teams to discuss with us. We prefer to discuss in the open and easily searchable issues tracker on GitLab when possible, but we understand that some discussions are better suited for a chat or too sensitive to be public.
+
 ### Starting the project
 
 ```sh
@@ -123,22 +127,20 @@ npm start -- --filter select
 
 ### Test
 
-The project uses stencil built-in facility for testing : https://stenciljs.com/docs/testing-overview.
+The project uses stencil playwright built-in facility for testing : https://stenciljs.com/docs/testing/playwright/overview.
 
 We encourage doing TDD on functional components. To launch the tests suite simply launch :
 
 ```sh
-npm run test:watch
+npm run test:playwright:ui
 # Or if you simply want to run them once
 npm test
 ```
 
-To launch a specific suite of tests you can simply launch
+To launch a specific suite of tests you can simply launch it in the UI playwright mode
 
 ```sh
-npm run test:e2e:file path_to_tests_file
-# Example: you must be at the root of the project
-npm run test:e2e:file src/components/tabs/tabs.e2e.ts
+npm run test:playwright:ui
 ```
 
 ### License

package/bundle/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source.
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. Ensuring that the component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;

package/bundle/index.js

@@ -0,0 +1,2 @@
+import{WcsAccordion as o}from"./wcs-accordion.js";import{WcsAccordionContent as r}from"./wcs-accordion-content.js";import{WcsAccordionHeader as m}from"./wcs-accordion-header.js";import{WcsAccordionPanel as t}from"./wcs-accordion-panel.js";import{WcsActionBar as i}from"./wcs-action-bar.js";import{WcsAlert as c}from"./wcs-alert.js";import{WcsAlertDrawer as p}from"./wcs-alert-drawer.js";import{WcsApp as e}from"./wcs-app.js";import{WcsBadge as f}from"./wcs-badge.js";import{WcsBreadcrumb as w}from"./wcs-breadcrumb.js";import{WcsBreadcrumbItem as j}from"./wcs-breadcrumb-item.js";import{WcsButton as n}from"./wcs-button.js";import{WcsCard as d}from"./wcs-card.js";import{WcsCardBody as l}from"./wcs-card-body.js";import{WcsCardContent as u}from"./wcs-card-content.js";import{WcsCardFooter as h}from"./wcs-card-footer.js";import{WcsCardHeader as v}from"./wcs-card-header.js";import{WcsCardMedia as x}from"./wcs-card-media.js";import{WcsCheckbox as k}from"./wcs-checkbox.js";import{WcsChip as y}from"./wcs-chip.js";import{WcsComNav as E}from"./wcs-com-nav.js";import{WcsComNavCategory as P}from"./wcs-com-nav-category.js";import{WcsComNavItem as A}from"./wcs-com-nav-item.js";import{WcsComNavSubmenu as z}from"./wcs-com-nav-submenu.js";import{WcsCounter as N}from"./wcs-counter.js";import{WcsDivider as O}from"./wcs-divider.js";import{WcsDropdown as q}from"./wcs-dropdown.js";import{WcsDropdownDivider as B}from"./wcs-dropdown-divider.js";import{WcsDropdownHeader as C}from"./wcs-dropdown-header.js";import{WcsDropdownItem as D}from"./wcs-dropdown-item.js";import{WcsEditableField as F}from"./wcs-editable-field.js";import{WcsError as G}from"./wcs-error.js";import{WcsField as H}from"./wcs-field.js";import{WcsFieldContent as I}from"./wcs-field-content.js";import{WcsFieldLabel as J}from"./wcs-field-label.js";import{WcsFooter as K}from"./wcs-footer.js";import{WcsFormField as L}from"./wcs-form-field.js";import{WcsGalactic as M}from"./wcs-galactic.js";import{WcsGalacticMenu as Q}from"./wcs-galactic-menu.js";import{WcsGrid as R}from"./wcs-grid.js";import{WcsGridColumn as S}from"./wcs-grid-column.js";import{WcsGridCustomCell as T}from"./wcs-grid-custom-cell.js";import{WcsGridPagination as U}from"./wcs-grid-pagination.js";import{WcsHeader as V}from"./wcs-header.js";import{WcsHint as W}from"./wcs-hint.js";import{WcsHorizontalStepper as X}from"./wcs-horizontal-stepper.js";import{WcsIcon as Y}from"./wcs-icon.js";import{WcsInput as Z}from"./wcs-input.js";import{WcsLabel as $}from"./wcs-label.js";import{WcsListItem as _}from"./wcs-list-item.js";import{WcsListItemProperties as oo}from"./wcs-list-item-properties.js";import{WcsListItemProperty as ro}from"./wcs-list-item-property.js";import{WcsMatIcon as so}from"./wcs-mat-icon.js";import{WcsModal as mo}from"./wcs-modal.js";import{WcsNativeSelect as to}from"./wcs-native-select.js";import{WcsNav as io}from"./wcs-nav.js";import{WcsNavItem as co}from"./wcs-nav-item.js";import{WcsProgressBar as po}from"./wcs-progress-bar.js";import{WcsProgressRadial as eo}from"./wcs-progress-radial.js";import{WcsRadio as fo}from"./wcs-radio.js";import{WcsRadioGroup as wo}from"./wcs-radio-group.js";import{WcsSelect as jo}from"./wcs-select.js";import{WcsSelectOption as ao}from"./wcs-select-option.js";import{WcsSkeletonCircle as no}from"./wcs-skeleton-circle.js";import{WcsSkeletonRectangle as lo}from"./wcs-skeleton-rectangle.js";import{WcsSkeletonText as bo}from"./wcs-skeleton-text.js";import{WcsSpinner as go}from"./wcs-spinner.js";import{WcsSwitch as uo}from"./wcs-switch.js";import{WcsTab as ho}from"./wcs-tab.js";import{WcsTabs as vo}from"./wcs-tabs.js";import{WcsTextarea as xo}from"./wcs-textarea.js";import{WcsTooltip as ko}from"./wcs-tooltip.js";export{g as getAssetPath,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-2bef72c7.js";const yo=s=>{if(typeof customElements!=="undefined"){[o,r,m,t,i,c,p,e,f,w,j,n,d,l,u,h,v,x,k,y,E,P,A,z,N,O,q,B,C,D,F,G,H,I,J,K,L,M,Q,R,S,T,U,V,W,X,Y,Z,$,_,oo,ro,so,mo,to,io,co,po,eo,fo,wo,jo,ao,no,lo,bo,go,uo,ho,vo,xo,ko].forEach((o=>{if(!customElements.get(o.is)){customElements.define(o.is,o,s)}}))}};export{yo as defineCustomElements};
+//# sourceMappingURL=index.js.map

package/bundle/index.js.map

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

package/bundle/p-010cf905.js

@@ -0,0 +1,2 @@
+import{p as e,H as r,h as s,c as i}from"./p-2bef72c7.js";import{i as o}from"./p-a0f32ead.js";import{x as t}from"./p-2e9b9605.js";import{i as c}from"./p-a7468a3a.js";const a=":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap);}:host .input-container{display:flex}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse);--wcs-button-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host ::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}::slotted([slot=prefix][disabled]),::slotted([slot=prefix]:disabled),::slotted([slot=prefix][aria-disabled=true]),::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(:not([slot=prefix])){--wcs-input-border-radius-left:0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}:host(.has-suffix) ::slotted(:not([slot=suffix])){--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])){--wcs-input-border-radius-left:0;--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:0;--wcs-native-select-border-radius:0}";const l=a;const d=e(class e extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("[slot=suffix]")!==null;this.hasPrefix=this.el.querySelector("[slot=prefix]")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(e){this.updateErrorStateOnInput(e);this.updateAriaAttributes()}updateErrorStateOnInput(e){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(e){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...e){var r;for(const s of e){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===s.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var e;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((e=>{var s;const i=e.filter((e=>e.attributeName==="required"))[0];if(i){this.updateLabelRequiredFlag((s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const s=(e=this.spiedElement)===null||e===void 0?void 0:e.hasAttribute("required");this.updateLabelRequiredFlag(s,r)}initSpiedElement(){var e,r;const s=["wcs-input","wcs-select","wcs-native-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(e=this.el.shadowRoot.querySelector("slot:not([name])"))===null||e===void 0?void 0:e.assignedElements().filter((e=>[...s,"SLOT"].map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((e=>s.map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+s.toString()+". Some features may not work with the provided component.");return}}async updateAriaAttributes(){if(o(this.spiedElement)){const e=[];if(c(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(t(s))}}else{if(this.label){e.push(t(this.label))}}if(this.description){e.push(t(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(t(this.error))}}else{this.spiedElement.setAriaAttribute("aria-invalid","false")}this.spiedElement.setAriaAttribute("aria-label",e.length>0?e.join(" "):null)}}get label(){var e;return((e=this.el.querySelector("wcs-label"))===null||e===void 0?void 0:e.textContent)||null}get description(){var e;return((e=this.el.querySelector("wcs-hint"))===null||e===void 0?void 0:e.textContent)||null}get error(){var e;return((e=this.el.querySelector("wcs-error"))===null||e===void 0?void 0:e.textContent)||null}updateLabelRequiredFlag(e,r){if(e&&r){r.setAttribute("required","true")}else if(!e&&r){r.removeAttribute("required")}}disconnectedCallback(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()}render(){let e="";const r=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return s(i,{key:"d8a5d2023add393b0a31173351a3d16d9fa0b1a6",class:e},s("slot",{key:"3f347f4dce239c0106fbbe52bdc217fa37c05d01",name:"label"}),s("div",{key:"d6cb92104d72530059ecb9a383ff832afb0c2141",class:"input-container"},s("slot",{key:"8be28f721ff351d41dced80c97c0e34337703d0e",name:"prefix"}),s("slot",{key:"cc58d463877a1e8513736a987286e965870e096d",onSlotchange:()=>this.onFormInputSlotChange()}),s("slot",{key:"898709cfcf0ae1cd43dabd55547d62199d6230c9",name:"suffix"})),r?s("slot",{name:"error"}):"",s("slot",{key:"aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return this}static get watchers(){return{isError:["isErrorChange"]}}static get style(){return l}},[1,"wcs-form-field",{isError:[1540,"is-error"],hasPrefix:[32],hasSuffix:[32],spiedElement:[32]},undefined,{isError:["isErrorChange"]}]);function f(){if(typeof customElements==="undefined"){return}const e=["wcs-form-field"];e.forEach((e=>{switch(e){case"wcs-form-field":if(!customElements.get(e)){customElements.define(e,d)}break}}))}export{d as F,f as d};
+//# sourceMappingURL=p-010cf905.js.map

package/bundle/p-010cf905.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["formFieldCss","WcsFormFieldStyle0","FormField","proxyCustomElement","H","componentWillLoad","this","hasSuffix","el","querySelector","hasPrefix","componentDidLoad","initSpiedElement","addRequiredMarkerToLabel","updateErrorStateOnInput","isError","isErrorChange","newValue","updateAriaAttributes","spiedElementIsOfType","spiedElement","setAttribute","types","type","_a","tagName","toUpperCase","label","observer","MutationObserver","mutations","requiredAttMutation","filter","m","attributeName","updateLabelRequiredFlag","hasAttribute","observe","attributes","isRequired","SUPPORTED_COMPONENTS","shadowRoot","assignedElements","n","map","x","indexOf","nodeName","_b","console","warn","toString","isMutableAriaAttribute","ariaLabelParts","isControlComponentWithLabel","innerLabel","getLabel","combinedLabel","trim","push","normalizeWhitespace","description","setAriaAttribute","error","length","join","textContent","removeAttribute","disconnectedCallback","disconnect","render","classes","h","Host","key","class","name","onSlotchange","onFormInputSlotChange"],"sources":["src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n    --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-form-field-gap);\n\n    .input-container {\n        display: flex;\n    }\n\n    /* Components in the prefix slot */\n    ::slotted([slot=prefix]) {\n        /* Select */\n        --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-select-control-border-width-default: 0;\n        --wcs-select-control-border-style-focus: dashed;\n        --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n        /* Native select */\n        --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-native-select-border-width: 0;\n        --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n        --wcs-native-select-border-style-focus: dashed;\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n        /* Button */\n        --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n    /* Components in the suffix slot */\n    ::slotted([slot=suffix]) {\n        --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Disabled components in the prefix slot */\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n    --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/* Hover and press states */\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n/* Components in the center that are prefixed */\n:host(.has-prefix) {\n    ::slotted(:not([slot=prefix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Components in the center that are suffixed */\n:host(.has-suffix) {\n    ::slotted(:not([slot=suffix])) {\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n}\n\n/* Components in the center that are prefixed AND suffixed */\n:host(.has-prefix.has-suffix) {\n    ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: 0;\n        --wcs-native-select-border-radius: 0;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\n            \n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"mappings":"qKAAA,MAAMA,EAAe,0tJACrB,MAAAC,EAAeD,E,MCuDFE,EAASC,EAAA,MAAAD,UAAAE,E,+EAMuC,M,eAEnB,M,eACA,M,4BAKtC,iBAAAC,GACIC,KAAKC,UAAYD,KAAKE,GAAGC,cAAc,mBAAqB,KAC5DH,KAAKI,UAAYJ,KAAKE,GAAGC,cAAc,mBAAqB,I,CAGhE,gBAAAE,GACIL,KAAKM,mBACLN,KAAKO,2BACLP,KAAKQ,wBAAwBR,KAAKS,Q,CAK9B,aAAAC,CAAcC,GAClBX,KAAKQ,wBAAwBG,GAC7BX,KAAKY,sB,CAGD,uBAAAJ,CAAwBG,GAC5B,GAAIX,KAAKa,qBAAqB,YAAa,gBAAiB,CACxD,GAAIF,EAAU,CACVX,KAAKc,aAAaC,aAAa,QAAS,Q,KACrC,CACHf,KAAKc,aAAaC,aAAa,QAAS,U,GAU5C,oBAAAF,IAAwBG,G,MAC5B,IAAK,MAAMC,KAAQD,EAAO,CACtB,KAAIE,EAAAlB,KAAKc,gBAAY,MAAAI,SAAA,SAAAA,EAAEC,WAAYF,EAAKG,cAAe,OAAO,I,CAElE,OAAO,K,CAIH,wBAAAb,G,MAEJ,MAAMc,EAAQrB,KAAKE,GAAGC,cAAc,aACpCH,KAAKsB,SAAW,IAAIC,kBAAiBC,I,MACjC,MAAMC,EAAsBD,EAAUE,QAAOC,GAAKA,EAAEC,gBAAkB,aAAY,GAClF,GAAIH,EAAqB,CACrBzB,KAAK6B,yBAAwBX,EAAAlB,KAAKc,gBAAY,MAAAI,SAAA,SAAAA,EAAEY,aAAa,YAAaT,E,KAGlF,GAAIrB,KAAKc,aAAc,CACnBd,KAAKsB,SAASS,QAAQ/B,KAAKc,aAAc,CAACkB,WAAY,M,CAG1D,MAAMC,GAAaf,EAAAlB,KAAKc,gBAAY,MAAAI,SAAA,SAAAA,EAAEY,aAAa,YACnD9B,KAAK6B,wBAAwBI,EAAYZ,E,CAIrC,gBAAAf,G,QACJ,MAAM4B,EAAuB,CAAC,YAAa,aAAc,oBAAqB,eAAgB,kBAAmB,aAAc,eAAgB,oBAAqB,eAEpKlC,KAAKc,cAAeI,EAAClB,KAAKE,GAAGiC,WAAWhC,cAAc,uBAAuC,MAAAe,SAAA,SAAAA,EACvFkB,mBACDV,QAAOW,GAAK,IAAIH,EAAsB,QAAQI,KAAIC,GAAKA,EAAEnB,gBAAeoB,QAAQH,EAAEI,aAAe,IAAG,GAGzG,KAAIC,EAAA1C,KAAKc,gBAAY,MAAA4B,SAAA,SAAAA,EAAEvB,WAAY,OAAQ,CACvCnB,KAAKc,aAAiBd,KAAKc,aACtBsB,mBACAV,QAAOW,GAAKH,EAAqBI,KAAIC,GAAKA,EAAEnB,gBAAeoB,QAAQH,EAAEI,aAAe,IAAG,E,CAGhG,IAAKzC,KAAKc,aAAc,CAEpB6B,QAAQC,KAAK,qCAAuCV,EAAqBW,WAAa,6DACtF,M,EAIA,0BAAMjC,GACV,GAAIkC,EAAuB9C,KAAKc,cAAe,CAC3C,MAAMiC,EAA2B,GACjC,GAAIC,EAA4BhD,KAAKc,cAAe,CAChD,MAAMmC,QAAmBjD,KAAKc,aAAaoC,WAC3C,MAAMC,EAAgB,GAAGnD,KAAKqB,OAAS,MAAM4B,GAAc,KAAKG,OAChE,GAAGD,EAAe,CACdJ,EAAeM,KAAKC,EAAoBH,G,MAEzC,CACH,GAAGnD,KAAKqB,MAAO,CACX0B,EAAeM,KAAKC,EAAoBtD,KAAKqB,O,EAIrD,GAAGrB,KAAKuD,YAAa,CACjBR,EAAeM,KAAKC,EAAoBtD,KAAKuD,a,CAIjD,GAAGvD,KAAKS,QAAS,CACbT,KAAKc,aAAa0C,iBAAiB,eAAgB,QACnD,GAAGxD,KAAKyD,MAAO,CACXV,EAAeM,KAAKC,EAAoBtD,KAAKyD,O,MAE9C,CACHzD,KAAKc,aAAa0C,iBAAiB,eAAgB,Q,CAGvDxD,KAAKc,aAAa0C,iBAAiB,aAAcT,EAAeW,OAAS,EAAIX,EAAeY,KAAK,KAAO,K,EAIhH,SAAYtC,G,MACR,QAAOH,EAAAlB,KAAKE,GAAGC,cAAc,gBAAY,MAAAe,SAAA,SAAAA,EAAE0C,cAAe,I,CAG9D,eAAYL,G,MACR,QAAOrC,EAAAlB,KAAKE,GAAGC,cAAc,eAAW,MAAAe,SAAA,SAAAA,EAAE0C,cAAe,I,CAG7D,SAAYH,G,MACR,QAAOvC,EAAAlB,KAAKE,GAAGC,cAAc,gBAAY,MAAAe,SAAA,SAAAA,EAAE0C,cAAe,I,CAGtD,uBAAA/B,CAAwBI,EAAqBZ,GACjD,GAAIY,GAAcZ,EAAO,CACrBA,EAAMN,aAAa,WAAY,O,MAC5B,IAAKkB,GAAcZ,EAAO,CAC7BA,EAAMwC,gBAAgB,W,EAI9B,oBAAAC,G,OACI5C,EAAAlB,KAAKsB,YAAQ,MAAAJ,SAAA,SAAAA,EAAE6C,Y,CAGnB,MAAAC,GACI,IAAIC,EAAU,GACd,MAAMxD,EAAUT,KAAKS,QAErB,GAAIT,KAAKC,UAAW,CAChBgE,GAAW,a,CAEf,GAAIjE,KAAKI,UAAW,CAChB6D,GAAW,a,CAEf,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOJ,GACTC,EAAA,QAAAE,IAAA,2CAAME,KAAK,UACXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,WACXJ,EAAA,QAAAE,IAAA,2CAAMG,aAAc,IAAMvE,KAAKwE,0BAC/BN,EAAA,QAAAE,IAAA,2CAAME,KAAK,YAGX7D,EAAWyD,EAAA,QAAMI,KAAK,UAAa,GAEvCJ,EAAA,QAAAE,IAAA,2CAAME,KAAK,a,CAKf,qBAAAE,GACJxE,KAAKM,mBACLN,KAAKY,uBACLZ,KAAKO,2BACLP,KAAKQ,wBAAwBR,KAAKS,Q"}

package/bundle/p-2751ddc1.js

@@ -0,0 +1,2 @@
+import{p as o,H as e,d as c,h as s,c as t}from"./p-2bef72c7.js";import{y as r,d as i,c as n}from"./p-2e9b9605.js";import{d as l}from"./p-44a3b0b9.js";const a="wcs-select-option{--wcs-select-option-height:var(--wcs-semantic-size-m);--wcs-select-option-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-select-option-padding-vertical:0;--wcs-select-option-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-select-option-text-font-size:var(--wcs-semantic-font-size-base);--wcs-select-option-text-color-default:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-focus:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-select-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-select-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-select-option-background-color-selected:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-select-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-secondary-selected-hover);--wcs-select-option-background-color-selected-press:var(--wcs-semantic-color-background-action-secondary-selected-press);--wcs-select-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-secondary-selected-disabled);--wcs-select-option-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-select-option-border-style-focus:var(--wcs-semantic-border-style-focus-base);--wcs-select-option-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-select-option-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-select-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-option-checkbox-color:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-select-option-gap:var(--wcs-semantic-spacing-base);--wcs-select-option-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-select-option-gap);padding:var(--wcs-select-option-padding-vertical) var(--wcs-select-option-padding-horizontal);height:var(--wcs-select-option-height);cursor:pointer;user-select:none;font-weight:var(--wcs-select-option-text-font-weight);font-size:var(--wcs-select-option-text-font-size);color:var(--wcs-select-option-text-color-default);background-color:var(--wcs-select-option-background-color-default);transition-duration:var(--wcs-select-option-transition-duration);transition-property:background-color, color;transition-timing-function:ease;border-radius:var(--wcs-select-option-border-radius);overflow:hidden;white-space:nowrap}wcs-select-option:focus-visible{outline:var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);outline-offset:calc(-1 * var(--wcs-select-option-border-width-focus))}wcs-select-option:focus{color:var(--wcs-select-option-text-color-focus);background-color:var(--wcs-select-option-background-color-focus)}wcs-select-option:hover{color:var(--wcs-select-option-text-color-hover);background-color:var(--wcs-select-option-background-color-hover)}wcs-select-option:active{background-color:var(--wcs-select-option-background-color-press)}wcs-select-option[disabled]{cursor:not-allowed;pointer-events:none;color:var(--wcs-select-option-text-color-disabled)}wcs-select-option[hidden]{display:none}wcs-select-option[selected]{color:var(--wcs-select-option-text-color-selected);background-color:var(--wcs-select-option-background-color-selected)}wcs-select-option[selected]:hover{background-color:var(--wcs-select-option-background-color-selected-hover)}wcs-select-option[selected]:active{background-color:var(--wcs-select-option-background-color-selected-press)}wcs-select-option[selected][disabled]{color:var(--wcs-select-option-text-color-disabled);background-color:var(--wcs-select-option-background-color-selected-disabled)}wcs-select-option[multiple] wcs-checkbox{pointer-events:none}wcs-select-option[multiple]:hover wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-select-option-checkbox-color)}wcs-select-option[highlighted]{outline:var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);outline-offset:calc(-1 * var(--wcs-select-option-border-width-focus))}wcs-select-option[highlighted] wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-select-option-checkbox-color)}";const d=a;const p=o(class o extends e{constructor(){super();this.__registerHost();this.wcsSelectOptionClick=c(this,"wcsSelectOptionClick",7);this.disabled=false;this.selected=false;this.highlighted=false;this.value=undefined;this.chipColor=undefined;this.chipBackgroundColor=undefined;this.multiple=false}componentWillLoad(){this.selectOptionId=r(this.el.tagName);if(this.value===undefined){this.value=this.el.innerText||""}}chooseOption(o){if(!this.disabled){o.stopPropagation();const e=this.el.innerText;this.wcsSelectOptionClick.emit({source:this.el,value:this.value,displayText:e})}}onMouseUp(o){this.chooseOption(o)}handleKeydown(o){if(i(o)||n(o)){this.chooseOption(o);o.preventDefault();o.stopPropagation()}}render(){return s(t,{key:"18a9f541ccf9757c1b4e9005ecd9ca98f40ced22",id:this.selectOptionId,"aria-selected":this.selected||this.highlighted?"true":"false",slot:"options",role:"option",tabindex:"-1"},this.multiple&&s("wcs-checkbox",{key:"aa89dc61bd7ddabf6efdf1f7b5fc6bc024f91ffd",tabindex:"-1",checked:this.selected,disabled:this.disabled}),s("slot",{key:"fc59a661788d75fd7f172e8ef13f7360c2540552"}))}get el(){return this}static get style(){return d}},[4,"wcs-select-option",{disabled:[1540],selected:[1540],highlighted:[1540],value:[8],chipColor:[1,"chip-color"],chipBackgroundColor:[1,"chip-background-color"],multiple:[1540]},[[1,"mouseup","onMouseUp"],[0,"keydown","handleKeydown"]]]);function w(){if(typeof customElements==="undefined"){return}const o=["wcs-select-option","wcs-checkbox"];o.forEach((o=>{switch(o){case"wcs-select-option":if(!customElements.get(o)){customElements.define(o,p)}break;case"wcs-checkbox":if(!customElements.get(o)){l()}break}}))}export{p as S,w as d};
+//# sourceMappingURL=p-2751ddc1.js.map

package/bundle/p-2751ddc1.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectOptionCss","WcsSelectOptionStyle0","SelectOption","proxyCustomElement","H","componentWillLoad","this","selectOptionId","generateUniqueId","el","tagName","value","undefined","innerText","chooseOption","event","disabled","stopPropagation","displayText","wcsSelectOptionClick","emit","source","onMouseUp","handleKeydown","isEnterKey","isSpaceKey","preventDefault","render","h","Host","key","id","selected","highlighted","slot","role","tabindex","multiple","checked"],"sources":["src/components/select-option/select-option.scss?tag=wcs-select-option","src/components/select-option/select-option.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\nwcs-select-option {\n    --wcs-select-option-height: var(--wcs-semantic-size-m);\n    --wcs-select-option-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-select-option-padding-vertical: 0;\n\n    --wcs-select-option-text-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-select-option-text-font-size: var(--wcs-semantic-font-size-base);\n\n    --wcs-select-option-text-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-select-option-text-color-focus: var(--wcs-semantic-color-text-primary);\n    --wcs-select-option-text-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-select-option-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-select-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-select-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-select-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-select-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-select-option-background-color-selected: var(--wcs-semantic-color-background-action-secondary-selected-default);\n    --wcs-select-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-secondary-selected-hover);\n    --wcs-select-option-background-color-selected-press: var(--wcs-semantic-color-background-action-secondary-selected-press);\n    --wcs-select-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-secondary-selected-disabled);\n    --wcs-select-option-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n\n    --wcs-select-option-border-style-focus: var(--wcs-semantic-border-style-focus-base); // because it's not a form control, but a focusable element\n    --wcs-select-option-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-select-option-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-select-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-select-option-checkbox-color: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-select-option-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-select-option-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    &:focus-visible {\n        outline: var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);\n        outline-offset: calc(-1 * var(--wcs-select-option-border-width-focus));\n    }\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-select-option-gap);\n\n    padding: var(--wcs-select-option-padding-vertical) var(--wcs-select-option-padding-horizontal);\n    height: var(--wcs-select-option-height);\n\n    cursor: pointer;\n    user-select: none;\n    font-weight: var(--wcs-select-option-text-font-weight);\n    font-size: var(--wcs-select-option-text-font-size);\n\n    color: var(--wcs-select-option-text-color-default);\n    background-color: var(--wcs-select-option-background-color-default);\n\n    transition-duration: var(--wcs-select-option-transition-duration);\n    transition-property: background-color, color;\n    transition-timing-function: ease;\n\n    border-radius: var(--wcs-select-option-border-radius);\n\n    overflow: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        color: var(--wcs-select-option-text-color-focus);\n        background-color: var(--wcs-select-option-background-color-focus);\n    }\n\n    &:hover {\n        color: var(--wcs-select-option-text-color-hover);\n        background-color: var(--wcs-select-option-background-color-hover);\n    }\n\n    &:active {\n        background-color: var(--wcs-select-option-background-color-press);\n    }\n}\n\nwcs-select-option[disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n    color: var(--wcs-select-option-text-color-disabled);\n}\n\nwcs-select-option[hidden] {\n    display: none;\n}\n\nwcs-select-option[selected] {\n    color: var(--wcs-select-option-text-color-selected);\n    background-color: var(--wcs-select-option-background-color-selected);\n\n    &:hover {\n        background-color: var(--wcs-select-option-background-color-selected-hover);\n    }\n\n    &:active {\n        background-color: var(--wcs-select-option-background-color-selected-press);\n    }\n}\n\nwcs-select-option[selected][disabled] {\n    color: var(--wcs-select-option-text-color-disabled);\n    background-color: var(--wcs-select-option-background-color-selected-disabled);\n}\n\nwcs-select-option[multiple] {\n    wcs-checkbox {\n        pointer-events: none;\n    }\n    &:hover {\n        wcs-checkbox {\n            --wcs-checkbox-border-color: var(--wcs-select-option-checkbox-color);\n        }\n    }\n}\n\nwcs-select-option[highlighted] {\n    outline: var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);\n    outline-offset: calc(-1 * var(--wcs-select-option-border-width-focus));\n\n    wcs-checkbox {\n        --wcs-checkbox-border-color: var(--wcs-select-option-checkbox-color);\n    }\n}\n","import { Component, Element, Event, Prop, EventEmitter, ComponentInterface, h, Host, Listen } from '@stencil/core';\nimport { SelectOptionChosedEvent } from './select-option-interface';\nimport {isEnterKey, generateUniqueId, isSpaceKey} from \"../../utils/helpers\";\n\n/**\n * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.\n * \n * @cssprop --wcs-select-option-background-color-default - Default background color of the option\n * @cssprop --wcs-select-option-background-color-hover - Background color of the option when hovered\n * @cssprop --wcs-select-option-background-color-press - Background color of the option when pressed\n * @cssprop --wcs-select-option-background-color-selected - Background color of the option when selected\n * @cssprop --wcs-select-option-background-color-selected-hover - Background color of the option when selected and hovered\n * @cssprop --wcs-select-option-background-color-selected-press - Background color of the option when selected and pressed\n * @cssprop --wcs-select-option-background-color-selected-disabled - Background color of the option when selected and disabled\n * @cssprop --wcs-select-option-background-color-focus - Background color of the option when focused\n * \n * @cssprop --wcs-select-option-border-color-focus - Border color for autocomplete mode\n * @cssprop --wcs-select-option-border-width-focus - Border width for autocomplete mode\n * @cssprop --wcs-select-option-border-style-focus - Border style of the option when focused\n * \n * @cssprop --wcs-select-option-height - Height of the option\n * @cssprop --wcs-select-option-padding-horizontal - Horizontal padding of the option\n * @cssprop --wcs-select-option-padding-vertical - Vertical padding of the option\n * \n * @cssprop --wcs-select-option-text-font-size - Font size of the option text\n * @cssprop --wcs-select-option-text-font-weight - Font weight of the option text\n * @cssprop --wcs-select-option-text-color-default - Default color of the option text\n * @cssprop --wcs-select-option-text-color-focus - Color of the option text when focused\n * @cssprop --wcs-select-option-text-color-hover - Color of the option text when hovered\n * @cssprop --wcs-select-option-text-color-selected - Color of the option text when selected\n * @cssprop --wcs-select-option-text-color-disabled - Color of the option text when disabled\n * \n * @cssprop --wcs-select-option-checkbox-color - Color of the checkbox\n * \n * @cssprop --wcs-select-option-gap - Gap between the checkbox and the text\n * @cssprop --wcs-select-option-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-select-option',\n    styleUrl: 'select-option.scss'\n})\nexport class SelectOption implements ComponentInterface {\n    @Element() private el!: HTMLWcsSelectOptionElement;\n    private selectOptionId: string;\n\n    /** Whether this option can be selected. */\n    @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n    /** Whether this option is selected. */\n    @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n    \n    /** This property mustn't be set by hand, it is used by the `wcs-select` component.\n     * Applies a highlight design on the option for autocomplete mode.\n     * @internal\n     * @ignore\n    */\n    @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\n\n    /** The option value, not what's displayed, use inner text instead. */\n    @Prop() value?: any;\n\n    /** Chip's displayed text color. */\n    @Prop() chipColor?: string;\n\n    /** Chip's background color. */\n    @Prop() chipBackgroundColor?: string;\n\n    /**\n     * This property mustn't be set by hand, it is used by the `wcs-select` component.\n     * If you want a multiple select, set `multiple` attribute on the parent select instead.\n     * @internal\n     * @ignore\n     */\n    @Prop({ reflect: true, mutable: true }) multiple: boolean = false;\n\n    @Event({\n        eventName: 'wcsSelectOptionClick',\n    })\n    // TODO: find a better name ?\n    wcsSelectOptionClick: EventEmitter<SelectOptionChosedEvent>;\n\n    componentWillLoad() {\n        this.selectOptionId = generateUniqueId(this.el.tagName);\n\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    private chooseOption(event: UIEvent) {\n        if (!this.disabled) {\n            event.stopPropagation();\n            // We select inner HTML as it's what's passed into the slot.\n            const displayText = this.el.innerText;\n            this.wcsSelectOptionClick.emit({\n                source: this.el,\n                value: this.value,\n                displayText\n            });\n        }\n    }\n\n    @Listen('mouseup')\n    onMouseUp(event: MouseEvent) {\n        this.chooseOption(event);\n    }\n\n    /**\n     * Handles the keydown event to update the selection.\n     * @param event keyboard event\n     */\n    @Listen('keydown')\n    handleKeydown(event: KeyboardEvent) {\n        if(isEnterKey(event) || isSpaceKey(event)) {\n            this.chooseOption(event);\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <Host id={this.selectOptionId} aria-selected={this.selected || this.highlighted ? 'true' : 'false'} slot=\"options\" role=\"option\" tabindex=\"-1\">\n                {this.multiple &&\n                    <wcs-checkbox tabindex=\"-1\" checked={this.selected} disabled={this.disabled}></wcs-checkbox>\n                }\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"mappings":"sJAAA,MAAMA,EAAkB,mmJACxB,MAAAC,EAAeD,E,MCwCFE,EAAYC,EAAA,MAAAD,UAAAE,E,qHAKuC,M,cAGA,M,iBAOG,M,+FAiBH,K,CAQ5D,iBAAAC,GACIC,KAAKC,eAAiBC,EAAiBF,KAAKG,GAAGC,SAE/C,GAAIJ,KAAKK,QAAUC,UAAW,CAE1BN,KAAKK,MAAQL,KAAKG,GAAGI,WAAa,E,EAIlC,YAAAC,CAAaC,GACjB,IAAKT,KAAKU,SAAU,CAChBD,EAAME,kBAEN,MAAMC,EAAcZ,KAAKG,GAAGI,UAC5BP,KAAKa,qBAAqBC,KAAK,CAC3BC,OAAQf,KAAKG,GACbE,MAAOL,KAAKK,MACZO,e,EAMZ,SAAAI,CAAUP,GACNT,KAAKQ,aAAaC,E,CAQtB,aAAAQ,CAAcR,GACV,GAAGS,EAAWT,IAAUU,EAAWV,GAAQ,CACvCT,KAAKQ,aAAaC,GAClBA,EAAMW,iBACNX,EAAME,iB,EAId,MAAAU,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,GAAIzB,KAAKC,eAAc,gBAAiBD,KAAK0B,UAAY1B,KAAK2B,YAAc,OAAS,QAASC,KAAK,UAAUC,KAAK,SAASC,SAAS,MACrI9B,KAAK+B,UACFT,EAAA,gBAAAE,IAAA,2CAAcM,SAAS,KAAKE,QAAShC,KAAK0B,SAAUhB,SAAUV,KAAKU,WAEvEY,EAAA,QAAAE,IAAA,6C"}

package/bundle/p-2bef72c7.js

@@ -0,0 +1,2 @@
+const e="wcs";const t={allRenderFn:true,appendChildSlotFix:false,asyncLoading:true,asyncQueue:false,attachStyles:true,cloneNodeFix:false,cmpDidLoad:true,cmpDidRender:true,cmpDidUnload:false,cmpDidUpdate:false,cmpShouldUpdate:false,cmpWillLoad:true,cmpWillRender:true,cmpWillUpdate:true,connectedCallback:true,constructableCSS:true,cssAnnotations:true,devTools:false,disconnectedCallback:true,element:false,event:true,experimentalScopedSlotChanges:false,experimentalSlotFixes:false,formAssociated:false,hasRenderFn:true,hostListener:true,hostListenerTarget:true,hostListenerTargetBody:false,hostListenerTargetDocument:true,hostListenerTargetParent:false,hostListenerTargetWindow:true,hotModuleReplacement:false,hydrateClientSide:false,hydrateServerSide:false,hydratedAttribute:false,hydratedClass:true,invisiblePrehydration:true,isDebug:false,isDev:false,isTesting:false,lazyLoad:false,lifecycle:true,lifecycleDOMEvents:false,member:true,method:true,mode:false,observeAttribute:true,profile:false,prop:true,propBoolean:true,propMutable:true,propNumber:true,propString:true,reflect:true,scoped:false,scopedSlotTextContentFix:false,scriptDataOpts:false,shadowDelegatesFocus:true,shadowDom:true,slot:true,slotChildNodesFix:false,slotRelocation:true,state:true,style:true,svg:true,taskQueue:true,updatable:true,vdomAttribute:true,vdomClass:true,vdomFunctional:true,vdomKey:true,vdomListener:true,vdomPropOrAttr:true,vdomRef:true,vdomRender:true,vdomStyle:true,vdomText:true,vdomXlink:true,watchCallback:true};var r=Object.defineProperty;var l=(e,t)=>{for(var l in t)r(e,l,{get:t[l],enumerable:true})};var n=e=>{const t=new URL(e,Xe.t);return t.origin!==He.location.origin?t.href:t.pathname};var s=e=>Xe.t=e;var a={};var i="http://www.w3.org/2000/svg";var o="http://www.w3.org/1999/xhtml";var f=e=>e!=null;var u=e=>{e=typeof e;return e==="object"||e==="function"};function c(e){var t,r,l;return(l=(r=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:r.getAttribute("content"))!=null?l:void 0}var v={};l(v,{err:()=>p,map:()=>h,ok:()=>d,unwrap:()=>m,unwrapErr:()=>y});var d=e=>({isOk:true,isErr:false,value:e});var p=e=>({isOk:false,isErr:true,value:e});function h(e,t){if(e.isOk){const r=t(e.value);if(r instanceof Promise){return r.then((e=>d(e)))}else{return d(r)}}if(e.isErr){const t=e.value;return p(t)}throw"should never get here"}var m=e=>{if(e.isOk){return e.value}else{throw e.value}};var y=e=>{if(e.isErr){return e.value}else{throw e.value}};var b=(e,t="")=>{{return()=>{}}};var w="slot-fb{display:contents}slot-fb[hidden]{display:none}";var g="http://www.w3.org/1999/xlink";var S=(e,t,...r)=>{let l=null;let n=null;let s=null;let a=false;let i=false;const o=[];const f=t=>{for(let r=0;r<t.length;r++){l=t[r];if(Array.isArray(l)){f(l)}else if(l!=null&&typeof l!=="boolean"){if(a=typeof e!=="function"&&!u(l)){l=String(l)}if(a&&i){o[o.length-1].l+=l}else{o.push(a?$(null,l):l)}i=a}}};f(r);if(t){if(t.key){n=t.key}if(t.name){s=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,o,C)}const c=$(e,null);c.i=t;if(o.length>0){c.o=o}{c.u=n}{c.v=s}return c};var $=(e,t)=>{const r={p:0,h:e,l:t,m:null,o:null};{r.i=null}{r.u=null}{r.v=null}return r};var k={};var O=e=>e&&e.h===k;var C={forEach:(e,t)=>e.map(j).forEach(t),map:(e,t)=>e.map(j).map(t).map(x)};var j=e=>({vattrs:e.i,vchildren:e.o,vkey:e.u,vname:e.v,vtag:e.h,vtext:e.l});var x=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return S(e.vtag,t,...e.vchildren||[])}const t=$(e.vtag,e.vtext);t.i=e.vattrs;t.o=e.vchildren;t.u=e.vkey;t.v=e.vname;return t};var R=(e,t)=>{if(e!=null&&!u(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return parseFloat(e)}if(t&1){return String(e)}return e}return e};var L=e=>e;var D=(e,t,r)=>{const l=L(e);return{emit:e=>F(l,t,{bubbles:!!(r&4),composed:!!(r&2),cancelable:!!(r&1),detail:e})}};var F=(e,t,r)=>{const l=Xe.ce(t,r);e.dispatchEvent(l);return l};var T=new WeakMap;var A=(e,t,r)=>{let l=ze.get(e);if(Je&&r){l=l||new CSSStyleSheet;if(typeof l==="string"){l=t}else{l.replaceSync(t)}}else{l=t}ze.set(e,l)};var E=(e,t,r)=>{var l;const n=P(t);const s=ze.get(n);e=e.nodeType===11?e:Ke;if(s){if(typeof s==="string"){e=e.head||e;let r=T.get(e);let a;if(!r){T.set(e,r=new Set)}if(!r.has(n)){{a=Ke.createElement("style");a.innerHTML=s;const t=(l=Xe.S)!=null?l:c(Ke);if(t!=null){a.setAttribute("nonce",t)}e.insertBefore(a,e.querySelector("link"))}if(t.p&4){a.innerHTML+=w}if(r){r.add(n)}}}else if(!e.adoptedStyleSheets.includes(s)){e.adoptedStyleSheets=[...e.adoptedStyleSheets,s]}}return n};var M=e=>{const t=e.$;const r=e.$hostElement$;const l=t.p;const n=b("attachStyles",t.k);const s=E(r.shadowRoot?r.shadowRoot:r.getRootNode(),t);if(l&10){r["s-sc"]=s;r.classList.add(s+"-h")}n()};var P=(e,t)=>"sc-"+e.k;var U=(e,t,r,l,n,s)=>{if(r!==l){let a=Qe(e,t);let i=t.toLowerCase();if(t==="class"){const t=e.classList;const n=N(r);const s=N(l);t.remove(...n.filter((e=>e&&!s.includes(e))));t.add(...s.filter((e=>e&&!n.includes(e))))}else if(t==="style"){{for(const t in r){if(!l||l[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in l){if(!r||l[t]!==r[t]){if(t.includes("-")){e.style.setProperty(t,l[t])}else{e.style[t]=l[t]}}}}else if(t==="key");else if(t==="ref"){if(l){l(e)}}else if(!e.__lookupSetter__(t)&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(Qe(He,i)){t=i.slice(2)}else{t=i[2]+t.slice(3)}if(r||l){const n=t.endsWith(_);t=t.replace(B,"");if(r){Xe.rel(e,t,r,n)}if(l){Xe.ael(e,t,l,n)}}}else{const o=u(l);if((a||o&&l!==null)&&!n){try{if(!e.tagName.includes("-")){const n=l==null?"":l;if(t==="list"){a=false}else if(r==null||e[t]!=n){e[t]=n}}else{e[t]=l}}catch(e){}}let f=false;{if(i!==(i=i.replace(/^xlink\:?/,""))){t=i;f=true}}if(l==null||l===false){if(l!==false||e.getAttribute(t)===""){if(f){e.removeAttributeNS(g,t)}else{e.removeAttribute(t)}}}else if((!a||s&4||n)&&!o){l=l===true?"":l;if(f){e.setAttributeNS(g,t,l)}else{e.setAttribute(t,l)}}}}};var W=/\s/;var N=e=>!e?[]:e.split(W);var _="Capture";var B=new RegExp(_+"$");var Q=(e,t,r)=>{const l=t.m.nodeType===11&&t.m.host?t.m.host:t.m;const n=e&&e.i||a;const s=t.i||a;{for(const e of q(Object.keys(n))){if(!(e in s)){U(l,e,n[e],void 0,r,t.p)}}}for(const e of q(Object.keys(s))){U(l,e,n[e],s[e],r,t.p)}};function q(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var z;var H;var K;var V=false;var X=false;var G=false;var I=false;var J=(e,t,r,l)=>{var n;const s=t.o[r];let a=0;let u;let c;let v;if(!V){G=true;if(s.h==="slot"){if(z){l.classList.add(z+"-s")}s.p|=s.o?2:1}}if(s.l!==null){u=s.m=Ke.createTextNode(s.l)}else if(s.p&1){u=s.m=Ke.createTextNode("")}else{if(!I){I=s.h==="svg"}u=s.m=Ke.createElementNS(I?i:o,s.p&2?"slot-fb":s.h);if(I&&s.h==="foreignObject"){I=false}{Q(null,s,I)}if(f(z)&&u["s-si"]!==z){u.classList.add(u["s-si"]=z)}if(s.o){for(a=0;a<s.o.length;++a){c=J(e,s,a,u);if(c){u.appendChild(c)}}}{if(s.h==="svg"){I=false}else if(u.tagName==="foreignObject"){I=true}}}u["s-hn"]=K;{if(s.p&(2|1)){u["s-sr"]=true;u["s-cr"]=H;u["s-sn"]=s.v||"";u["s-rf"]=(n=s.i)==null?void 0:n.ref;v=e&&e.o&&e.o[r];if(v&&v.h===s.h&&e.m){{Y(e.m,false)}}}}return u};var Y=(e,r)=>{Xe.p|=1;const l=Array.from(e.childNodes);if(e["s-sr"]&&t.experimentalSlotFixes){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===K){l.push(t)}}}for(let e=l.length-1;e>=0;e--){const t=l[e];if(t["s-hn"]!==K&&t["s-ol"]){ne(t).insertBefore(t,le(t));t["s-ol"].remove();t["s-ol"]=void 0;t["s-sh"]=void 0;G=true}if(r){Y(t,r)}}Xe.p&=~1};var Z=(e,t,r,l,n,s)=>{let a=e["s-cr"]&&e["s-cr"].parentNode||e;let i;if(a.shadowRoot&&a.tagName===K){a=a.shadowRoot}for(;n<=s;++n){if(l[n]){i=J(null,r,n,e);if(i){l[n].m=i;a.insertBefore(i,le(t))}}}};var ee=(e,t,r)=>{for(let l=t;l<=r;++l){const t=e[l];if(t){const e=t.m;ue(t);if(e){{X=true;if(e["s-ol"]){e["s-ol"].remove()}else{Y(e,true)}}e.remove()}}}};var te=(e,t,r,l,n=false)=>{let s=0;let a=0;let i=0;let o=0;let f=t.length-1;let u=t[0];let c=t[f];let v=l.length-1;let d=l[0];let p=l[v];let h;let m;while(s<=f&&a<=v){if(u==null){u=t[++s]}else if(c==null){c=t[--f]}else if(d==null){d=l[++a]}else if(p==null){p=l[--v]}else if(re(u,d,n)){se(u,d,n);u=t[++s];d=l[++a]}else if(re(c,p,n)){se(c,p,n);c=t[--f];p=l[--v]}else if(re(u,p,n)){if(u.h==="slot"||p.h==="slot"){Y(u.m.parentNode,false)}se(u,p,n);e.insertBefore(u.m,c.m.nextSibling);u=t[++s];p=l[--v]}else if(re(c,d,n)){if(u.h==="slot"||p.h==="slot"){Y(c.m.parentNode,false)}se(c,d,n);e.insertBefore(c.m,u.m);c=t[--f];d=l[++a]}else{i=-1;{for(o=s;o<=f;++o){if(t[o]&&t[o].u!==null&&t[o].u===d.u){i=o;break}}}if(i>=0){m=t[i];if(m.h!==d.h){h=J(t&&t[a],r,i,e)}else{se(m,d,n);t[i]=void 0;h=m.m}d=l[++a]}else{h=J(t&&t[a],r,a,e);d=l[++a]}if(h){{ne(u.m).insertBefore(h,le(u.m))}}}}if(s>f){Z(e,l[v+1]==null?null:l[v+1].m,r,l,a,v)}else if(a>v){ee(t,s,f)}};var re=(e,t,r=false)=>{if(e.h===t.h){if(e.h==="slot"){return e.v===t.v}if(!r){return e.u===t.u}return true}return false};var le=e=>e&&e["s-ol"]||e;var ne=e=>(e["s-ol"]?e["s-ol"]:e).parentNode;var se=(e,t,r=false)=>{const l=t.m=e.m;const n=e.o;const s=t.o;const a=t.h;const i=t.l;let o;if(i===null){{I=a==="svg"?true:a==="foreignObject"?false:I}{if(a==="slot"&&!V);else{Q(e,t,I)}}if(n!==null&&s!==null){te(l,n,t,s,r)}else if(s!==null){if(e.l!==null){l.textContent=""}Z(l,null,t,s,0,s.length-1)}else if(n!==null){ee(n,0,n.length-1)}if(I&&a==="svg"){I=false}}else if(o=l["s-cr"]){o.parentNode.textContent=i}else if(e.l!==i){l.data=i}};var ae=e=>{const t=e.childNodes;for(const e of t){if(e.nodeType===1){if(e["s-sr"]){const r=e["s-sn"];e.hidden=false;for(const l of t){if(l!==e){if(l["s-hn"]!==e["s-hn"]||r!==""){if(l.nodeType===1&&(r===l.getAttribute("slot")||r===l["s-sn"])||l.nodeType===3&&r===l["s-sn"]){e.hidden=true;break}}else{if(l.nodeType===1||l.nodeType===3&&l.textContent.trim()!==""){e.hidden=true;break}}}}}ae(e)}}};var ie=[];var oe=e=>{let r;let l;let n;for(const s of e.childNodes){if(s["s-sr"]&&(r=s["s-cr"])&&r.parentNode){l=r.parentNode.childNodes;const e=s["s-sn"];for(n=l.length-1;n>=0;n--){r=l[n];if(!r["s-cn"]&&!r["s-nr"]&&r["s-hn"]!==s["s-hn"]&&!t.experimentalSlotFixes){if(fe(r,e)){let t=ie.find((e=>e.O===r));X=true;r["s-sn"]=r["s-sn"]||e;if(t){t.O["s-sh"]=s["s-hn"];t.C=s}else{r["s-sh"]=s["s-hn"];ie.push({C:s,O:r})}if(r["s-sr"]){ie.map((e=>{if(fe(e.O,r["s-sn"])){t=ie.find((e=>e.O===r));if(t&&!e.C){e.C=t.C}}}))}}else if(!ie.some((e=>e.O===r))){ie.push({O:r})}}}}if(s.nodeType===1){oe(s)}}};var fe=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var ue=e=>{{e.i&&e.i.ref&&e.i.ref(null);e.o&&e.o.map(ue)}};var ce=(e,t,r=false)=>{var l,n,s,a;const i=e.$hostElement$;const o=e.$;const f=e.j||$(null,null);const u=O(t)?t:S(null,null,t);K=i.tagName;if(o.R){u.i=u.i||{};o.R.map((([e,t])=>u.i[t]=i[e]))}if(r&&u.i){for(const e of Object.keys(u.i)){if(i.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){u.i[e]=i[e]}}}u.h=null;u.p|=4;e.j=u;u.m=f.m=i.shadowRoot||i;{z=i["s-sc"]}V=(o.p&1)!==0;{H=i["s-cr"];X=false}se(f,u,r);{Xe.p|=1;if(G){oe(u.m);for(const e of ie){const t=e.O;if(!t["s-ol"]){const e=Ke.createTextNode("");e["s-nr"]=t;t.parentNode.insertBefore(t["s-ol"]=e,t)}}for(const e of ie){const t=e.O;const i=e.C;if(i){const e=i.parentNode;let r=i.nextSibling;{let s=(l=t["s-ol"])==null?void 0:l.previousSibling;while(s){let l=(n=s["s-nr"])!=null?n:null;if(l&&l["s-sn"]===t["s-sn"]&&e===l.parentNode){l=l.nextSibling;while(l===t||(l==null?void 0:l["s-sr"])){l=l==null?void 0:l.nextSibling}if(!l||!l["s-nr"]){r=l;break}}s=s.previousSibling}}if(!r&&e!==t.parentNode||t.nextSibling!==r){if(t!==r){if(!t["s-hn"]&&t["s-ol"]){t["s-hn"]=t["s-ol"].parentNode.nodeName}e.insertBefore(t,r);if(t.nodeType===1){t.hidden=(s=t["s-ih"])!=null?s:false}}}t&&typeof i["s-rf"]==="function"&&i["s-rf"](t)}else{if(t.nodeType===1){if(r){t["s-ih"]=(a=t.hidden)!=null?a:false}t.hidden=true}}}}if(X){ae(u.m)}Xe.p&=~1;ie.length=0}H=void 0};var ve=(e,t)=>{if(t&&!e.L&&t["s-p"]){t["s-p"].push(new Promise((t=>e.L=t)))}};var de=(e,t)=>{{e.p|=16}if(e.p&4){e.p|=512;return}ve(e,e.D);const r=()=>pe(e,t);return at(r)};var pe=(e,t)=>{const r=e.$hostElement$;const l=b("scheduleUpdate",e.$.k);const n=r;let s;if(t){{s=$e(n,"componentWillLoad")}}else{{s=$e(n,"componentWillUpdate")}}{s=he(s,(()=>$e(n,"componentWillRender")))}l();return he(s,(()=>ye(e,n,t)))};var he=(e,t)=>me(e)?e.then(t):t();var me=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var ye=async(e,t,r)=>{var l;const n=e.$hostElement$;const s=b("update",e.$.k);const a=n["s-rc"];if(r){M(e)}const i=b("render",e.$.k);{be(e,t,n,r)}if(a){a.map((e=>e()));n["s-rc"]=void 0}i();s();{const t=(l=n["s-p"])!=null?l:[];const r=()=>we(e);if(t.length===0){r()}else{Promise.all(t).then(r);e.p|=4;t.length=0}}};var be=(e,t,r,l)=>{try{t=t.render();{e.p&=~16}{e.p|=2}{{{ce(e,t,l)}}}}catch(t){qe(t,e.$hostElement$)}return null};var we=e=>{const t=e.$.k;const r=e.$hostElement$;const l=b("postUpdate",t);const n=r;const s=e.D;{$e(n,"componentDidRender")}if(!(e.p&64)){e.p|=64;{ke(r)}{$e(n,"componentDidLoad")}l();{e.F(r);if(!s){Se()}}}else{l()}{if(e.L){e.L();e.L=void 0}if(e.p&512){nt((()=>de(e,false)))}e.p&=~(4|512)}};var ge=e=>{{const t=_e(e);const r=t.$hostElement$.isConnected;if(r&&(t.p&(2|16))===2){de(t,false)}return r}};var Se=t=>{{ke(Ke.documentElement)}nt((()=>F(He,"appload",{detail:{namespace:e}})))};var $e=(e,t,r)=>{if(e&&e[t]){try{return e[t](r)}catch(e){qe(e)}}return void 0};var ke=e=>e.classList.add("hydrated");var Oe=(e,t)=>_e(e).T.get(t);var Ce=(e,t,r,l)=>{const n=_e(e);const s=e;const a=n.T.get(t);const i=n.p;const o=s;r=R(r,l.A[t][0]);const f=Number.isNaN(a)&&Number.isNaN(r);const u=r!==a&&!f;if(u){n.T.set(t,r);{if(l.M&&i&128){const e=l.M[t];if(e){e.map((e=>{try{o[e](r,a,t)}catch(e){qe(e,s)}}))}}if((i&(2|16))===2){de(n,false)}}}};var je=(e,t,r)=>{var l;const n=e.prototype;if(t.A){if(e.watchers){t.M=e.watchers}const r=Object.entries(t.A);r.map((([e,[r]])=>{if(r&31||r&32){Object.defineProperty(n,e,{get(){return Oe(this,e)},set(r){Ce(this,e,r,t)},configurable:true,enumerable:true})}}));{const s=new Map;n.attributeChangedCallback=function(e,r,l){Xe.jmp((()=>{var a;const i=s.get(e);if(this.hasOwnProperty(i)){l=this[i];delete this[i]}else if(n.hasOwnProperty(i)&&typeof this[i]==="number"&&this[i]==l){return}else if(i==null){const n=_e(this);const s=n==null?void 0:n.p;if(s&&!(s&8)&&s&128&&l!==r){const n=this;const s=n;const i=(a=t.M)==null?void 0:a[e];i==null?void 0:i.forEach((t=>{if(s[t]!=null){s[t].call(s,l,r,e)}}))}return}this[i]=l===null&&typeof this[i]==="boolean"?false:l}))};e.observedAttributes=Array.from(new Set([...Object.keys((l=t.M)!=null?l:{}),...r.filter((([e,t])=>t[0]&15)).map((([e,r])=>{var l;const n=r[1]||e;s.set(n,e);if(r[0]&512){(l=t.R)==null?void 0:l.push([e,n])}return n}))]))}}return e};var xe=async(e,t,r,l)=>{let n;if((t.p&32)===0){t.p|=32;{n=e.constructor;customElements.whenDefined(r.k).then((()=>t.p|=128))}if(n.style){let e=n.style;const t=P(r);if(!ze.has(t)){const l=b("registerStyles",r.k);A(t,e,!!(r.p&1));l()}}}const s=t.D;const a=()=>de(t,true);if(s&&s["s-rc"]){s["s-rc"].push(a)}else{a()}};var Re=e=>{};var Le=e=>{if((Xe.p&1)===0){const t=_e(e);const r=t.$;const l=b("connectedCallback",r.k);if(!(t.p&1)){t.p|=1;{if(r.p&(4|8)){De(e)}}{let r=e;while(r=r.parentNode||r.host){if(r["s-p"]){ve(t,t.D=r);break}}}if(r.A){Object.entries(r.A).map((([t,[r]])=>{if(r&31&&e.hasOwnProperty(t)){const r=e[t];delete e[t];e[t]=r}}))}{xe(e,t,r)}}else{Ae(e,t,r.P);if(t==null?void 0:t.U);else if(t==null?void 0:t.W){t.W.then((()=>Re()))}}l()}};var De=e=>{const t=e["s-cr"]=Ke.createComment("");t["s-cn"]=true;e.insertBefore(t,e.firstChild)};var Fe=async e=>{if((Xe.p&1)===0){const t=_e(e);{if(t.N){t.N.map((e=>e()));t.N=void 0}}}};var Te=(e,t)=>{const r={p:t[0],k:t[1]};{r.A=t[2]}{r.P=t[3]}{r.M=e.M}{r.R=[]}const l=e.prototype.connectedCallback;const n=e.prototype.disconnectedCallback;Object.assign(e.prototype,{__registerHost(){Be(this,r)},connectedCallback(){Le(this);if(l){l.call(this)}},disconnectedCallback(){Fe(this);if(n){n.call(this)}},__attachShadow(){{{this.attachShadow({mode:"open",delegatesFocus:!!(r.p&16)})}}}});e.is=r.k;return je(e,r)};var Ae=(e,t,r,l)=>{if(r){r.map((([r,l,n])=>{const s=Me(e,r);const a=Ee(t,n);const i=Pe(r);Xe.ael(s,l,a,i);(t.N=t.N||[]).push((()=>Xe.rel(s,l,a,i)))}))}};var Ee=(e,t)=>r=>{try{{e.$hostElement$[t](r)}}catch(e){qe(e)}};var Me=(e,t)=>{if(t&4)return Ke;if(t&8)return He;return e};var Pe=e=>Ge?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var Ue=e=>Xe.S=e;var We=e=>Object.assign(Xe,e);var Ne=new WeakMap;var _e=e=>Ne.get(e);var Be=(e,t)=>{const r={p:0,$hostElement$:e,$:t,T:new Map};{r.W=new Promise((e=>r.F=e));e["s-p"]=[];e["s-rc"]=[]}Ae(e,r,t.P);return Ne.set(e,r)};var Qe=(e,t)=>t in e;var qe=(e,t)=>(0,console.error)(e,t);var ze=new Map;var He=typeof window!=="undefined"?window:{};var Ke=He.document||{head:{}};var Ve=He.HTMLElement||class{};var Xe={p:0,t:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,r,l)=>e.addEventListener(t,r,l),rel:(e,t,r,l)=>e.removeEventListener(t,r,l),ce:(e,t)=>new CustomEvent(e,t)};var Ge=(()=>{let e=false;try{Ke.addEventListener("e",null,Object.defineProperty({},"passive",{get(){e=true}}))}catch(e){}return e})();var Ie=e=>Promise.resolve(e);var Je=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var Ye=false;var Ze=[];var et=[];var tt=(e,t)=>r=>{e.push(r);if(!Ye){Ye=true;if(t&&Xe.p&4){nt(lt)}else{Xe.raf(lt)}}};var rt=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){qe(e)}}e.length=0};var lt=()=>{rt(Ze);{rt(et);if(Ye=Ze.length>0){Xe.raf(lt)}}};var nt=e=>Ie().then(e);var st=tt(Ze,false);var at=tt(et,true);export{Ve as H,Ue as a,We as b,k as c,D as d,ge as f,n as g,S as h,Te as p,st as r,s};
+//# sourceMappingURL=p-2bef72c7.js.map