npm - wcs-core - Versions diffs - 7.0.0 → 7.1.0 - Mend

wcs-core 7.0.0 → 7.1.0

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 (442) hide show

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

	@@ -1 +1 @@
1	- {"file":"wcs-dropdown.entry.js","mappings":";;;;;;;AA8BA;;;;;;SAMgB,yBAAyB,CAAC,KAAoB,EAAE,YAAiC;IAC7F,MAAM,gBAAgB,GAAG,iCAAiC,CAAC,KAAK,CAAC,CAAC;IAElE,IAAG,gBAAgB,KAAK,SAAS,EAAE;QAC/B,OAAO,EAAE,CAAC;KACb;IAED,QAAQ,YAAY;QAChB,KAAK,QAAQ;;YAET,QAAQ,gBAAgB;gBACpB,KAAK,UAAU;oBACX,OAAO,CAAC,EAAC,IAAI,EAAE,UAAU,EAAC,EAAE,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;gBACrE,KAAK,YAAY;oBACb,OAAO,CAAC,EAAC,IAAI,EAAE,UAAU,EAAC,EAAE,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;gBACtE,KAAK,OAAO,CAAC;gBACb,KAAK,OAAO;oBACR,OAAO,CAAC,EAAC,IAAI,EAAE,UAAU,EAAC,EAAE,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;aAGzE;YACD,MAAM;QACV,KAAK,QAAQ;;YAET,QAAQ,gBAAgB;gBACpB,KAAK,UAAU;oBACX,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAC,CAAC,CAAC;gBACrD,KAAK,YAAY;oBACb,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;gBACjD,KAAK,MAAM;oBACP,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;gBAClD,KAAK,KAAK;oBACN,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;gBACjD,KAAK,QAAQ,CAAC;gBACd,KAAK,SAAS,CAAC;gBACf,KAAK,KAAK;oBACN,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC,CAAC;aAGpC;YACD,MAAM;QACV;YACI,MAAM,KAAK,CAAC,eAAe,CAAC,CAAC;KACpC;IACD,OAAO,EAAE,CAAC;AACd;;ACjFA,MAAM,WAAW,GAAG,u/FAAu/F,CAAC;AAC5gG,0BAAe,WAAW;;ACmB1B,MAAM,wBAAwB,GAAG,CAAC,UAAU,CAAC,CAAC;MAgCjC,QAAQ;;;QAET,wBAAmB,GAAyB,EAAE,CAAC;uBAwB5B,KAAK;oBAGF,SAAS;qBAGP,QAAQ;oBAGV,GAAG;wBAGL,KAAK;yBAGS,YAAY;wBAE1B,KAAK;;IAOjC,IAAY,KAAK;QACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;KACpE;IAGS,eAAe;QACrB,IAAI,CAAC,MAAM,CAAC,UAAU,iCACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,KAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,IAC3B,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;KACtC;IAGD,MAAM;QACF,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACzB;IAED,gBAAgB;QACZ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,0CAA0C,IAAI,CAAC,IAAI,sBAAsB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzH,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;SACnB;QAED,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;YACxD,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE;gBACP;oBACI,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACL,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;qBACjB;iBACJ;aACJ;SACJ,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;IAEO,oBAAoB;;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACtD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,EAAE;YAC/B,KAAK,CAAC,OAAO,CAAC,CAAC;gBACX,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACvB,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;aAC5B,CAAC,CAAC;SACN;KACJ;IAEO,aAAa,CAAC,CAAa;QAC/B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACrB;KACJ;IAGD,kBAAkB,CAAC,KAAiB;QAChC,MAAM,2BAA2B,GAAG,8BAA8B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACnF,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,2BAA2B,EAAE;YAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACzB;KACJ;IAGD,iBAAiB,CAAC,CAAoB;QAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;KAC7B;IAGD,SAAS,CAAC,MAAqB;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;QACzD,MAAM,yBAAyB,GAAoC,yBAAyB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;;;QAInH,IAAI,yBAAyB,CAAC,MAAM,IAAI,CAAC,EAAE;YACvC,MAAM,CAAC,cAAc,EAAE,CAAC;SAC3B;QAED,KAAK,MAAM,uBAAuB,IAAI,yBAAyB,EAAE;YAC7D,IAAI,CAAC,yCAAyC,CAAC,uBAAuB,CAAC,CAAC;SAC3E;KACJ;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,yCAAyC,CAAC,uBAAsD;QAC5F,QAAQ,uBAAuB,CAAC,IAAI;YAChC,KAAK,UAAU;gBACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBAClB,MAAM;YACV,KAAK,WAAW;gBACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;gBAC1B,MAAM;YACV,KAAK,YAAY;gBACb,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC5B,MAAM;YACV,KAAK,WAAW;gBACZ,QAAQ,uBAAuB,CAAC,MAAM;oBAClC,KAAK,UAAU;wBACX,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;wBAClC,MAAM;oBACV,KAAK,MAAM;wBACP,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;wBAC9B,MAAM;oBACV,KAAK,OAAO;wBACR,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;wBAClB,MAAM;oBACV,KAAK,MAAM;wBACP,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;wBACtC,MAAM;iBAGb;gBACD,MAAM;SAGb;KACJ;;;;;IAMO,oBAAoB;QACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC1C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACtC;KACJ;IAEO,SAAS,CAAC,YAAoB;QAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,GAAG,CAAC,CAAC;YACzC,qBAAqB,CAAC;;gBAClB,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;aACxC,CAAC,CAAC;SACN;KACJ;IAEO,gBAAgB,CAAC,SAA8B;QACnD,MAAM,YAAY,GAAG,IAAI,CAAC,qCAAqC,CAAC,SAAS,CAAC,CAAC;QAC3E,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO;QAEhC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;KAChC;IAEO,qCAAqC,CAAC,SAA8B;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAE1E,MAAM,SAAS,GAAG,CAAC,CAAC;QACpB,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAEnC,IAAI,SAAS,KAAK,MAAM,IAAI,YAAY,GAAG,SAAS,EAAE;YAClD,YAAY,EAAE,CAAC;SAClB;aAAM,IAAI,SAAS,KAAK,UAAU,IAAI,YAAY,GAAG,SAAS,EAAE;YAC7D,YAAY,EAAE,CAAC;SAClB;aAAM;;YAEH,IAAI,SAAS,KAAK,MAAM,IAAI,YAAY,IAAI,SAAS,EAAE;gBACnD,YAAY,GAAG,CAAC,CAAC;aACpB;YACD,IAAI,SAAS,KAAK,UAAU,IAAI,YAAY,KAAK,SAAS,EAAE;gBACxD,YAAY,GAAG,SAAS,CAAC;aAC5B;SACJ;QAED,OAAO,YAAY,CAAC;KACvB;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SACxB;KACJ;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,6EAAQ,EAAE,EAAC,iBAAiB,mBACN,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,MAAM,EACpB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAC/C,MAAM,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,wBAAwB,EAAE,IACjD,IAAI,CAAC,mBAAmB,cAAmB,EACvD,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC5E,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,iBAClB,MAAM,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAC/C,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,wBAAwB,EAAE,IACnD,4DAAK,KAAK,EAAC,4BAA4B,IACnC,6DAAM,IAAI,EAAC,aAAa,GAAE,EACzB,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,EAAC,WAAW,IAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CACxD,CACG,EACb,4DAAK,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,EAAE,IAAI,SAAS,EACjD,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,qBACK,iBAAiB,EACjC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,GAAG,EAAE,IAChC,4DAAK,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,OAAO,8BAAoB,EACvD,4DAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,WAAW,IACtC,6DAAM,IAAI,EAAC,MAAM,IACb,6DAAM,EAAE,EAAE,UAAU,GAAS,CAC1B,CACL,CACJ,CACH,EACT;KACL;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n \| CloseMenu\n \| ClearFocus\n \| FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' \| 'previous' \| 'first' \| 'last'};\n\n/*\n We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n /\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' \| 'opened'): KeyboardEventAssociatedAction[] {\n const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n if(keyboardShortcut === 'UNKNOWN') {\n return [];\n }\n\n switch (currentState) {\n case 'closed':\n // We handle every available shortcut for the closed state\n switch (keyboardShortcut) {\n case 'UP_ARROW':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n case 'DOWN_ARROW':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n case 'SPACE':\n case 'ENTER':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n default:\n break;\n }\n break;\n case 'opened':\n // We handle every available shortcut for the opened state\n switch (keyboardShortcut) {\n case 'UP_ARROW':\n return [{kind: 'FocusItem', target: 'previous'}];\n case 'DOWN_ARROW':\n return [{kind: 'FocusItem', target: 'next'}];\n case 'HOME':\n return [{kind: 'FocusItem', target: 'first'}];\n case 'END':\n return [{kind: 'FocusItem', target: 'last'}];\n case 'ESCAPE':\n case 'MAJ+TAB':\n case 'TAB':\n return [{kind: 'CloseMenu'}];\n default:\n break;\n }\n break;\n default:\n throw Error('Unknown error');\n }\n return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n display: flex;\n\n --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n // Padding\n --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n // Arrow color\n --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n // Overlay\n --wcs-dropdown-overlay-max-height: 360px;\n --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n wcs-button {\n height: fit-content;\n }\n\n svg {\n margin-right: -0.25rem;\n }\n}\n\n/ Visually hide the native button /\nbutton {\n position: absolute;\n opacity: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n outline: 0;\n outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n button:focus-within + wcs-button {\n @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n }\n}\n\n.wcs-button-content-wrapper {\n display: flex;\n align-items: center;\n}\n\n.popover {\n display: none;\n border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n border-radius: var(--wcs-dropdown-overlay-border-radius);\n background-color: var(--wcs-dropdown-overlay-background-color);\n z-index: 9999;\n}\n\n.show {\n display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n min-width: calc(10 var(--wcs-semantic-size-base));\n border-radius: inherit;\n overflow: hidden;\n padding: var(--wcs-dropdown-overlay-padding);\n background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n // SVG arrow inside the button, on clear background\n .arrow {\n fill: var(--wcs-dropdown-clear-arrow-color);\n }\n}\n\n:host([mode=stroked]) {\n // SVG arrow inside the button, on stroked background\n .arrow {\n fill: var(--wcs-dropdown-stroked-arrow-color);\n }\n}\n\n:host([mode=plain]) {\n // SVG arrow inside the button, on primary background\n .arrow {\n fill: var(--wcs-dropdown-plain-arrow-color);\n }\n}\n\n:host([disabled]) {\n .arrow {\n fill: var(--wcs-dropdown-arrow-color-disabled);\n }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n visibility: hidden;\n z-index: -1;\n}\n\n#arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n}\n\n#is-empty {\n display: block;\n width: 20ch;\n padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n isWcsButtonSize,\n WcsButtonMode,\n WcsButtonShape,\n WcsButtonSize,\n WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n clickTargetIsElementOrChildren,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/*\n The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n /\n@Component({\n tag: 'wcs-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsDropdownElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n * not passing from a shadow-dom through another.\n * @private\n /\n private nativeButton!: HTMLButtonElement;\n\n /\n This button is shown on the user interface, and visually receives focus and catch click events. \n * It is hidden to screen readers since the native button carries all the aria informations.\n * @private\n /\n private wcsButton!: HTMLWcsButtonElement;\n\n /\n This div is shown on the user interface when the dropdown is expanded.\n * @private\n /\n private popoverDiv!: HTMLDivElement;\n\n /* Hides the arrow in the button /\n @Prop() noArrow: boolean = false;\n\n /* Dropdown's button mode /\n @Prop() mode: WcsButtonMode = 'stroked';\n\n /* Dropdown's button shape /\n @Prop() shape: WcsButtonShape = 'normal';\n \n /* Dropdown's button size /\n @Prop() size: WcsButtonSize = 'm';\n\n /* Specifies whether the dropdown button is clickable or not /\n @Prop() disabled: boolean = false;\n\n /* placement of the dropdown's popover /\n @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n @State() private expanded = false;\n\n\n private popper: Instance;\n \n private lastFocusedItemElement: HTMLWcsDropdownItemElement \| null;\n \n private get items(): HTMLWcsDropdownItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n }\n\n @Watch('placement')\n protected placementChange() {\n this.popper.setOptions({\n ...this.popper.state.options,\n placement: this.placement\n }).then(_ => this.popper.update());\n }\n \n @Listen('blur')\n onBlur() {\n this.clearLastFocusedItem();\n this.expanded = false;\n }\n\n componentDidLoad() {\n if (!isWcsButtonSize(this.size)) {\n console.warn(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n this.size = \"m\"; // Default fallback value\n }\n\n this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8]\n }\n }\n ]\n });\n\n this.fixForFirefoxBelow63();\n }\n\n private fixForFirefoxBelow63() {\n // If the items appear out of the slot we place them back\n const items = this.el.querySelectorAll('wcs-dropdown-item');\n const container = this.el.querySelector('.container');\n if (items.length > 0 && container) {\n items.forEach(i => {\n this.el.removeChild(i);\n container.appendChild(i);\n });\n }\n }\n\n private onButtonClick(_: MouseEvent): void {\n this.clearLastFocusedItem();\n this.expanded = !this.expanded;\n \n if (this.expanded) {\n this.focusItem(0);\n }\n }\n\n @Listen('click', {target: 'window'})\n onWindowClickEvent(event: MouseEvent) {\n const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n if (this.expanded && !clickedOnDropdownOrChildren) {\n this.expanded = false;\n }\n }\n\n @Listen('wcsDropdownItemClick')\n dropdownItemClick(_: CustomEvent<void>) {\n this.expanded = false;\n this.nativeButton.focus();\n }\n\n @Listen('keydown')\n onKeyDown(_event: KeyboardEvent): void {\n const currentState = this.expanded ? 'opened' : 'closed';\n const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n // If we have at least one associated actions, we prevent the default behavior of the event. \n // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n if (actionsFromKeyboardEvents.length != 0) {\n _event.preventDefault();\n }\n\n for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeButton, attr, value);\n }\n\n doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n switch (actionFromKeyboardEvent.kind) {\n case 'OpenMenu':\n this.expanded = true;\n this.focusItem(0);\n break;\n case 'CloseMenu':\n this.expanded = false;\n this.nativeButton.focus();\n break;\n case 'ClearFocus':\n this.clearLastFocusedItem();\n break;\n case 'FocusItem':\n switch (actionFromKeyboardEvent.target) {\n case 'previous':\n this.focusClosestItem('previous');\n break;\n case 'next':\n this.focusClosestItem('next');\n break;\n case 'first':\n this.focusItem(0);\n break;\n case 'last':\n this.focusItem(this.items.length - 1);\n break;\n default:\n break;\n }\n break;\n default:\n break;\n }\n }\n\n /\n Removes the focus and tabindex 0 of the last focused item if any.\n * @private\n */\n private clearLastFocusedItem() {\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = -1;\n this.lastFocusedItemElement = null;\n }\n }\n \n private focusItem(indexToFocus: number) {\n this.clearLastFocusedItem();\n this.lastFocusedItemElement = this.items[indexToFocus];\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = 0;\n requestAnimationFrame(() => {\n this.lastFocusedItemElement?.focus();\n });\n }\n }\n \n private focusClosestItem(direction: 'next' \| 'previous'): void {\n const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n if (indexToFocus === -1) return;\n \n this.focusItem(indexToFocus);\n }\n \n private getClosestActiveItemIndexForDirection(direction: 'next' \| 'previous'): number {\n const items = this.items;\n let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n const MIN_INDEX = 0;\n const MAX_INDEX = items.length - 1;\n\n if (direction === 'next' && currentIndex < MAX_INDEX) {\n currentIndex++;\n } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n currentIndex--;\n } else {\n // Used to scroll through items infinitely with keyboard\n if (direction === 'next' && currentIndex >= MAX_INDEX) {\n currentIndex = 0;\n }\n if (direction === 'previous' && currentIndex === MIN_INDEX) {\n currentIndex = MAX_INDEX;\n }\n }\n \n return currentIndex;\n }\n\n componentDidRender() {\n if (this.popper) {\n this.popper.update();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n };\n }\n \n render() {\n return (\n <Host>\n <button id=\"dropdown-button\"\n aria-controls=\"menu\"\n disabled={this.disabled}\n aria-haspopup=\"true\"\n role=\"button\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n ref={el => this.nativeButton = el}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={($event) => $event.stopImmediatePropagation()}\n {...this.inheritedAttributes}>Dropdown</button>\n <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n ref={el => this.wcsButton = el}\n aria-hidden=\"true\"\n tabindex={-1}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={(e) => e.stopImmediatePropagation()}>\n <div class=\"wcs-button-content-wrapper\">\n <slot name=\"placeholder\"/>\n {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n </div>\n </wcs-button>\n <div class={(this.expanded ? 'show ' : '') + 'popover'}\n id=\"menu\"\n role=\"menu\"\n aria-labelledby=\"dropdown-button\"\n tabindex={-1}\n ref={el => this.popoverDiv = el}>\n <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n <div role=\"presentation\" class=\"container\">\n <slot name=\"item\">\n <span id={\"is-empty\"}></span>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"wcs-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n \| CloseMenu\n \| ClearFocus\n \| FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' \| 'previous' \| 'first' \| 'last'};\n\n/*\n We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n /\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' \| 'opened'): KeyboardEventAssociatedAction[] {\n const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n if(keyboardShortcut === 'UNKNOWN') {\n return [];\n }\n\n switch (currentState) {\n case 'closed':\n // We handle every available shortcut for the closed state\n switch (keyboardShortcut) {\n case 'UP_ARROW':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n case 'DOWN_ARROW':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n case 'SPACE':\n case 'ENTER':\n return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n default:\n break;\n }\n break;\n case 'opened':\n // We handle every available shortcut for the opened state\n switch (keyboardShortcut) {\n case 'UP_ARROW':\n return [{kind: 'FocusItem', target: 'previous'}];\n case 'DOWN_ARROW':\n return [{kind: 'FocusItem', target: 'next'}];\n case 'HOME':\n return [{kind: 'FocusItem', target: 'first'}];\n case 'END':\n return [{kind: 'FocusItem', target: 'last'}];\n case 'ESCAPE':\n case 'MAJ+TAB':\n case 'TAB':\n return [{kind: 'CloseMenu'}];\n default:\n break;\n }\n break;\n default:\n throw Error('Unknown error');\n }\n return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n display: flex;\n\n --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n // Padding\n --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n // Arrow color\n --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n // Overlay\n --wcs-dropdown-overlay-max-height: 360px;\n --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n wcs-button {\n height: fit-content;\n }\n\n svg {\n margin-right: -0.25rem;\n }\n}\n\n/ Visually hide the native button /\nbutton {\n position: absolute;\n opacity: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n outline: 0;\n outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n button:focus-within + wcs-button {\n @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n }\n}\n\n.wcs-button-content-wrapper {\n display: flex;\n align-items: center;\n}\n\n.popover {\n display: none;\n border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n border-radius: var(--wcs-dropdown-overlay-border-radius);\n background-color: var(--wcs-dropdown-overlay-background-color);\n z-index: 9999;\n}\n\n.show {\n display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n min-width: calc(10 var(--wcs-semantic-size-base));\n border-radius: inherit;\n overflow: hidden;\n padding: var(--wcs-dropdown-overlay-padding);\n background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n // SVG arrow inside the button, on clear background\n .arrow {\n fill: var(--wcs-dropdown-clear-arrow-color);\n }\n}\n\n:host([mode=stroked]) {\n // SVG arrow inside the button, on stroked background\n .arrow {\n fill: var(--wcs-dropdown-stroked-arrow-color);\n }\n}\n\n:host([mode=plain]) {\n // SVG arrow inside the button, on primary background\n .arrow {\n fill: var(--wcs-dropdown-plain-arrow-color);\n }\n}\n\n:host([disabled]) {\n .arrow {\n fill: var(--wcs-dropdown-arrow-color-disabled);\n }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n visibility: hidden;\n z-index: -1;\n}\n\n#arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n}\n\n#is-empty {\n display: block;\n width: 20ch;\n padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n isWcsButtonSize,\n WcsButtonMode,\n WcsButtonShape,\n WcsButtonSize,\n WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n clickTargetIsElementOrChildren,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/*\n The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n /\n@Component({\n tag: 'wcs-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsDropdownElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n * not passing from a shadow-dom through another.\n * @private\n /\n private nativeButton!: HTMLButtonElement;\n\n /\n This button is shown on the user interface, and visually receives focus and catch click events. \n * It is hidden to screen readers since the native button carries all the aria informations.\n * @private\n /\n private wcsButton!: HTMLWcsButtonElement;\n\n /\n This div is shown on the user interface when the dropdown is expanded.\n * @private\n /\n private popoverDiv!: HTMLDivElement;\n\n /* Hides the arrow in the button /\n @Prop() noArrow: boolean = false;\n\n /* Dropdown's button mode /\n @Prop() mode: WcsButtonMode = 'stroked';\n\n /* Dropdown's button shape /\n @Prop() shape: WcsButtonShape = 'normal';\n \n /* Dropdown's button size /\n @Prop() size: WcsButtonSize = 'm';\n\n /* Specifies whether the dropdown button is clickable or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* placement of the dropdown's popover /\n @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n @State() private expanded = false;\n\n\n private popper: Instance;\n \n private lastFocusedItemElement: HTMLWcsDropdownItemElement \| null;\n \n private get items(): HTMLWcsDropdownItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n }\n\n @Watch('placement')\n protected placementChange() {\n this.popper.setOptions({\n ...this.popper.state.options,\n placement: this.placement\n }).then(_ => this.popper.update());\n }\n \n @Listen('blur')\n onBlur() {\n this.clearLastFocusedItem();\n this.expanded = false;\n }\n\n componentDidLoad() {\n if (!isWcsButtonSize(this.size)) {\n console.warn(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n this.size = \"m\"; // Default fallback value\n }\n\n this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8]\n }\n }\n ]\n });\n\n this.fixForFirefoxBelow63();\n }\n\n private fixForFirefoxBelow63() {\n // If the items appear out of the slot we place them back\n const items = this.el.querySelectorAll('wcs-dropdown-item');\n const container = this.el.querySelector('.container');\n if (items.length > 0 && container) {\n items.forEach(i => {\n this.el.removeChild(i);\n container.appendChild(i);\n });\n }\n }\n\n private onButtonClick(_: MouseEvent): void {\n this.clearLastFocusedItem();\n this.expanded = !this.expanded;\n \n if (this.expanded) {\n this.focusItem(0);\n }\n }\n\n @Listen('click', {target: 'window'})\n onWindowClickEvent(event: MouseEvent) {\n const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n if (this.expanded && !clickedOnDropdownOrChildren) {\n this.expanded = false;\n }\n }\n\n @Listen('wcsDropdownItemClick')\n dropdownItemClick(_: CustomEvent<void>) {\n this.expanded = false;\n this.nativeButton.focus();\n }\n\n @Listen('keydown')\n onKeyDown(_event: KeyboardEvent): void {\n const currentState = this.expanded ? 'opened' : 'closed';\n const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n // If we have at least one associated actions, we prevent the default behavior of the event. \n // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n if (actionsFromKeyboardEvents.length != 0) {\n _event.preventDefault();\n }\n\n for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeButton, attr, value);\n }\n\n doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n switch (actionFromKeyboardEvent.kind) {\n case 'OpenMenu':\n this.expanded = true;\n this.focusItem(0);\n break;\n case 'CloseMenu':\n this.expanded = false;\n this.nativeButton.focus();\n break;\n case 'ClearFocus':\n this.clearLastFocusedItem();\n break;\n case 'FocusItem':\n switch (actionFromKeyboardEvent.target) {\n case 'previous':\n this.focusClosestItem('previous');\n break;\n case 'next':\n this.focusClosestItem('next');\n break;\n case 'first':\n this.focusItem(0);\n break;\n case 'last':\n this.focusItem(this.items.length - 1);\n break;\n default:\n break;\n }\n break;\n default:\n break;\n }\n }\n\n /\n Removes the focus and tabindex 0 of the last focused item if any.\n * @private\n */\n private clearLastFocusedItem() {\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = -1;\n this.lastFocusedItemElement = null;\n }\n }\n \n private focusItem(indexToFocus: number) {\n this.clearLastFocusedItem();\n this.lastFocusedItemElement = this.items[indexToFocus];\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = 0;\n requestAnimationFrame(() => {\n this.lastFocusedItemElement?.focus();\n });\n }\n }\n \n private focusClosestItem(direction: 'next' \| 'previous'): void {\n const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n if (indexToFocus === -1) return;\n \n this.focusItem(indexToFocus);\n }\n \n private getClosestActiveItemIndexForDirection(direction: 'next' \| 'previous'): number {\n const items = this.items;\n let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n const MIN_INDEX = 0;\n const MAX_INDEX = items.length - 1;\n\n if (direction === 'next' && currentIndex < MAX_INDEX) {\n currentIndex++;\n } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n currentIndex--;\n } else {\n // Used to scroll through items infinitely with keyboard\n if (direction === 'next' && currentIndex >= MAX_INDEX) {\n currentIndex = 0;\n }\n if (direction === 'previous' && currentIndex === MIN_INDEX) {\n currentIndex = MAX_INDEX;\n }\n }\n \n return currentIndex;\n }\n\n componentDidRender() {\n if (this.popper) {\n this.popper.update();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n };\n }\n \n render() {\n return (\n <Host>\n <button id=\"dropdown-button\"\n aria-controls=\"menu\"\n disabled={this.disabled}\n aria-haspopup=\"true\"\n role=\"button\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n ref={el => this.nativeButton = el}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={($event) => $event.stopImmediatePropagation()}\n {...this.inheritedAttributes}>Dropdown</button>\n <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n ref={el => this.wcsButton = el}\n aria-hidden=\"true\"\n tabindex={-1}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={(e) => e.stopImmediatePropagation()}>\n <div class=\"wcs-button-content-wrapper\">\n <slot name=\"placeholder\"/>\n {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n </div>\n </wcs-button>\n <div class={(this.expanded ? 'show ' : '') + 'popover'}\n id=\"menu\"\n role=\"menu\"\n aria-labelledby=\"dropdown-button\"\n tabindex={-1}\n ref={el => this.popoverDiv = el}>\n <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n <div role=\"presentation\" class=\"container\">\n <slot name=\"item\">\n <span id={\"is-empty\"}></span>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

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

@@ -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);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: '69142544bd835d3f7f161ca5174f78b957e9c65e' }, h("div", { key: 'b0d2d5fca3fb3297ea9a66cfd715d987714b60c1', class: "label" }, this.label), h("button", { key: 'cc69601762a0f05bcfb626730ee9ac210a052c13', 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: 'eda7d88109e0b5b55d913eae61861a5c63cc79d3', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '37aa4ca56e3e52bb28b559e11738b79d0b0b7164', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: 'b2015422620aae0c7101c06d3693cf6356eba419' })), h("wcs-form-field", { key: '391ef6b73c942817994a133b191a1c81e7565fe7', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '816e06561d96bdb9ca19c27d1329a0fe8f4d581f', class: "visually-hidden" }, this.label), h("slot", { key: 'a7855da5f41a873d01298218a32991010e589e34' }), 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 CHANGED Viewed

	@@ -1 +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}
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-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 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}