wcs-core 7.0.0 → 7.2.0

package/dist/esm/wcs-editable-field.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
+import { b as isEscapeKey, o as isMouseEvent, q as clickInsideElement, d as isEnterKey } from './helpers-ece6a2d3.js';
 
 const WcsEditableFieldSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsEditableFieldSize(size) {
@@ -6,7 +7,7 @@ function isWcsEditableFieldSize(size) {
     return WcsEditableFieldSizeValues.includes(size);
 }
 
-const editableFieldCss = ":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-foreground-brand);--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-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:calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));--wcs-editable-field-padding-horizontal-l:calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);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 .display-container{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);transition:150ms all;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host .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);transition:150ms all;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(: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:hover wcs-mat-icon{display:flex;align-items:center}: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 editableFieldCss = ":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 WcsEditableFieldStyle0 = editableFieldCss;
 
 var EditableComponentState;
@@ -15,12 +16,17 @@ var EditableComponentState;
     EditableComponentState[EditableComponentState["EDIT"] = 1] = "EDIT";
     EditableComponentState[EditableComponentState["LOAD"] = 2] = "LOAD";
 })(EditableComponentState || (EditableComponentState = {}));
+/**
+ * Aria-label of the display button
+ */
+const EDIT_ARIA_LABEL = "Éditer";
+// We wait until the element is displayed on the page otherwise the focus does not work.
+// 20ms is a little more than a 16ms frame at 60fps.
+const DELAY_BEFORE_FOCUS = 20;
 const EditableField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.wcsChange = createEvent(this, "wcsChange", 7);
-        // fixme: why this attr is never read?
-        // ignoreNextChangeEvent: boolean = false;
         this.spiedElement = null;
         this.currentValue = null;
         this.currentState = EditableComponentState.DISPLAY;
@@ -41,7 +47,7 @@ const EditableField = class {
         }
         this.currentValue = this.value;
     }
