npm - wcs-core - Versions diffs - 7.5.0 → 7.5.1 - Mend

wcs-core 7.5.0 → 7.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/bundle/p-581fc0fc.js +2 -0
package/bundle/p-581fc0fc.js.map +1 -0
package/bundle/wcs-editable-field.js +1 -1
package/bundle/wcs-label.js +1 -1
package/composite-elements/p-79ad61e4.js +2 -0
package/composite-elements/p-79ad61e4.js.map +1 -0
package/composite-elements/wcs-editable-field.js +1 -1
package/composite-elements/wcs-label.js +1 -1
package/dist/cjs/wcs-error_3.cjs.entry.js +1 -1
package/dist/cjs/wcs-error_3.cjs.entry.js.map +1 -1
package/dist/collection/components/label/label.css +0 -1
package/dist/collection/components/label/label.e2e.playwright.js +42 -0
package/dist/collection/components/label/label.e2e.playwright.js.map +1 -0
package/dist/collection/utils/playwright/test.js +6 -0
package/dist/collection/utils/playwright/test.js.map +1 -1
package/dist/esm/wcs-error_3.entry.js +1 -1
package/dist/esm/wcs-error_3.entry.js.map +1 -1
package/dist/types/components/label/label.e2e.playwright.d.ts +1 -0
package/dist/wcs/{p-9b76b8e6.entry.js → p-22620c69.entry.js} +2 -2
package/dist/wcs/{p-9b76b8e6.entry.js.map → p-22620c69.entry.js.map} +1 -1
package/dist/wcs/wcs.esm.js +1 -1
package/package.json +1 -1
package/bundle/p-fc9ba34d.js +0 -2
package/bundle/p-fc9ba34d.js.map +0 -1
package/composite-elements/p-0c306f8c.js +0 -2
package/composite-elements/p-0c306f8c.js.map +0 -1

package/bundle/p-581fc0fc.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as e,H as t,h as s,c}from"./p-2bef72c7.js";import{i as a,a as l,s as r}from"./p-2e9b9605.js";const i=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const o=i;const n=["title"];const b=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),l(this.el,n))}async setAriaAttribute(e,t){r(this.nativeLabel,e,t)}render(){return s(c,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},s("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),s("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return this}static get style(){return o}},[1,"wcs-label",{required:[516],setAriaAttribute:[64]}]);function f(){if(typeof customElements==="undefined"){return}const e=["wcs-label"];e.forEach((e=>{switch(e){case"wcs-label":if(!customElements.get(e)){customElements.define(e,b)}break}}))}export{b as L,f as d};
2	+ //# sourceMappingURL=p-581fc0fc.js.map

