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

wcs-core 7.5.0 → 7.6.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 (484) hide show

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

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

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

@@ -179,7 +179,7 @@ const FormField = class {
 };
 FormField.style = WcsFormFieldStyle0;
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
+const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline-flex;vertical-align:text-top;margin-left:var(--wcs-label-gap)}.required-marker{margin-left:4px;vertical-align:text-top;color:var(--wcs-label-required-marker-color);font-weight:var(--wcs-label-font-weight)}";
 const WcsLabelStyle0 = labelCss;
 const LABEL_INHERITED_ATTRS = ['title'];
@@ -196,7 +196,7 @@ const Label = class {
         helpers.setOrRemoveAttribute(this.nativeLabel, attr, value);
     }
     render() {
-        return (index.h(index.Host, { key: '62f8ca37637cc792483f24476dbbd63ff3c077e5', slot: "label" }, index.h("label", Object.assign({ key: '3cef9a517d57652b75af3157d2c96a34693b258f', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), index.h("slot", { key: 'a614b379b45ac3d4cc1d58c45d39b64c0312c1d7' }))));
+        return (index.h(index.Host, { key: 'bd18c1a58190a8a8ada92b47f3b77e58c89c3169', slot: "label" }, index.h("label", Object.assign({ key: '7fc3b63d96cf88eb8b31abd2b0055feebe02f696', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), index.h("slot", { key: 'b997f691e437b758f3ebe0f0899605430b10388a' }), this.required && index.h("span", { key: '529194ed383d724c570a9bca56ee23dc9b9f0fce', "aria-hidden": "true", class: "required-marker" }, "*"))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n display: flex;\n flex-direction: column;\n gap: var(--wcs-form-field-gap);\n\n .input-container {\n display: flex;\n }\n\n / Components in the prefix slot /\n ::slotted([slot=prefix]) {\n / Select /\n --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-select-control-border-width-default: 0;\n --wcs-select-control-border-style-focus: dashed;\n --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n / Native select /\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-native-select-border-width: 0;\n --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n --wcs-native-select-border-style-focus: dashed;\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n / Button /\n --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n / Components in the suffix slot /\n ::slotted([slot=suffix]) {\n --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Disabled components in the prefix slot /\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/ Hover and press states /\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n width: 100%;\n}\n\n/ Components in the center that are prefixed /\n:host(.has-prefix) {\n ::slotted(:not([slot=prefix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Components in the center that are suffixed /\n:host(.has-suffix) {\n ::slotted(:not([slot=suffix])) {\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n}\n\n/ Components in the center that are prefixed AND suffixed /\n:host(.has-prefix.has-suffix) {\n ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: 0;\n --wcs-native-select-border-radius: 0;\n }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n @State() private hasPrefix: boolean = false;\n @State() private hasSuffix: boolean = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n /\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private async updateAriaAttributes(): Promise<void> {\n if (isMutableAriaAttribute(this.spiedElement)) {\n const ariaLabelParts: string[] = [];\n if (isControlComponentWithLabel(this.spiedElement)) {\n const innerLabel = await this.spiedElement.getLabel();\n const combinedLabel = `${this.label \|\| ''} ${innerLabel \|\| ''}`.trim();\n if(combinedLabel) {\n ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n }\n } else {\n if(this.label) {\n ariaLabelParts.push(normalizeWhitespace(this.label));\n }\n }\n\n if(this.description) {\n ariaLabelParts.push(normalizeWhitespace(this.description));\n }\n \n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n if(this.error) {\n ariaLabelParts.push(normalizeWhitespace(this.error));\n }\n } else {\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n\n this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n }\n }\n \n private get label(): string \| null {\n return this.el.querySelector('wcs-label')?.textContent \|\| null;\n }\n \n private get description(): string \| null {\n return this.el.querySelector('wcs-hint')?.textContent \|\| null;\n }\n \n private get error(): string \| null {\n return this.el.querySelector('wcs-error')?.textContent \|\| null;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n gap: var(--wcs-label-gap);\n line-height: 0;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n display: flex;\n flex-direction: column;\n gap: var(--wcs-form-field-gap);\n\n .input-container {\n display: flex;\n }\n\n / Components in the prefix slot /\n ::slotted([slot=prefix]) {\n / Select /\n --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-select-control-border-width-default: 0;\n --wcs-select-control-border-style-focus: dashed;\n --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n / Native select /\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-native-select-border-width: 0;\n --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n --wcs-native-select-border-style-focus: dashed;\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n / Button /\n --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n / Components in the suffix slot /\n ::slotted([slot=suffix]) {\n --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Disabled components in the prefix slot /\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/ Hover and press states /\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n width: 100%;\n}\n\n/ Components in the center that are prefixed /\n:host(.has-prefix) {\n ::slotted(:not([slot=prefix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Components in the center that are suffixed /\n:host(.has-suffix) {\n ::slotted(:not([slot=suffix])) {\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n}\n\n/ Components in the center that are prefixed AND suffixed /\n:host(.has-prefix.has-suffix) {\n ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: 0;\n --wcs-native-select-border-radius: 0;\n }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n @State() private hasPrefix: boolean = false;\n @State() private hasSuffix: boolean = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n /\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private async updateAriaAttributes(): Promise<void> {\n if (isMutableAriaAttribute(this.spiedElement)) {\n const ariaLabelParts: string[] = [];\n if (isControlComponentWithLabel(this.spiedElement)) {\n const innerLabel = await this.spiedElement.getLabel();\n const combinedLabel = `${this.label \|\| ''} ${innerLabel \|\| ''}`.trim();\n if(combinedLabel) {\n ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n }\n } else {\n if(this.label) {\n ariaLabelParts.push(normalizeWhitespace(this.label));\n }\n }\n\n if(this.description) {\n ariaLabelParts.push(normalizeWhitespace(this.description));\n }\n \n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n if(this.error) {\n ariaLabelParts.push(normalizeWhitespace(this.error));\n }\n } else {\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n\n this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n }\n }\n \n private get label(): string \| null {\n return this.el.querySelector('wcs-label')?.textContent \|\| null;\n }\n \n private get description(): string \| null {\n return this.el.querySelector('wcs-hint')?.textContent \|\| null;\n }\n \n private get error(): string \| null {\n return this.el.querySelector('wcs-error')?.textContent \|\| null;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\nlabel {\n display: inline-block;\n \n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n\n ::slotted(wcs-mat-icon) {\n display: inline-flex;\n vertical-align: text-top;\n margin-left: var(--wcs-label-gap);\n }\n}\n\n.required-marker {\n margin-left: 4px;\n vertical-align: text-top;\n color: var(--wcs-label-required-marker-color);\n font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n /\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n {this.required && <span aria-hidden=\"true\" class=\"required-marker\"></span>}\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/wcs-grid-column.cjs.entry.js CHANGED Viewed

@@ -81,7 +81,7 @@ const GridColumn = class {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (index.h(index.Host, { key: 'e2c93e817abc5a61d6285f32779d915ff7368710', slot: "grid-column" }, index.h("th", Object.assign({ key: 'c23695b8680146e66e75ea958dc9dd9cac6056ac', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), index.h(ButtonOrDiv, { key: 'e936f0bd861b2d243071d45ccb4fa6bf8448f7a6', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, index.h("span", { key: '33e9e0238aa5cea93bff5f0522e30b7cfa787283' }, this.name), this.sort ? index.h("div", { class: "sort-arrow-container" }, index.h(GridSortArrow, { state: this.sortOrder })) : ''))));
+        return (index.h(index.Host, { key: 'dae8ba0823c68e3029faa505a061b80ae911f84a', slot: "grid-column" }, index.h("th", Object.assign({ key: '02d892d695ee9faa1f91be08c67c200aa770d489', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), index.h(ButtonOrDiv, { key: '2da3c848ac260aa272e78e52f282ff0078ecc1e1', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, index.h("span", { key: '063de5c95a3fb63444cf5e10e291252bc3474fad' }, this.name), this.sort ? index.h("div", { class: "sort-arrow-container" }, index.h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

package/dist/cjs/wcs-grid-custom-cell.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const GridCustomCell = class {
         this.rowId = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '3353e4de7a3eeb4d903a63d5adf257ed3427beb8', slot: this.columnId + '-' + this.rowId }, index.h("slot", { key: 'cc3297d327379b74a385c4909964b8371da68a97' })));
+        return (index.h(index.Host, { key: 'dd57a3792ccd2dbf7bb23f5055eb3136a06a9acb', slot: this.columnId + '-' + this.rowId }, index.h("slot", { key: '5fa475118d263c77b9ccbc1bb7e0c808b1578e87' })));
     }
 };

package/dist/cjs/wcs-grid-pagination.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const gridPagination = require('./grid-pagination-4505d7b6.js');
+const gridPagination = require('./grid-pagination-ded127cc.js');
 require('./index-6f0140d8.js');
 require('./helpers-2f1a8ddc.js');

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const gridPagination = require('./grid-pagination-4505d7b6.js');
+const gridPagination = require('./grid-pagination-ded127cc.js');
 const keyboardEvent = require('./keyboard-event-40ecdc27.js');
 const helpers = require('./helpers-2f1a8ddc.js');
-const isEqual = require('./isEqual-8a0a6936.js');
+const isEqual = require('./isEqual-be8e5a57.js');
 function getSortOrderInteger(sortOrder) {
     switch (sortOrder) {
@@ -1249,7 +1249,7 @@ const GridRadio = ({ checked, row, rowIndex, totalRows, onClick }) => {
 const gridCss = ":host{--wcs-grid-gap:0;--wcs-grid-vertical-align:middle;--wcs-grid-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-cell-text-color:var(--wcs-semantic-color-text-secondary);--wcs-grid-cell-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-cell-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-cell-border-bottom:none;--wcs-grid-cell-separator-border:none;--wcs-grid-first-cell-border-radius:0;--wcs-grid-last-cell-border-radius:0;--wcs-grid-highlight-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-grid-row-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-grid-row-odd-background-color:var(--wcs-grid-row-background-color);--wcs-grid-row-even-background-color:var(--wcs-semantic-color-background-surface-accent-lightest);--wcs-grid-header-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-header-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-grid-header-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-grid-header-text-color:var(--wcs-semantic-color-text-primary);--wcs-grid-header-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-grid-header-font-size:var(--wcs-semantic-font-size-label-1);--wcs-grid-header-line-height:var(--wcs-primitive-font-line-height-140);--wcs-grid-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-header-border-left:none;--wcs-grid-header-border-radius:0;--wcs-grid-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-grid-header-transition-duration:var(--wcs-semantic-motion-duration-feedback-fast);--wcs-grid-first-header-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-first-header-border-radius:0;--wcs-grid-last-header-border-radius:0;--wcs-grid-column-selection-width:calc(5 * var(--wcs-semantic-spacing-base));--wcs-grid-header-sort-arrow-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-grid-header-sort-arrow-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);display:block}:host th{border-radius:var(--wcs-grid-first-header-border-radius);background-color:var(--wcs-grid-first-header-background-color)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-header-border-left:none}:host :host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-component-grid-header-border-radius-first:0;--wcs-grid-header-border-left:var(--wcs-grid-header-border-left)}:host table{width:100%;border-collapse:collapse;border-spacing:var(--wcs-grid-gap)}:host table thead{border-bottom:var(--wcs-grid-header-border-bottom)}:host table tbody{vertical-align:var(--wcs-grid-vertical-align)}:host td{color:var(--wcs-grid-cell-text-color);margin:0;padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal)}:host td:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}:host td:first-child{border-radius:var(--wcs-grid-first-cell-border-radius)}:host td:last-child{border-radius:var(--wcs-grid-last-cell-border-radius)}:host td:not(:first-child){border-left:var(--wcs-grid-cell-separator-border)}:host tr{background-color:var(--wcs-grid-row-background-color)}:host tr:nth-child(odd){background-color:var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color))}:host tr:nth-child(even){background-color:var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color))}:host tr:not(:last-child) td{border-bottom:var(--wcs-grid-cell-border-bottom)}:host .wcs-grid-selection-column{padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);width:var(--wcs-grid-column-selection-width);text-align:start}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}";
 const WcsGridStyle0 = gridCss;
-const gridRadioCss = ".grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:\"\";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}";
+const gridRadioCss = ".grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);position:relative;}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:\"\";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}";
 const WcsGridStyle1 = gridRadioCss;
 const GRID_INHERITED_ATTRS = ['title'];
@@ -1706,12 +1706,12 @@ const Grid = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '1e9b1d5dc405c67428750276de3e38e8e163d20e' }, index.h("table", Object.assign({ key: '42e610c403c108f36c2f5e4eb276b9e1c6349b8c', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), index.h("thead", { key: '365bf4de9329c94c5c891040b14ca844c6e8fd99' }, index.h("tr", { key: '9d1e4c4cf0418f585679a055edbb88ca08493d3d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (index.h(index.Host, { key: 'b19822a50c13e2c45df1457d9e7a5100b2ba62ef' }, index.h("table", Object.assign({ key: '26b9e13d87544a151d6b31e6019f44f980541153', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), index.h("thead", { key: '1e5a328e858cbf3a6ad29e2db070c4c44c67bfe5' }, index.h("tr", { key: '121c5b20769d31b4366b3c563fd3fce695f6ef83', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : index.h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 index.h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { key: '4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3', name: "grid-column" }))), index.h("tbody", { key: '5758c76c248e9e54759bd008310047a5c670339a' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { key: '20977331e2ea13fae89d239155d9800764dd2695', name: "grid-column" }))), index.h("tbody", { key: '6587df7ab7251139904249def1a347f3e6718f70' }, this.loading
             ? index.h("tr", { "aria-busy": "true" }, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), index.h("slot", { key: '170e79b086e8235ae736c8cc54512b0e3bb0e7ab', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), index.h("slot", { key: '134dcd235b562cd2734889cfd6eb43e4eda012ad', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.