-    componentDidRender() {
+    componentDidLoad() {
         const assignedElements = this.el.shadowRoot.querySelector('slot').assignedElements();
         switch (this.type) {
             case 'input':
@@ -55,6 +61,34 @@ const EditableField = class {
                 break;
         }
     }
+    disconnectedCallback() {
+        this.cleanUpSpiedElementEventListeners();
+    }
+    keyboardSubmitHandler(event) {
+        const shouldValidateOnEnterKey = (this.type === 'textarea' || this.type === 'select')
+            ? (isEnterKey(event) && event.ctrlKey)
+            : isEnterKey(event);
+        if (shouldValidateOnEnterKey) {
+            this.sendCurrentValue();
+        }
+        if (isEscapeKey(event)) {
+            this.discardChanges();
+        }
+    }
+    onWcsInputOrChange(event) {
+        event.stopImmediatePropagation();
+        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;
+        this.currentValue = value;
+        if (this.validateFn) {
+            this.isError = !this.validateFn(this.currentValue);
+        }
+    }
+    cleanUpSpiedElementEventListeners() {
+        var _a, _b, _c;
+        (_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onInputKeydownCallback);
+        (_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);
+        (_c = this.spiedElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);
+    }
     initWithInput(assignedElements) {
         const element = assignedElements.filter(x => {
             return x.tagName === 'WCS-INPUT';
@@ -62,15 +96,8 @@ const EditableField = class {
         if (!element)
             throw new Error('You must provide a slotted input element to handle edition');
         this.spiedElement = element;
-        this.addInputHandlerForWcsComponents(this.spiedElement);
-        this.spiedElement.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter') {
-                this.sendCurrentValue();
-            }
-            if (event.key === 'Escape') {
-                this.discardChanges();
-            }
-        });
+        this.addWcsInputEventHandler(this.spiedElement);
+        this.addKeyDownHandler(this.spiedElement);
     }
     initWithTextArea(assignedElements) {
         const element = assignedElements.filter(x => {
@@ -79,15 +106,8 @@ const EditableField = class {
         if (!element)
             throw new Error('You must provide a slotted textarea element to handle edition');
         this.spiedElement = element;
-        this.addInputHandlerForWcsComponents(this.spiedElement);
-        this.spiedElement.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && event.ctrlKey) {
-                this.sendCurrentValue();
-            }
-            if (event.key === 'Escape') {
-                this.discardChanges();
-            }
-        });
+        this.addWcsInputEventHandler(this.spiedElement);
+        this.addKeyDownHandler(this.spiedElement);
     }
     initWithSelect(assignedElements) {
         const element = assignedElements.filter(x => {
@@ -96,7 +116,8 @@ const EditableField = class {
         if (!element)
             throw new Error('You must provide a slotted select element to handle edition');
         this.spiedElement = element;
-        this.addChangeHandlerForWcsComponents(this.spiedElement);
+        this.addWcsChangeEventHandler(this.spiedElement);
+        this.addKeyDownHandler(this.spiedElement);
     }
     /**
      * This method subscribes the component to the change events produced by the other WCS components
@@ -104,33 +125,39 @@ const EditableField = class {
      * @param elt the element to subscribe to
      * @private
      */
-    addChangeHandlerForWcsComponents(elt) {
-        elt.addEventListener('wcsChange', (event) => {
-            event.stopImmediatePropagation();
-            this.currentValue = event.detail.value;
-            if (this.validateFn) {
-                this.isError = !this.validateFn(this.currentValue);
-            }
-        });
+    addWcsChangeEventHandler(elt) {
+        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);
+        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);
     }
     /**
      * This method subscribes the component to the input events produced by the other WCS components
      * @param elt the element to subscribe to
      * @private
      */
-    addInputHandlerForWcsComponents(elt) {
-        elt.addEventListener('wcsInput', (event) => {
-            event.stopImmediatePropagation();
-            this.currentValue = event.detail.target.value;
-            if (this.validateFn) {
-                this.isError = !this.validateFn(this.currentValue);
-            }
-        });
+    addWcsInputEventHandler(elt) {
+        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);
+        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);
+    }
+    /**
+     * This method subscribes the component to the keydown events produced by the other WCS components
+     * @param elt the element to subscribe to
+     * @private
+     */
+    addKeyDownHandler(elt) {
+        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);
+        elt.addEventListener('keydown', this.onInputKeydownCallback);
+    }
+    focusEditModeBtn() {
+        setTimeout(() => {
+            var _a;
+            (_a = this.editModeBtn) === null || _a === void 0 ? void 0 : _a.focus();
+        }, DELAY_BEFORE_FOCUS);
     }
     sendCurrentValue() {
         if (this.currentState === EditableComponentState.EDIT) {
             if (this.value === this.currentValue) {
                 this.currentState = EditableComponentState.DISPLAY;
+                this.focusEditModeBtn();
             }
             else {
                 this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;
@@ -149,18 +176,24 @@ const EditableField = class {
         this.currentValue = this.value;
         this.currentState = EditableComponentState.DISPLAY;
         this.isError = false;
+        this.focusEditModeBtn();
     }
     forceDisplayStateAndValidate() {
         if (this.currentState === EditableComponentState.LOAD) {
             this.value = this.currentValue;
             this.currentState = EditableComponentState.DISPLAY;
+            this.focusEditModeBtn();
         }
         else {
             throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');
         }
     }
+    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. 
+    // In some browsers, pressing "Enter" or "Space" while focused on a button generates a click event
+    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. 
     onWindowClickEvent(event) {
-        if (!this.clickInsideComponent(event)) {
+        // Ensure only true mouse clicks are processed
+        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {
             if (this.currentState === EditableComponentState.EDIT) {
                 if (this.isError) {
                     this.discardChanges();
@@ -171,10 +204,6 @@ const EditableField = class {
             }
         }
     }
-    clickInsideComponent(event) {
-        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width
-            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;
-    }
     /**
      * discard changes and force component state to DISPLAY
      * <br/>
@@ -189,14 +218,10 @@ const EditableField = class {
     onDisplayContainerClick() {
         if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {
             this.currentState = EditableComponentState.EDIT;
-            // fixme: why this attr is never read?
-            // this.ignoreNextChangeEvent = true;
             this.spiedElement['value'] = this.currentValue;
             if (this.validateFn) {
                 this.isError = !this.validateFn(this.currentValue);
             }
-            // We wait until the element is displayed on the page otherwise the focus does not work
-            const DELAY_FOR_RENDER = 20;
             setTimeout(() => {
                 if (this.type === 'input') {
                     this.spiedElement.focus();
@@ -205,15 +230,9 @@ const EditableField = class {
                     this.spiedElement.fitContent();
                     this.spiedElement.focus();
                 }
-            }, DELAY_FOR_RENDER);
+            }, DELAY_BEFORE_FOCUS);
         }
     }
-    render() {
-        const { formattedValue, formattedCurrentValue } = this.formatValues();
-        return (h(Host, { key: 'a5866056e6ca3891ba611cb61398b48f0b996045' }, h("div", { key: '035c3f7f53224be855d488f2ef5ebf5c9051e757', class: "label" }, this.label), h("div", { key: '77273c246c635a7b365863b80e01056e9a550d07', class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick() }, formattedValue, h("wcs-mat-icon", { key: '5a2617abdc14bd5287c96f95ceb7b4259ac0177f', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '4c8553d8ef949a6398180a9cbc2c8b44b0f703bc', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: '5b47f277a289b7b3839d54a05e7cb36538bf20cb' })), h("wcs-form-field", { key: '63c82c27c7eefdc6fe43e91b49673b95bae793bb', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("slot", { key: '5826a22012674cfa09294fb7afb493cdae6b34a6' }), this.isError && this.errorMsg
-            ? h("wcs-error", null, this.errorMsg)
-            : null)));
-    }
     getReadonlySvgIcon() {
         return h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "26", height: "24", viewBox: "0 0 27 25", class: "readonly-icon" }, h("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)" }), h("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)" }), h("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)" }));
     }
@@ -232,9 +251,16 @@ const EditableField = class {
         }
         return {
             formattedValue: (formattedValue ? (h("span", null, formattedValue)) : (h("span", null))),
+            formattedValueText: formattedValue,
             formattedCurrentValue: (formattedCurrentValue ? (h("span", null, formattedCurrentValue)) : (h("span", null)))
         };
     }
+    render() {
+        const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
+        return (h(Host, { key: '81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478' }, h("div", { key: '1278b7794e0127f1f2bc819d246712d55a139abd', class: "label" }, this.label), h("button", { key: '6049a936d198c5ee68db9a29466b82dc0ca55fa2', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: '97020f20f553553b1e3a866d6d2ad274504b1bc9', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '17c58773fdaa738eef36c20545815ff10c35c5eb', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: 'b2ef7dd52a95d0604cd74368a17cf26283a663a9' })), h("wcs-form-field", { key: '38891efe6c9c119ad7d261f31edba4b4e5e3ae71', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '80ff051b722d175932c4cf56410f8c4081fe4cb8', class: "visually-hidden" }, this.label), h("slot", { key: '4e8592e8283ce75e629f61dafd609c59cd5fbbc0' }), this.isError && this.errorMsg
+            ? h("wcs-error", null, this.errorMsg)
+            : null)));
+    }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["onValueChange"]

package/dist/esm/wcs-editable-field.entry.js.map

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