package/bundle/p-581fc0fc.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","Label","proxyCustomElement","H","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeLabel","render","h","Host","key","slot","ref"],"sources":["src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' *';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /**\n * If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAW,kjBACjB,MAAAC,EAAeD,ECGf,MAAME,EAAwB,CAAC,S,MAsBlBC,EAAKC,EAAA,MAAAD,UAAAE,E,kEAGNC,KAAAC,oBAA4C,G,cAMP,K,CAE7C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,YAAaH,EAAMC,E,CAGjD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACPH,EAAA,QAAAX,OAAAC,OAAA,CAAAY,IAAA,2CAAOE,IAAMZ,GAAON,KAAKY,YAAcN,GAAQN,KAAKC,qBAChDa,EAAA,QAAAE,IAAA,8C"}

package/bundle/wcs-editable-field.js CHANGED Viewed

@@ -1,2 +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,k as d,l as o,d as r}from"./p-2e9b9605.js";import{d as c}from"./p-60193ef5.js";import{d as n}from"./p-010cf905.js";import{d as h}from"./p-fc9ba34d.js";import{d as f}from"./p-98bd8a96.js";import{d as b}from"./p-c8b73e93.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}}))}const x=k;const E=z;export{x as WcsEditableField,E as defineCustomElement};
+import{p as e,H as i,d as t,h as s,c as a}from"./p-2bef72c7.js";import{b as l,k as d,l as o,d as r}from"./p-2e9b9605.js";import{d as c}from"./p-60193ef5.js";import{d as n}from"./p-010cf905.js";import{d as h}from"./p-581fc0fc.js";import{d as f}from"./p-98bd8a96.js";import{d as b}from"./p-c8b73e93.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}}))}const x=k;const E=z;export{x as WcsEditableField,E as defineCustomElement};
 //# sourceMappingURL=wcs-editable-field.js.map

package/bundle/wcs-label.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{L as o,d as s}from"./p-fc9ba34d.js";const t=o;const a=s;export{t as WcsLabel,a as defineCustomElement};
+import{L as o,d as s}from"./p-581fc0fc.js";const c=o;const t=s;export{c as WcsLabel,t as defineCustomElement};
 //# sourceMappingURL=wcs-label.js.map

package/composite-elements/p-79ad61e4.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as e,H as t,h as s,c}from"./p-2bef72c7.js";import{i as a,a as l,s as r}from"./p-e803bb26.js";const i=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const o=i;const n=["title"];const b=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),l(this.el,n))}async setAriaAttribute(e,t){r(this.nativeLabel,e,t)}render(){return s(c,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},s("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),s("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return this}static get style(){return o}},[1,"wcs-label",{required:[516],setAriaAttribute:[64]}]);function f(){if(typeof customElements==="undefined"){return}const e=["wcs-label"];e.forEach((e=>{switch(e){case"wcs-label":if(!customElements.get(e)){customElements.define(e,b)}break}}))}f();export{b as L,f as d};
2	+ //# sourceMappingURL=p-79ad61e4.js.map

package/composite-elements/p-79ad61e4.js.map ADDED Viewed

@@ -0,0 +1 @@

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

@@ -1,2 +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};
+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-79ad61e4.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-label.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{L as o,d as s}from"./p-0c306f8c.js";const c=o;const t=s;export{c as WcsLabel,t as defineCustomElement};
+import{L as o,d as s}from"./p-79ad61e4.js";const t=o;const a=s;export{t as WcsLabel,a as defineCustomElement};
 //# sourceMappingURL=wcs-label.js.map

package/dist/cjs/wcs-error_3.cjs.entry.js CHANGED Viewed

@@ -179,7 +179,7 @@ const FormField = class {
 };
 FormField.style = WcsFormFieldStyle0;
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
+const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
 const WcsLabelStyle0 = labelCss;
 const LABEL_INHERITED_ATTRS = ['title'];

package/dist/cjs/wcs-error_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n line-height: 0;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/collection/components/label/label.css CHANGED Viewed

@@ -16,7 +16,6 @@ label {
   display: inline-flex;
   align-items: center;
   gap: var(--wcs-label-gap);
-  line-height: 0;
   color: var(--wcs-label-color);
   font-weight: var(--wcs-label-font-weight);
 }

package/dist/collection/components/label/label.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Label component', () => {
+    test('Should wrap text correctly', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>
+        `);
+        page.setViewportSize({ width: 300, height: 300 });
+        const label = page.locator('label');
+        // Then
+        const box = await label.boundingBox();
+        expect(box.height).toBeGreaterThan(0);
+        // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px
+        expect(box.height).toBeGreaterThan(20);
+    });
+    test('Should keep same height with and without icon', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field id="form-field-with-icon">
+                <wcs-label>
+                    Enter your name
+                    <wcs-mat-icon id="icon-help" icon="help" family="filled" size="s"></wcs-mat-icon>
+                </wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+            <wcs-form-field id="form-field-without-icon">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+        `);
+        const formFieldWithIcon = page.locator('#form-field-with-icon');
+        const formFieldWithoutIcon = page.locator('#form-field-without-icon');
+        // Then
+        const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();
+        const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();
+        expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);
+    });
+});
+//# sourceMappingURL=label.e2e.playwright.js.map

package/dist/collection/components/label/label.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"label.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/label/label.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAClC,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACrE,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QAElD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO;QACP,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,WAAW,EAAE,CAAC;QACtC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACtC,+GAA+G;QAC/G,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+CAA+C,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACxF,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;;;;;;SAazB,CAAC,CAAC;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;QAChE,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAEtE,OAAO;QACP,MAAM,4BAA4B,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAC3E,MAAM,+BAA+B,GAAG,MAAM,oBAAoB,CAAC,WAAW,EAAE,CAAC;QACjF,MAAM,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,+BAA+B,CAAC,MAAM,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Label component', () => {\n test('Should wrap text correctly', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>\n `);\n page.setViewportSize({ width: 300, height: 300 });\n\n const label = page.locator('label');\n\n // Then\n const box = await label.boundingBox();\n expect(box.height).toBeGreaterThan(0);\n // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px\n expect(box.height).toBeGreaterThan(20);\n });\n\n test('Should keep same height with and without icon', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-form-field id=\"form-field-with-icon\">\n <wcs-label>\n Enter your name\n <wcs-mat-icon id=\"icon-help\" icon=\"help\" family=\"filled\" size=\"s\"></wcs-mat-icon>\n </wcs-label>\n <wcs-input placeholder=\"John Doe\"></wcs-input>\n </wcs-form-field>\n\n <wcs-form-field id=\"form-field-without-icon\">\n <wcs-label>Enter your name</wcs-label>\n <wcs-input placeholder=\"John Doe\"></wcs-input>\n </wcs-form-field>\n `);\n const formFieldWithIcon = page.locator('#form-field-with-icon');\n const formFieldWithoutIcon = page.locator('#form-field-without-icon');\n\n // Then\n const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();\n const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();\n expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);\n });\n});"]}

package/dist/collection/utils/playwright/test.js CHANGED Viewed

@@ -11,6 +11,12 @@ export async function setWcsContent(page, content) {
     await page.addStyleTag({
         url: '/design-tokens/sncf-holding.css',
     });
+    await page.addStyleTag({
+        url: '/build/wcs.css',
+    });
+    await page.addStyleTag({
+        url: '/test.css',
+    });
     await page.waitForChanges();
 }
 //# sourceMappingURL=test.js.map

package/dist/collection/utils/playwright/test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"test.js","sourceRoot":"","sources":["../../../src/utils/playwright/test.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAa,EAAE,OAAe;IAC9D,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC,CAAA;IACF,MAAM,IAAI,CAAC,WAAW,CAAC;QACnB,GAAG,EAAE,iCAAiC;KACzC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAChC,CAAC","sourcesContent":["import { E2EPage } from '@stencil/playwright';\n\n/*\n @see stencil.config.ts expose dev web server\n * @param page\n * @param content\n */\nexport async function setWcsContent(page: E2EPage, content: string) {\n await page.setContent(content);\n await page.evaluate(() => {\n document.body.classList.add('sncf-holding');\n })\n await page.addStyleTag({\n url: '/design-tokens/sncf-holding.css',\n });\n await page.waitForChanges();\n}\n"]}
1	+ {"version":3,"file":"test.js","sourceRoot":"","sources":["../../../src/utils/playwright/test.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAa,EAAE,OAAe;IAC9D,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC,CAAA;IACF,MAAM,IAAI,CAAC,WAAW,CAAC;QACnB,GAAG,EAAE,iCAAiC;KACzC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,WAAW,CAAC;QACnB,GAAG,EAAE,gBAAgB;KACxB,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,WAAW,CAAC;QACnB,GAAG,EAAE,WAAW;KACnB,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAChC,CAAC","sourcesContent":["import { E2EPage } from '@stencil/playwright';\n\n/*\n @see stencil.config.ts expose dev web server\n * @param page\n * @param content\n */\nexport async function setWcsContent(page: E2EPage, content: string) {\n await page.setContent(content);\n await page.evaluate(() => {\n document.body.classList.add('sncf-holding');\n })\n await page.addStyleTag({\n url: '/design-tokens/sncf-holding.css',\n });\n await page.addStyleTag({\n url: '/build/wcs.css',\n });\n await page.addStyleTag({\n url: '/test.css',\n });\n await page.waitForChanges();\n}\n"]}

package/dist/esm/wcs-error_3.entry.js CHANGED Viewed

@@ -175,7 +175,7 @@ const FormField = class {
 };
 FormField.style = WcsFormFieldStyle0;
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
+const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
 const WcsLabelStyle0 = labelCss;
 const LABEL_INHERITED_ATTRS = ['title'];

package/dist/esm/wcs-error_3.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-error.wcs-form-field.wcs-label.entry.js","mappings":"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","names":["Label"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n line-height: 0;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"wcs-error.wcs-form-field.wcs-label.entry.js","mappings":"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","names":["Label"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/types/components/label/label.e2e.playwright.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/wcs/{p-9b76b8e6.entry.js → p-22620c69.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as r,H as s,g as t}from"./p-32e583ea.js";import{i as o}from"./p-a0f32ead.js";import{z as i,i as c,a,s as l}from"./p-52d77e1f.js";import{i as d}from"./p-a7468a3a.js";const f=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const n=f;const u=class{constructor(r){e(this,r)}render(){return r(s,{key:"7dffcb3487f7210c5c9a45af709fc942a1410679",role:"alert",slot:"error"},r("slot",{key:"251fbdc26fe58be4296328c4ebaed77329c6c507"}))}};u.style=n;const w=":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 b=w;const v=class{constructor(r){e(this,r);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 t=e.filter((e=>e.attributeName==="required"))[0];if(t){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(d(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(i(s))}}else{if(this.label){e.push(i(this.label))}}if(this.description){e.push(i(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(i(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 t=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"d8a5d2023add393b0a31173351a3d16d9fa0b1a6",class:e},r("slot",{key:"3f347f4dce239c0106fbbe52bdc217fa37c05d01",name:"label"}),r("div",{key:"d6cb92104d72530059ecb9a383ff832afb0c2141",class:"input-container"},r("slot",{key:"8be28f721ff351d41dced80c97c0e34337703d0e",name:"prefix"}),r("slot",{key:"cc58d463877a1e8513736a987286e965870e096d",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"898709cfcf0ae1cd43dabd55547d62199d6230c9",name:"suffix"})),t?r("slot",{name:"error"}):"",r("slot",{key:"aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return t(this)}static get watchers(){return{isError:["isErrorChange"]}}};v.style=b;const h=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const p=h;const m=["title"];const x=class{constructor(r){e(this,r);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),a(this.el,m))}async setAriaAttribute(e,r){l(this.nativeLabel,e,r)}render(){return r(s,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},r("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),r("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return t(this)}};x.style=p;export{u as wcs_error,v as wcs_form_field,x as wcs_label};
-//# sourceMappingURL=p-9b76b8e6.entry.js.map
+import{r as e,h as r,H as s,g as o}from"./p-32e583ea.js";import{i as t}from"./p-a0f32ead.js";import{z as i,i as c,a,s as l}from"./p-52d77e1f.js";import{i as d}from"./p-a7468a3a.js";const f=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const n=f;const u=class{constructor(r){e(this,r)}render(){return r(s,{key:"7dffcb3487f7210c5c9a45af709fc942a1410679",role:"alert",slot:"error"},r("slot",{key:"251fbdc26fe58be4296328c4ebaed77329c6c507"}))}};u.style=n;const w=":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 b=w;const v=class{constructor(r){e(this,r);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 o=e.filter((e=>e.attributeName==="required"))[0];if(o){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(t(this.spiedElement)){const e=[];if(d(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(i(s))}}else{if(this.label){e.push(i(this.label))}}if(this.description){e.push(i(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(i(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 o=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"d8a5d2023add393b0a31173351a3d16d9fa0b1a6",class:e},r("slot",{key:"3f347f4dce239c0106fbbe52bdc217fa37c05d01",name:"label"}),r("div",{key:"d6cb92104d72530059ecb9a383ff832afb0c2141",class:"input-container"},r("slot",{key:"8be28f721ff351d41dced80c97c0e34337703d0e",name:"prefix"}),r("slot",{key:"cc58d463877a1e8513736a987286e965870e096d",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"898709cfcf0ae1cd43dabd55547d62199d6230c9",name:"suffix"})),o?r("slot",{name:"error"}):"",r("slot",{key:"aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return o(this)}static get watchers(){return{isError:["isErrorChange"]}}};v.style=b;const h=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const p=h;const m=["title"];const x=class{constructor(r){e(this,r);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),a(this.el,m))}async setAriaAttribute(e,r){l(this.nativeLabel,e,r)}render(){return r(s,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},r("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),r("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return o(this)}};x.style=p;export{u as wcs_error,v as wcs_form_field,x as wcs_label};
+//# sourceMappingURL=p-22620c69.entry.js.map

package/dist/wcs/{p-9b76b8e6.entry.js.map → p-22620c69.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["errorCss","WcsErrorStyle0","Label","render","h","Host","key","role","slot","formFieldCss","WcsFormFieldStyle0","FormField","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","classes","class","name","onSlotchange","onFormInputSlotChange","labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","inheritedAttributes","Object","assign","inheritAriaAttributes","inheritAttributes","attr","value","setOrRemoveAttribute","nativeLabel","ref"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n line-height: 0;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["errorCss","WcsErrorStyle0","Label","render","h","Host","key","role","slot","formFieldCss","WcsFormFieldStyle0","FormField","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","classes","class","name","onSlotchange","onFormInputSlotChange","labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","inheritedAttributes","Object","assign","inheritAriaAttributes","inheritAttributes","attr","value","setOrRemoveAttribute","nativeLabel","ref"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/wcs/wcs.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-32e583ea.js";export{s as setNonce}from"./p-32e583ea.js";import{g as a}from"./p-e1255160.js";var o=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};o().then((async e=>{await a();return t(JSON.parse('[["p-a0f6ef30",[[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"]}]]],["p-0b8157e7",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[1026,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"],"setAriaAttribute":[64]}]]],["p-dfb52a1c",[[1,"wcs-alert-drawer",{"position":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"],"show":[64]}]]],["p-fbd68522",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[516,"check-on-complete"],"internalCurrentStepIndex":[32],"previous":[64],"next":[64]},null,{"currentStep":["onCurrentStepChange"]}]]],["p-0326f834",[[1,"wcs-breadcrumb",{"maxItems":[2,"max-items"],"itemsBeforeCollapse":[2,"items-before-collapse"],"itemsAfterCollapse":[2,"items-after-collapse"],"ariaLabelExpandButton":[1,"aria-label-expand-button"],"showHiddenItems":[32],"setAriaAttribute":[64]},null,{"maxItems":["handleCollapsePropsChange"],"itemsBeforeCollapse":["handleCollapsePropsChange"],"itemsAfterCollapse":["handleCollapsePropsChange"],"ariaLabelExpandButton":["handleAriaLabelExpandBtnChange"]}]]],["p-1ba616c2",[[17,"wcs-counter",{"size":[513],"label":[1],"disabled":[516],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32],"setAriaAttribute":[64]},null,{"value":["valueChange"]}]]],["p-f2f7595e",[[1,"wcs-grid",{"serverMode":[516,"server-mode"],"data":[16],"loading":[516],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"rowCssPartsFn":[16],"columns":[32],"paginationEl":[32],"rows":[32],"cursorPosition":[32],"focusFirstCell":[64],"setAriaAttribute":[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{"cursorPosition":["onCursorPositionChange"],"data":["onDataChange"],"selectedItems":["onSelectedItemsPropertyChange"]}]]],["p-4e2d6227",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[1540],"showCloseButton":[516,"show-close-button"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"size":[1],"hideActions":[516,"hide-actions"],"modalTriggerControlsId":[1,"modal-trigger-controls-id"],"initialFocusElementId":[1,"initial-focus-element-id"],"disableAutoFocus":[516,"disable-auto-focus"],"setAriaAttribute":[64]},[[4,"keydown","onKeyDown"]],{"show":["onShowChange"]}]]],["p-fe303f58",[[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"]}]]],["p-c6f8c45c",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32],"setAriaAttribute":[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]]],["p-5da0534f",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[516],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[516],"name":[1],"hidePasswordButtonAriaLabel":[1,"hide-password-button-aria-label"],"showPasswordButtonAriaLabel":[1,"show-password-button-aria-label"],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"passwordReveal":[32],"setBlur":[64],"getInputElement":[64],"setAriaAttribute":[64]},null,{"debounce":["debounceChanged"],"passwordReveal":["onPasswordRevealChange"]}]]],["p-c261eaf9",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"debounce":[2],"disabled":[516],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[516,"auto-grow"],"value":[1025],"resize":[513],"setAriaAttribute":[64],"fitContent":[64],"setBlur":[64],"getInputElement":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-a07381f2",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"multiExpandable":[4,"multi-expandable"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]],{"hideActionText":["updateHideActiontextOnPanel"],"highlight":["updateHighlightOnPanel"],"groupContentWithHeader":["updateGroupContentWithHeader"]}]]],["p-61592f91",[[1,"wcs-accordion-content"]]],["p-439804b0",[[1,"wcs-accordion-header"]]],["p-2329af04",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"setAriaAttribute":[64],"close":[64]},null,{"open":["openChange"]}]]],["p-496115a5",[[1,"wcs-action-bar",{"gutter":[516],"hasTabs":[32]}]]],["p-781a956e",[[1,"wcs-app"]]],["p-41b946b2",[[1,"wcs-badge",{"shape":[1],"color":[1],"size":[513]}]]],["p-53a395a9",[[1,"wcs-breadcrumb-item",{"last":[4]}]]],["p-637ec45a",[[1,"wcs-card",{"mode":[1537],"orientation":[513]},null,{"orientation":["orientationChanged"]}]]],["p-5607246c",[[1,"wcs-card-body",{"orientation":[32],"setOrientation":[64]}]]],["p-98a8b806",[[1,"wcs-card-content"]]],["p-6aededc6",[[1,"wcs-card-footer"]]],["p-f929b66f",[[1,"wcs-card-header"]]],["p-cbbca016",[[1,"wcs-card-media",{"orientation":[32],"setOrientation":[64]}]]],["p-990698a7",[[1,"wcs-chip",{"value":[1],"label":[1],"selected":[516],"open":[516],"disabled":[516],"variant":[513],"mode":[513]}]]],["p-4ae08567",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["p-ad286030",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-8332a7e3",[[1,"wcs-com-nav-item",null,[[0,"click","onClick"]]]]],["p-850fa9c9",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsClickOnFinalAction","wcsCategoryItemClickedHandler"]]]]],["p-c7812760",[[1,"wcs-divider"]]],["p-7de847e0",[[1,"wcs-dropdown-divider"]]],["p-367946fe",[[1,"wcs-dropdown-header"]]],["p-cad10435",[[4,"wcs-dropdown-item",null,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]]],["p-3a18535f",[[1,"wcs-field"]]],["p-e26c19e5",[[1,"wcs-field-content"]]],["p-c211a5d1",[[1,"wcs-field-label"]]],["p-0758d22e",[[1,"wcs-footer"]]],["p-0424e545",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["p-18fa39f4",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[516],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[516,"custom-cells"],"hidden":[516],"cursorPosition":[16],"columnPosition":[2,"column-position"],"setAriaAttribute":[64]},null,{"hidden":["parseMyObjectProp"],"sortOrder":["sortOrderChange"]}]]],["p-3823f54e",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["p-1e7ea63c",[[1,"wcs-header",{"setAriaAttribute":[64]}]]],["p-cbda74f6",[[1,"wcs-hint",{"small":[1540]}]]],["p-580b3142",[[0,"wcs-icon",{"icon":[1],"size":[1],"setAriaAttribute":[64]}]]],["p-e56b9ce2",[[1,"wcs-list-item",{"activated":[1540]}]]],["p-aadf37e7",[[1,"wcs-list-item-properties"]]],["p-27b438c0",[[1,"wcs-list-item-property"]]],["p-5e8fff73",[[1,"wcs-native-select",{"size":[513],"required":[516],"expanded":[32],"disabled":[32],"setAriaAttribute":[64],"updateStyles":[64]},null,{"required":["requiredChanged"]}]]],["p-9c73744c",[[1,"wcs-nav",{"setAriaAttribute":[64]}]]],["p-dff8641e",[[4,"wcs-nav-item",null,[[0,"keydown","onKeyDown"]]]]],["p-bc009574",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-86ec9ead",[[17,"wcs-radio",{"value":[1544],"label":[1537],"disabled":[1540],"name":[1025],"mode":[513],"checked":[32],"radioTabIndex":[32],"updateState":[64],"setTabIndex":[64],"setAriaAttribute":[64]}]]],["p-fdeae83e",[[1,"wcs-radio-group",{"value":[1032],"name":[520],"mode":[513],"setAriaAttribute":[64]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{"value":["onValueChangeHandler"],"name":["updateAllRadioModeAndName"],"mode":["updateAllRadioModeAndName"]}]]],["p-352e1f99",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["p-c84ae00d",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["p-5202b323",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["p-b0a6eec6",[[17,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-ad5192cd",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["p-abd8d5a0",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[516,"headers-only"],"gutter":[516],"description":[1],"mobileOverlayExpanded":[32],"mobile":[32],"headers":[32],"currentActiveTabIndex":[32],"setAriaAttribute":[64]},[[0,"tabLoaded","onTabLoaded"],[8,"click","onWindowClickEvent"]],{"selectedIndex":["selectedIndexChanged"],"selectedKey":["selectedTabkeyChanged"],"mobile":["onMobileChange"]}]]],["p-db7ba599",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[516],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]},[[8,"keydown","handleKeyDown"]],{"interactive":["updateProps"],"position":["updateProps"],"maxWidth":["updateProps"],"theme":["updateProps"],"delay":["updateProps"],"duration":["updateProps"],"trigger":["updateProps"],"content":["updateTippyContent"]}]]],["p-8152d360",[[1,"wcs-alert",{"show":[1540],"intent":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"]},[[1,"mouseover","mouseOverHandler"],[1,"mouseout","mouseOutHandler"]]]]],["p-9fd3366c",[[1,"wcs-progress-bar",{"size":[1],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-ed3b0709",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"required":[4],"labelAlignment":[1537,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-2221bf0c",[[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"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1540],"required":[516],"multiple":[516],"autocomplete":[516],"serverMode":[516,"server-mode"],"filterFn":[16],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"displayText":[32],"focused":[32],"showNoResultFoundLabel":[32],"autocompleteValue":[32],"overlayDirection":[32],"open":[64],"close":[64],"setAriaAttribute":[64]},[[1,"mouseup","onMouseUp"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"],[0,"focus","onFocus"],[2,"blur","onBlur"]],{"value":["onValueChangeHandler"]}]]],["p-9b76b8e6",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]},null,{"isError":["isErrorChange"]}],[1,"wcs-label",{"required":[516],"setAriaAttribute":[64]}]]],["p-b28b2fba",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"setAriaAttribute":[64]}]]],["p-450942b1",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1540],"setAriaAttribute":[64]},[[0,"click","onClick"]],{"ripple":["onRippleChange"]}],[1,"wcs-spinner",{"mode":[513]}]]]]'),e)}));
+import{p as e,b as t}from"./p-32e583ea.js";export{s as setNonce}from"./p-32e583ea.js";import{g as a}from"./p-e1255160.js";var o=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};o().then((async e=>{await a();return t(JSON.parse('[["p-a0f6ef30",[[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"]}]]],["p-0b8157e7",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[1026,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"],"setAriaAttribute":[64]}]]],["p-dfb52a1c",[[1,"wcs-alert-drawer",{"position":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"],"show":[64]}]]],["p-fbd68522",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[516,"check-on-complete"],"internalCurrentStepIndex":[32],"previous":[64],"next":[64]},null,{"currentStep":["onCurrentStepChange"]}]]],["p-0326f834",[[1,"wcs-breadcrumb",{"maxItems":[2,"max-items"],"itemsBeforeCollapse":[2,"items-before-collapse"],"itemsAfterCollapse":[2,"items-after-collapse"],"ariaLabelExpandButton":[1,"aria-label-expand-button"],"showHiddenItems":[32],"setAriaAttribute":[64]},null,{"maxItems":["handleCollapsePropsChange"],"itemsBeforeCollapse":["handleCollapsePropsChange"],"itemsAfterCollapse":["handleCollapsePropsChange"],"ariaLabelExpandButton":["handleAriaLabelExpandBtnChange"]}]]],["p-1ba616c2",[[17,"wcs-counter",{"size":[513],"label":[1],"disabled":[516],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32],"setAriaAttribute":[64]},null,{"value":["valueChange"]}]]],["p-f2f7595e",[[1,"wcs-grid",{"serverMode":[516,"server-mode"],"data":[16],"loading":[516],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"rowCssPartsFn":[16],"columns":[32],"paginationEl":[32],"rows":[32],"cursorPosition":[32],"focusFirstCell":[64],"setAriaAttribute":[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{"cursorPosition":["onCursorPositionChange"],"data":["onDataChange"],"selectedItems":["onSelectedItemsPropertyChange"]}]]],["p-4e2d6227",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[1540],"showCloseButton":[516,"show-close-button"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"size":[1],"hideActions":[516,"hide-actions"],"modalTriggerControlsId":[1,"modal-trigger-controls-id"],"initialFocusElementId":[1,"initial-focus-element-id"],"disableAutoFocus":[516,"disable-auto-focus"],"setAriaAttribute":[64]},[[4,"keydown","onKeyDown"]],{"show":["onShowChange"]}]]],["p-fe303f58",[[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"]}]]],["p-c6f8c45c",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32],"setAriaAttribute":[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]]],["p-5da0534f",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[516],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[516],"name":[1],"hidePasswordButtonAriaLabel":[1,"hide-password-button-aria-label"],"showPasswordButtonAriaLabel":[1,"show-password-button-aria-label"],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"passwordReveal":[32],"setBlur":[64],"getInputElement":[64],"setAriaAttribute":[64]},null,{"debounce":["debounceChanged"],"passwordReveal":["onPasswordRevealChange"]}]]],["p-c261eaf9",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"debounce":[2],"disabled":[516],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[516,"auto-grow"],"value":[1025],"resize":[513],"setAriaAttribute":[64],"fitContent":[64],"setBlur":[64],"getInputElement":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-a07381f2",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"multiExpandable":[4,"multi-expandable"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]],{"hideActionText":["updateHideActiontextOnPanel"],"highlight":["updateHighlightOnPanel"],"groupContentWithHeader":["updateGroupContentWithHeader"]}]]],["p-61592f91",[[1,"wcs-accordion-content"]]],["p-439804b0",[[1,"wcs-accordion-header"]]],["p-2329af04",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"setAriaAttribute":[64],"close":[64]},null,{"open":["openChange"]}]]],["p-496115a5",[[1,"wcs-action-bar",{"gutter":[516],"hasTabs":[32]}]]],["p-781a956e",[[1,"wcs-app"]]],["p-41b946b2",[[1,"wcs-badge",{"shape":[1],"color":[1],"size":[513]}]]],["p-53a395a9",[[1,"wcs-breadcrumb-item",{"last":[4]}]]],["p-637ec45a",[[1,"wcs-card",{"mode":[1537],"orientation":[513]},null,{"orientation":["orientationChanged"]}]]],["p-5607246c",[[1,"wcs-card-body",{"orientation":[32],"setOrientation":[64]}]]],["p-98a8b806",[[1,"wcs-card-content"]]],["p-6aededc6",[[1,"wcs-card-footer"]]],["p-f929b66f",[[1,"wcs-card-header"]]],["p-cbbca016",[[1,"wcs-card-media",{"orientation":[32],"setOrientation":[64]}]]],["p-990698a7",[[1,"wcs-chip",{"value":[1],"label":[1],"selected":[516],"open":[516],"disabled":[516],"variant":[513],"mode":[513]}]]],["p-4ae08567",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["p-ad286030",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-8332a7e3",[[1,"wcs-com-nav-item",null,[[0,"click","onClick"]]]]],["p-850fa9c9",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsClickOnFinalAction","wcsCategoryItemClickedHandler"]]]]],["p-c7812760",[[1,"wcs-divider"]]],["p-7de847e0",[[1,"wcs-dropdown-divider"]]],["p-367946fe",[[1,"wcs-dropdown-header"]]],["p-cad10435",[[4,"wcs-dropdown-item",null,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]]],["p-3a18535f",[[1,"wcs-field"]]],["p-e26c19e5",[[1,"wcs-field-content"]]],["p-c211a5d1",[[1,"wcs-field-label"]]],["p-0758d22e",[[1,"wcs-footer"]]],["p-0424e545",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["p-18fa39f4",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[516],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[516,"custom-cells"],"hidden":[516],"cursorPosition":[16],"columnPosition":[2,"column-position"],"setAriaAttribute":[64]},null,{"hidden":["parseMyObjectProp"],"sortOrder":["sortOrderChange"]}]]],["p-3823f54e",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["p-1e7ea63c",[[1,"wcs-header",{"setAriaAttribute":[64]}]]],["p-cbda74f6",[[1,"wcs-hint",{"small":[1540]}]]],["p-580b3142",[[0,"wcs-icon",{"icon":[1],"size":[1],"setAriaAttribute":[64]}]]],["p-e56b9ce2",[[1,"wcs-list-item",{"activated":[1540]}]]],["p-aadf37e7",[[1,"wcs-list-item-properties"]]],["p-27b438c0",[[1,"wcs-list-item-property"]]],["p-5e8fff73",[[1,"wcs-native-select",{"size":[513],"required":[516],"expanded":[32],"disabled":[32],"setAriaAttribute":[64],"updateStyles":[64]},null,{"required":["requiredChanged"]}]]],["p-9c73744c",[[1,"wcs-nav",{"setAriaAttribute":[64]}]]],["p-dff8641e",[[4,"wcs-nav-item",null,[[0,"keydown","onKeyDown"]]]]],["p-bc009574",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-86ec9ead",[[17,"wcs-radio",{"value":[1544],"label":[1537],"disabled":[1540],"name":[1025],"mode":[513],"checked":[32],"radioTabIndex":[32],"updateState":[64],"setTabIndex":[64],"setAriaAttribute":[64]}]]],["p-fdeae83e",[[1,"wcs-radio-group",{"value":[1032],"name":[520],"mode":[513],"setAriaAttribute":[64]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{"value":["onValueChangeHandler"],"name":["updateAllRadioModeAndName"],"mode":["updateAllRadioModeAndName"]}]]],["p-352e1f99",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["p-c84ae00d",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["p-5202b323",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["p-b0a6eec6",[[17,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-ad5192cd",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["p-abd8d5a0",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[516,"headers-only"],"gutter":[516],"description":[1],"mobileOverlayExpanded":[32],"mobile":[32],"headers":[32],"currentActiveTabIndex":[32],"setAriaAttribute":[64]},[[0,"tabLoaded","onTabLoaded"],[8,"click","onWindowClickEvent"]],{"selectedIndex":["selectedIndexChanged"],"selectedKey":["selectedTabkeyChanged"],"mobile":["onMobileChange"]}]]],["p-db7ba599",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[516],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]},[[8,"keydown","handleKeyDown"]],{"interactive":["updateProps"],"position":["updateProps"],"maxWidth":["updateProps"],"theme":["updateProps"],"delay":["updateProps"],"duration":["updateProps"],"trigger":["updateProps"],"content":["updateTippyContent"]}]]],["p-8152d360",[[1,"wcs-alert",{"show":[1540],"intent":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"]},[[1,"mouseover","mouseOverHandler"],[1,"mouseout","mouseOutHandler"]]]]],["p-9fd3366c",[[1,"wcs-progress-bar",{"size":[1],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-ed3b0709",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"required":[4],"labelAlignment":[1537,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-2221bf0c",[[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"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1540],"required":[516],"multiple":[516],"autocomplete":[516],"serverMode":[516,"server-mode"],"filterFn":[16],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"displayText":[32],"focused":[32],"showNoResultFoundLabel":[32],"autocompleteValue":[32],"overlayDirection":[32],"open":[64],"close":[64],"setAriaAttribute":[64]},[[1,"mouseup","onMouseUp"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"],[0,"focus","onFocus"],[2,"blur","onBlur"]],{"value":["onValueChangeHandler"]}]]],["p-22620c69",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]},null,{"isError":["isErrorChange"]}],[1,"wcs-label",{"required":[516],"setAriaAttribute":[64]}]]],["p-b28b2fba",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"setAriaAttribute":[64]}]]],["p-450942b1",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1540],"setAriaAttribute":[64]},[[0,"click","onClick"]],{"ripple":["onRippleChange"]}],[1,"wcs-spinner",{"mode":[513]}]]]]'),e)}));
 //# sourceMappingURL=wcs.esm.js.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "wcs-core",
-    "version": "7.5.0",
+    "version": "7.5.1",
     "description": "Web Components SNCF",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/bundle/p-fc9ba34d.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{p as e,H as t,h as s,c}from"./p-2bef72c7.js";import{i as a,a as l,s as r}from"./p-2e9b9605.js";const i=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const o=i;const n=["title"];const b=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),l(this.el,n))}async setAriaAttribute(e,t){r(this.nativeLabel,e,t)}render(){return s(c,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},s("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),s("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return this}static get style(){return o}},[1,"wcs-label",{required:[516],setAriaAttribute:[64]}]);function f(){if(typeof customElements==="undefined"){return}const e=["wcs-label"];e.forEach((e=>{switch(e){case"wcs-label":if(!customElements.get(e)){customElements.define(e,b)}break}}))}export{b as L,f as d};
2	- //# sourceMappingURL=p-fc9ba34d.js.map

package/bundle/p-fc9ba34d.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","Label","proxyCustomElement","H","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeLabel","render","h","Host","key","slot","ref"],"sources":["src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' *';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n line-height: 0;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /**\n * If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAW,gkBACjB,MAAAC,EAAeD,ECGf,MAAME,EAAwB,CAAC,S,MAsBlBC,EAAKC,EAAA,MAAAD,UAAAE,E,kEAGNC,KAAAC,oBAA4C,G,cAMP,K,CAE7C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,YAAaH,EAAMC,E,CAGjD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACPH,EAAA,QAAAX,OAAAC,OAAA,CAAAY,IAAA,2CAAOE,IAAMZ,GAAON,KAAKY,YAAcN,GAAQN,KAAKC,qBAChDa,EAAA,QAAAE,IAAA,8C"}

package/composite-elements/p-0c306f8c.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{p as e,H as t,h as s,c}from"./p-2bef72c7.js";import{i as a,a as l,s as r}from"./p-e803bb26.js";const i=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const o=i;const n=["title"];const b=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),l(this.el,n))}async setAriaAttribute(e,t){r(this.nativeLabel,e,t)}render(){return s(c,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},s("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),s("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return this}static get style(){return o}},[1,"wcs-label",{required:[516],setAriaAttribute:[64]}]);function f(){if(typeof customElements==="undefined"){return}const e=["wcs-label"];e.forEach((e=>{switch(e){case"wcs-label":if(!customElements.get(e)){customElements.define(e,b)}break}}))}f();export{b as L,f as d};
2	- //# sourceMappingURL=p-0c306f8c.js.map

package/composite-elements/p-0c306f8c.js.map DELETED Viewed

@@ -1 +0,0 @@