npm - @govtechsg/sgds-web-component - Versions diffs - 3.28.1-rc.0 → 3.29.1-rc.0 - Mend

@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.1-rc.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 (195) hide show

package/react/components/ComboBox/sgds-combo-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-combo-box.js","names":["formTextControlStyle","comboBoxStyle"],"sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail } from \"./types\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxInputEventDetail };\n\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n * @event sgds-scroll-end - Emitted once when the menu is scrolled to within `scrollBottomOffset` pixels of the bottom. Resets when the user scrolls back up.\n /\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n static childName = \"sgds-combo-box-option\";\n /* @internal /\n static dependencies = {\n [SgdsComboBox.childName]: SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge,\n \"sgds-spinner\": SgdsSpinner\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* If true, a clear button will be enabled on focus /\n @property({ type: Boolean, reflect: true }) clearable = false;\n\n /* Disables native and sgds validation for the combo box. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. /\n @property({ type: Boolean, reflect: true }) async = false;\n\n /* When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. /\n @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n /* Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. /\n @property({ type: Number, reflect: true }) scrollBottomOffset = 0;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() private optionList: SgdsComboBoxOptionData[] = [];\n @state() private emptyMenuAfterFiltering = false;\n\n // Used to show and hide the clear button\n @state() protected isFocused = false;\n\n // Used to determine if the scroll reached the end with offset\n @state() protected isScrollEnd = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener(\"focus\", async () => {\n this.isFocused = true;\n });\n\n this.addEventListener(\"blur\", async () => {\n this.isFocused = false;\n });\n\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === \"Enter\" &&\n (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n ) {\n this._handleClear();\n }\n });\n\n this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n if (!e.detail.isOutside) {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n }\n\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n // reset emptyMenu state\n this.emptyMenuAfterFiltering = false;\n });\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.async) this.filterFunction = () => true;\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n if (this.menuIsOpen) {\n await this.updateFloatingPosition();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n flatten: true\n }) as ComboBoxOptionWithFlag[];\n\n assignedElements.forEach(option => {\n // Handling of click events\n if (option.hasAttribute(\"disabled\")) return false;\n if (option.clickEventAdded) return false;\n option.addEventListener(\"click\", (evt: PointerEvent) => {\n evt.preventDefault();\n const optionTarget = evt.target as SgdsComboBoxOption;\n\n if (this.multiSelect) {\n optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n } else {\n this._handleItemSelected(evt);\n }\n\n return false;\n });\n option.clickEventAdded = true;\n option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Enter\") {\n this.close = \"outside\";\n const optionTarget = evt.target as SgdsComboBoxOption;\n optionTarget.click();\n }\n });\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n this.optionList = await this._getMenuListFromOptions(assignedElements);\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n }\n /* We want to run validation regardless of value or list present /\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n this._mixinValidate(this.input);\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n if (this._mixinShouldSkipSgdsValidation()) return;\n this.invalid = !this._mixinReportValidity();\n }\n\n /* Emits sgds-change and sgds-select events. Call after setting this.value from user interaction. /\n private _emitChangeEvents() {\n this._mixinSetFormValue();\n this.emit(\"sgds-change\");\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n if (!this.multiSelect && !this.async) {\n this.displayValue = initialSelectedItem[0]?.label \|\| \"\";\n }\n\n this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n protected async _handleInputChange(e: CustomEvent) {\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n this.invalid = false;\n this.showMenu();\n // reset menu list when displayValue is cleared\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n this._emitChangeEvents();\n }\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // Filtering for slots\n this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n }\n\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n itemEl.active = true;\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n itemEl.active = true;\n\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n }\n this._emitChangeEvents();\n }\n\n private _handleItemUnselect(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n itemEl.removeAttribute(\"active\");\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n\n this.emit(\"sgds-blur\");\n\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n // For clearing the value\n protected async _handleClear() {\n this.value = this.displayValue = \"\";\n this.options?.forEach(o => (o.active = false));\n this._emitChangeEvents();\n\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.showMenu();\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n\n /\n Handles scroll events on the menu. Emits `sgds-scroll-end` once when the\n * scroll position reaches within `scrollBottomOffset` pixels of the bottom.\n * The event is suppressed until the user scrolls back up, preventing repeated\n * emissions while the menu stays at the bottom.\n /\n private async _handleScroll(e: MouseEvent) {\n const ele = e.target as HTMLElement;\n if (ele) {\n const endOfScroll = ele.scrollHeight - ele.clientHeight;\n const offset = Math.max(0, this.scrollBottomOffset);\n\n if (ele.scrollTop >= endOfScroll - offset) {\n if (!this.isScrollEnd) {\n this.emit(\"sgds-scroll-end\");\n }\n this.isScrollEnd = true;\n } else {\n this.isScrollEnd = false;\n }\n }\n }\n\n /* Template for the suffix icon /\n protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n size=\"md\"\n ></sgds-icon>`;\n\n protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n */\n protected _renderInput(showClearButton: boolean): TemplateResult {\n const wantFeedbackStyle = this.hasFeedback;\n const showButton = showClearButton;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n ${this.prefixIconTemplate}\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n ?dismissible=${!(this.readonly \|\| this.disabled)}\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n .autocomplete=${this.autocomplete}\n />\n </div>\n\n ${showButton\n ? html`\n <sgds-icon\n id=${`${this._controlId}-combobox-clear-button`}\n tabindex=\"0\"\n class=\"form-clearable\"\n name=\"xcircle-fill\"\n size=\"md\"\n @click=${this._handleClear}\n aria-label=\"Clear selections\"\n role=\"button\"\n ></sgds-icon>\n `\n : nothing}\n ${this.suffixIconTemplate}\n </div>\n `;\n }\n\n protected _renderFeedbackMenu() {\n if (this.loading) {\n return this._renderLoadingMenu();\n }\n // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n if (this.async) {\n return this.emptyMenuAsync \|\| this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n } else {\n return this.optionList.length === 0 \|\| // no options at all\n (this.emptyMenuAfterFiltering && this.optionList.length > 0) // check if filtering results in empty menu\n ? this._renderEmptyMenu()\n : nothing;\n }\n }\n\n render() {\n const showClearButton =\n (this.isFocused \|\| this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n return html`\n <div\n class=${classMap({\n \"form-control-container\": true,\n \"m-width-256\": true,\n disabled: this.disabled,\n combobox: true\n })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n <div\n id=${this.dropdownMenuId}\n class=\"dropdown-menu\"\n tabindex=\"-1\"\n role=\"menu\"\n aria-label=${this.label \|\| \"Options\"}\n ${ref(this.menuRef)}\n @scroll=${this._handleScroll}\n >\n <slot\n id=\"default\"\n class=${classMap({ \"d-none\": this.loading \|\| this.emptyMenuAsync \|\| this.optionList.length === 0 })}\n @slotchange=${this._handleDefaultSlotChange}\n ></slot>\n ${this._renderFeedbackMenu()}\n </div>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .autocomplete=${this.autocomplete}\n />`\n : nothing}\n `;\n }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-combo-box.js","names":["formTextControlStyle","comboBoxStyle"],"sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail, ISgdsComboBoxCreateOptionEventDetail } from \"./types\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxCreateOptionEventDetail, ISgdsComboBoxInputEventDetail };\n\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n * @slot create - Custom content for the \"Create\" option shown when `creatable` is true and no match is found. Use `sgds-input` event to dynamically update the slotted content with the current input value.\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n * @event sgds-scroll-end - Emitted once when the menu is scrolled to within `scrollBottomOffset` pixels of the bottom. Resets when the user scrolls back up.\n * @event sgds-create-option - Emitted when the user selects the \"Create xxx\" option. `event.detail = { value }`\n * @eventDetail {ISgdsComboBoxCreateOptionEventDetail} sgds-create-option\n /\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n static childName = \"sgds-combo-box-option\";\n /* @internal /\n static dependencies = {\n [SgdsComboBox.childName]: SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge,\n \"sgds-spinner\": SgdsSpinner\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* If true, a clear button will be enabled on focus /\n @property({ type: Boolean, reflect: true }) clearable = false;\n\n /* Disables native and sgds validation for the combo box. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. /\n @property({ type: Boolean, reflect: true }) async = false;\n\n /* When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. /\n @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n /* When true, shows a \"Create xxx\" option when the typed value does not match any existing option. Selecting it emits the `sgds-create-option` event. /\n @property({ type: Boolean, reflect: true }) creatable = false;\n\n /* Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. /\n @property({ type: Number, reflect: true }) scrollBottomOffset = 0;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() private optionList: SgdsComboBoxOptionData[] = [];\n @state() private emptyMenuAfterFiltering = false;\n\n // Used to show and hide the clear button\n @state() protected isFocused = false;\n\n // Used to determine if the scroll reached the end with offset\n @state() protected isScrollEnd = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener(\"focus\", async () => {\n this.isFocused = true;\n });\n\n this.addEventListener(\"blur\", async () => {\n this.isFocused = false;\n });\n\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === \"Enter\" &&\n (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n ) {\n this._handleClear();\n }\n });\n\n this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n if (!e.detail.isOutside) {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n }\n\n this.options.forEach(o => {\n o.removeAttribute(\"hidden\");\n });\n // reset emptyMenu state\n this.emptyMenuAfterFiltering = false;\n });\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.async) this.filterFunction = () => true;\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n if (this.menuIsOpen) {\n await this.updateFloatingPosition();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n flatten: true\n }) as ComboBoxOptionWithFlag[];\n\n assignedElements.forEach(option => {\n // Handling of click events\n if (option.hasAttribute(\"disabled\")) return false;\n if (option.clickEventAdded) return false;\n\n option.addEventListener(\"click\", (evt: PointerEvent) => {\n evt.preventDefault();\n const optionTarget = evt.target as SgdsComboBoxOption;\n\n if (this.multiSelect) {\n optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n } else {\n this._handleItemSelected(evt);\n }\n\n return false;\n });\n option.clickEventAdded = true;\n option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Enter\") {\n this.close = \"outside\";\n const optionTarget = evt.target as SgdsComboBoxOption;\n optionTarget.click();\n }\n });\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n const realOptions = assignedElements;\n this.optionList = await this._getMenuListFromOptions(realOptions);\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n }\n /* We want to run validation regardless of value or list present /\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n this._mixinValidate(this.input);\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n this.options.forEach(o => {\n o.removeAttribute(\"hidden\");\n });\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n if (this._mixinShouldSkipSgdsValidation()) return;\n this.invalid = !this._mixinReportValidity();\n }\n\n /* Emits sgds-change and sgds-select events. Call after setting this.value from user interaction. /\n private _emitChangeEvents() {\n this._mixinSetFormValue();\n this.emit(\"sgds-change\");\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n if (!this.multiSelect && !this.async) {\n this.displayValue = initialSelectedItem[0]?.label \|\| \"\";\n }\n\n this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n protected async _handleInputChange(e: CustomEvent) {\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n this.invalid = false;\n this.showMenu();\n // reset menu list when displayValue is cleared\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n this._emitChangeEvents();\n }\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const realOptions = this.options;\n const optionList = realOptions.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // Filtering for slots\n this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n this._syncCreateOption();\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n }\n\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n itemEl.active = true;\n this.displayValue = \"\";\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n itemEl.active = true;\n\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n }\n this._emitChangeEvents();\n }\n\n private _handleItemUnselect(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n itemEl.removeAttribute(\"active\");\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n this._emitChangeEvents();\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n\n this.emit(\"sgds-blur\");\n\n // When focus is moving to an element inside this component (e.g. keyboard nav to an option),\n // preserve the typed input. If focus moves outside, clear as usual.\n const relatedTarget = (e as FocusEvent).relatedTarget as Node \| null;\n if (\n (this.creatable \|\| this.multiSelect) &&\n relatedTarget &&\n (this.contains(relatedTarget) \|\| this.shadowRoot?.contains(relatedTarget))\n )\n return;\n\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n // For clearing the value\n protected async _handleClear() {\n this.value = this.displayValue = \"\";\n this.options?.forEach(o => (o.active = false));\n this._emitChangeEvents();\n\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.showMenu();\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n\n /\n Handles scroll events on the menu. Emits `sgds-scroll-end` once when the\n * scroll position reaches within `scrollBottomOffset` pixels of the bottom.\n * The event is suppressed until the user scrolls back up, preventing repeated\n * emissions while the menu stays at the bottom.\n /\n private async _handleScroll(e: MouseEvent) {\n const ele = e.target as HTMLElement;\n if (ele) {\n const endOfScroll = ele.scrollHeight - ele.clientHeight;\n const offset = Math.max(0, this.scrollBottomOffset);\n\n if (ele.scrollTop >= endOfScroll - offset) {\n if (!this.isScrollEnd) {\n this.emit(\"sgds-scroll-end\");\n }\n this.isScrollEnd = true;\n } else {\n this.isScrollEnd = false;\n }\n }\n }\n\n /* Template for the suffix icon /\n protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n size=\"md\"\n ></sgds-icon>`;\n\n protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n /\n protected _renderInput(showClearButton: boolean): TemplateResult {\n const wantFeedbackStyle = this.hasFeedback;\n const showButton = showClearButton;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n ${this.prefixIconTemplate}\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n ?dismissible=${!(this.readonly \|\| this.disabled)}\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n .autocomplete=${this.autocomplete}\n />\n </div>\n\n ${showButton\n ? html`\n <sgds-icon\n id=${`${this._controlId}-combobox-clear-button`}\n tabindex=\"0\"\n class=\"form-clearable\"\n name=\"xcircle-fill\"\n size=\"md\"\n @click=${this._handleClear}\n aria-label=\"Clear selections\"\n role=\"button\"\n ></sgds-icon>\n `\n : nothing}\n ${this.suffixIconTemplate}\n </div>\n `;\n }\n\n /* Slotted elements from the `create-option` named slot. /\n private _createOptionSlotContent: Element[] = [];\n\n /* The typed value captured when the create option was last synced. /\n private _createOptionValue = \"\";\n\n /* Whether the shadow-DOM create-option container is visible. /\n @state() private _showCreateOption = false;\n\n /* Updates visibility of the create-option container based on creatable + filter state. /\n private _syncCreateOption() {\n this._showCreateOption = this.creatable && this.emptyMenuAfterFiltering && this.displayValue !== \"\";\n if (this._showCreateOption) {\n this._createOptionValue = this.displayValue;\n }\n }\n\n /* Handles slotchange for the create-option named slot. /\n private _handleCreateOptionSlotChange(e: Event) {\n this._createOptionSlotContent = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n }\n\n /* Click handler for the create-option container. Lets interactive slotted elements (links, buttons) pass through. /\n private _handleCreateOptionClick(evt: Event) {\n const target = evt.composedPath()[0] as HTMLElement;\n if (target.closest?.(\"a, button\")) return;\n\n this.emit<ISgdsComboBoxCreateOptionEventDetail>(\"sgds-create-option\", {\n detail: { value: this._createOptionValue }\n });\n this.emptyMenuAfterFiltering = false;\n this._syncCreateOption();\n this.hideMenu();\n }\n\n /* Keydown handler for the create-option container. /\n private _handleCreateOptionKeydown(evt: KeyboardEvent) {\n if (evt.key === \"Enter\") {\n this._handleCreateOptionClick(evt);\n return;\n }\n // ArrowUp from create option → focus last menu item\n if (evt.key === \"ArrowUp\") {\n evt.preventDefault();\n const items = this._getActiveMenuItems();\n if (items.length > 0) {\n this._setMenuItem(items.length - 1);\n }\n return;\n }\n // ArrowDown from create option → wrap to first menu item\n if (evt.key === \"ArrowDown\") {\n evt.preventDefault();\n const items = this._getActiveMenuItems();\n if (items.length > 0) {\n this._setMenuItem(0);\n }\n }\n }\n\n /* Override base keyboard handler to include create-option in ArrowDown/Tab navigation. */\n protected override _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n // When create-option div is focused, let Tab pass through naturally so it can reach\n // interactive elements inside slotted content (e.g. links)\n const createDiv = this.shadowRoot?.querySelector(\".create-option\") as HTMLElement;\n if (createDiv?.matches(\":focus\") && e.key === \"Tab\") {\n return;\n }\n\n if (this._showCreateOption && (e.key === \"ArrowDown\" \|\| (e.key === \"Tab\" && !e.shiftKey))) {\n const items = this._getActiveMenuItems();\n if (items.length > 0) {\n const lastItem = items[items.length - 1];\n const lastItemFocused = lastItem.shadowRoot?.querySelector(\".dropdown-item\")?.matches(\":focus\");\n if (lastItemFocused) {\n e.preventDefault();\n createDiv?.focus();\n return;\n }\n }\n // When no items exist but create option is visible (empty filter), focus it\n if (items.length === 0) {\n e.preventDefault();\n createDiv?.focus();\n return;\n }\n }\n super._handleKeyboardMenuItemsEvent(e);\n }\n\n protected _renderFeedbackMenu() {\n if (this.loading) {\n return this._renderLoadingMenu();\n }\n // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n if (this.async) {\n return this.emptyMenuAsync \|\| this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n } else {\n // When creatable, the create option is a slotted element — skip \"No options\"\n if (this.creatable && this.emptyMenuAfterFiltering && this.optionList.length > 0) {\n return nothing;\n }\n return this.optionList.length === 0 \|\| (this.emptyMenuAfterFiltering && this.optionList.length > 0)\n ? this._renderEmptyMenu()\n : nothing;\n }\n }\n\n render() {\n const showClearButton =\n (this.isFocused \|\| this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n return html`\n <div\n class=${classMap({\n \"form-control-container\": true,\n \"m-width-256\": true,\n disabled: this.disabled,\n combobox: true\n })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n <div\n id=${this.dropdownMenuId}\n class=\"dropdown-menu\"\n tabindex=\"-1\"\n role=\"menu\"\n aria-label=${this.label \|\| \"Options\"}\n ${ref(this.menuRef)}\n @scroll=${this._handleScroll}\n >\n <slot\n id=\"default\"\n class=${classMap({ \"d-none\": this.loading \|\| this.emptyMenuAsync \|\| this.optionList.length === 0 })}\n @slotchange=${this._handleDefaultSlotChange}\n ></slot>\n ${this._showCreateOption\n ? html`<div\n class=${classMap({ \"create-option\": true, slotted: this._createOptionSlotContent.length > 0 })}\n tabindex=\"0\"\n role=\"option\"\n @click=${this._handleCreateOptionClick}\n @keydown=${this._handleCreateOptionKeydown}\n >\n ${this._createOptionSlotContent.length > 0\n ? html`<slot name=\"create\" @slotchange=${this._handleCreateOptionSlotChange}></slot>`\n : `Create \"${this.displayValue}\"`}\n </div>`\n : html`<slot name=\"create\" class=\"d-none\" @slotchange=${this._handleCreateOptionSlotChange}></slot>`}\n ${this._renderFeedbackMenu()}\n </div>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .autocomplete=${this.autocomplete}\n />`\n : nothing}\n `;\n }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"mappings":"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"}

package/react/components/DataTable/data-table.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/DataTable/data-table.css
-var css_248z = require("lit").css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}`;
+var css_248z = require("lit").css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}.visually-hidden{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 //#endregion
 exports.default = css_248z;

package/react/components/DataTable/data-table.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.cjs.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below /\n:host {\n display: contents;\n}\n\n/ ── sgds-data-table ──────────────────────────────────────────── /\n:host([layout=\"fixed\"]) .table {\n table-layout: fixed;\n}\n\n.table {\n display: table;\n width: 100%;\n table-layout: auto;\n border-collapse: collapse;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\n.data-table {\n display: flex;\n flex-direction: column;\n min-height: var(--sgds-dimension-56);\n border: var(--sgds-border-width-1) solid;\n border-color: var(--sgds-border-color-muted);\n border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n display: table-row;\n}\n\n.skeleton-cell {\n display: table-cell;\n vertical-align: middle;\n height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n.no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--sgds-dimension-128);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n color: var(--sgds-text-color-subtle);\n}\n\n/ hover / expanded states — set CSS custom property on the row host,\n cells inherit it across the shadow boundary /\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n background-color: var(--sgds-bg-translucent-subtle);\n transition: background-color 0.15s ease;\n}\n\n/ ── sgds-data-table-cell / sgds-data-table-head ─────────────── /\ntd,\nth {\n vertical-align: middle;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\n display: flex;\n align-items: center;\n min-height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n font-family: var(--sgds-font-family-brand);\n font-size: var(--sgds-font-size-label-sm);\n font-style: normal;\n line-height: var(--sgds-line-height-2-xs);\n letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n color: var(--sgds-color-default);\n font-weight: var(--sgds-font-weight-semibold);\n gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-semibold);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-regular);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n}\n\n.sort-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sgds-dimension-20);\n height: var(--sgds-dimension-20);\n padding: 0;\n border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n border-radius: var(--sgds-form-border-radius-sm);\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-subtle);\n cursor: pointer;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n background-color: var(--sgds-bg-translucent-subtle);\n border-color: transparent;\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-muted);\n cursor: not-allowed;\n}\n\n.sort-button.active {\n background-color: var(--sgds-primary-surface-translucent);\n color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n display: inline-flex;\n}\n\n.data-table-head.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.data-table-cell.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n/ control cell variants — applied as classes on the host /\n.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n padding: var(--sgds-padding-md);\n cursor: pointer;\n}\n\n/ ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n padding: 0;\n border: 0;\n}\n\n.expandable-content {\n background-color: var(--sgds-surface-raised);\n padding: var(--sgds-padding-2-xl);\n padding-left: var(--sgds-padding-4-xl);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n display: none;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"data-table.cjs.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below /\n:host {\n display: contents;\n}\n\n/ ── sgds-data-table ──────────────────────────────────────────── /\n:host([layout=\"fixed\"]) .table {\n table-layout: fixed;\n}\n\n.table {\n display: table;\n width: 100%;\n table-layout: auto;\n border-collapse: collapse;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\n.data-table {\n display: flex;\n flex-direction: column;\n min-height: var(--sgds-dimension-56);\n border: var(--sgds-border-width-1) solid;\n border-color: var(--sgds-border-color-muted);\n border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n display: table-row;\n}\n\n.skeleton-cell {\n display: table-cell;\n vertical-align: middle;\n height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n.no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--sgds-dimension-128);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n color: var(--sgds-text-color-subtle);\n}\n\n/ hover / expanded states — set CSS custom property on the row host,\n cells inherit it across the shadow boundary /\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n background-color: var(--sgds-bg-translucent-subtle);\n transition: background-color 0.15s ease;\n}\n\n/ ── sgds-data-table-cell / sgds-data-table-head ─────────────── /\ntd,\nth {\n vertical-align: middle;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\n display: flex;\n align-items: center;\n min-height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n font-family: var(--sgds-font-family-brand);\n font-size: var(--sgds-font-size-label-sm);\n font-style: normal;\n line-height: var(--sgds-line-height-2-xs);\n letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n color: var(--sgds-color-default);\n font-weight: var(--sgds-font-weight-semibold);\n gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-semibold);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-regular);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n}\n\n.sort-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sgds-dimension-20);\n height: var(--sgds-dimension-20);\n padding: 0;\n border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n border-radius: var(--sgds-form-border-radius-sm);\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-subtle);\n cursor: pointer;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n background-color: var(--sgds-bg-translucent-subtle);\n border-color: transparent;\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-muted);\n cursor: not-allowed;\n}\n\n.sort-button.active {\n background-color: var(--sgds-primary-surface-translucent);\n color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n display: inline-flex;\n}\n\n.data-table-head.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.data-table-cell.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n/ control cell variants — applied as classes on the host /\n.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n padding: var(--sgds-padding-md);\n cursor: pointer;\n}\n\n/ ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n padding: 0;\n border: 0;\n}\n\n.expandable-content {\n background-color: var(--sgds-surface-raised);\n padding: var(--sgds-padding-2-xl);\n padding-left: var(--sgds-padding-4-xl);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n display: none;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n"],"mappings":""}

package/react/components/DataTable/data-table.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/DataTable/data-table.css
-var css_248z = css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}`;
+var css_248z = css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}.visually-hidden{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 //#endregion
 export { css_248z as default };

package/react/components/DataTable/data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below /\n:host {\n display: contents;\n}\n\n/ ── sgds-data-table ──────────────────────────────────────────── /\n:host([layout=\"fixed\"]) .table {\n table-layout: fixed;\n}\n\n.table {\n display: table;\n width: 100%;\n table-layout: auto;\n border-collapse: collapse;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\n.data-table {\n display: flex;\n flex-direction: column;\n min-height: var(--sgds-dimension-56);\n border: var(--sgds-border-width-1) solid;\n border-color: var(--sgds-border-color-muted);\n border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n display: table-row;\n}\n\n.skeleton-cell {\n display: table-cell;\n vertical-align: middle;\n height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n.no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--sgds-dimension-128);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n color: var(--sgds-text-color-subtle);\n}\n\n/ hover / expanded states — set CSS custom property on the row host,\n cells inherit it across the shadow boundary /\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n background-color: var(--sgds-bg-translucent-subtle);\n transition: background-color 0.15s ease;\n}\n\n/ ── sgds-data-table-cell / sgds-data-table-head ─────────────── /\ntd,\nth {\n vertical-align: middle;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\n display: flex;\n align-items: center;\n min-height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n font-family: var(--sgds-font-family-brand);\n font-size: var(--sgds-font-size-label-sm);\n font-style: normal;\n line-height: var(--sgds-line-height-2-xs);\n letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n color: var(--sgds-color-default);\n font-weight: var(--sgds-font-weight-semibold);\n gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-semibold);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-regular);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n}\n\n.sort-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sgds-dimension-20);\n height: var(--sgds-dimension-20);\n padding: 0;\n border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n border-radius: var(--sgds-form-border-radius-sm);\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-subtle);\n cursor: pointer;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n background-color: var(--sgds-bg-translucent-subtle);\n border-color: transparent;\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-muted);\n cursor: not-allowed;\n}\n\n.sort-button.active {\n background-color: var(--sgds-primary-surface-translucent);\n color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n display: inline-flex;\n}\n\n.data-table-head.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.data-table-cell.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n/ control cell variants — applied as classes on the host /\n.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n padding: var(--sgds-padding-md);\n cursor: pointer;\n}\n\n/ ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n padding: 0;\n border: 0;\n}\n\n.expandable-content {\n background-color: var(--sgds-surface-raised);\n padding: var(--sgds-padding-2-xl);\n padding-left: var(--sgds-padding-4-xl);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n display: none;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"data-table.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below /\n:host {\n display: contents;\n}\n\n/ ── sgds-data-table ──────────────────────────────────────────── /\n:host([layout=\"fixed\"]) .table {\n table-layout: fixed;\n}\n\n.table {\n display: table;\n width: 100%;\n table-layout: auto;\n border-collapse: collapse;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\n.data-table {\n display: flex;\n flex-direction: column;\n min-height: var(--sgds-dimension-56);\n border: var(--sgds-border-width-1) solid;\n border-color: var(--sgds-border-color-muted);\n border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n display: table-row;\n}\n\n.skeleton-cell {\n display: table-cell;\n vertical-align: middle;\n height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n.no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--sgds-dimension-128);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n color: var(--sgds-text-color-subtle);\n}\n\n/ hover / expanded states — set CSS custom property on the row host,\n cells inherit it across the shadow boundary /\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n background-color: var(--sgds-bg-translucent-subtle);\n transition: background-color 0.15s ease;\n}\n\n/ ── sgds-data-table-cell / sgds-data-table-head ─────────────── /\ntd,\nth {\n vertical-align: middle;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\n display: flex;\n align-items: center;\n min-height: var(--sgds-dimension-56);\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n font-family: var(--sgds-font-family-brand);\n font-size: var(--sgds-font-size-label-sm);\n font-style: normal;\n line-height: var(--sgds-line-height-2-xs);\n letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n color: var(--sgds-color-default);\n font-weight: var(--sgds-font-weight-semibold);\n gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-semibold);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n font-size: var(--sgds-font-size-label-sm);\n font-weight: var(--sgds-font-weight-regular);\n line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n}\n\n.sort-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sgds-dimension-20);\n height: var(--sgds-dimension-20);\n padding: 0;\n border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n border-radius: var(--sgds-form-border-radius-sm);\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-subtle);\n cursor: pointer;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n background-color: var(--sgds-bg-translucent-subtle);\n border-color: transparent;\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n background-color: var(--sgds-bg-transparent);\n color: var(--sgds-color-muted);\n cursor: not-allowed;\n}\n\n.sort-button.active {\n background-color: var(--sgds-primary-surface-translucent);\n color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n display: inline-flex;\n}\n\n.data-table-head.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.data-table-cell.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n/ control cell variants — applied as classes on the host /\n.control-cell {\n width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n padding: var(--sgds-padding-md);\n cursor: pointer;\n}\n\n/ ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n padding: 0;\n border: 0;\n}\n\n.expandable-content {\n background-color: var(--sgds-surface-raised);\n padding: var(--sgds-padding-2-xl);\n padding-left: var(--sgds-padding-4-xl);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n display: none;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n"],"mappings":""}

package/react/components/DataTable/sgds-data-table-row.cjs.js CHANGED Viewed

@@ -179,7 +179,7 @@ var SgdsDataTableRow = class extends require_sgds_element.default {
     </td>`;
 	}
 	_renderExpandCell() {
-		if (this._isHeaderRow) return lit.html`<th class="control-cell" scope="col"></th>`;
+		if (this._isHeaderRow) return lit.html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>`;
 		return lit.html`<td class="control-cell" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex="0">
       <div class="data-table-cell expand-cell">
         <sgds-icon name=${this.open ? "chevron-up" : "chevron-down"} size="md"></sgds-icon>
@@ -187,16 +187,24 @@ var SgdsDataTableRow = class extends require_sgds_element.default {
     </td>`;
 	}
 	_renderExpandPlaceholder() {
-		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col"></th>` : lit.html`<td class="control-cell"></td>`;
+		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>` : lit.html`<td class="control-cell"></td>`;
 	}
 	_renderCheckboxCell() {
 		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select all rows"}
+            ></sgds-checkbox>
           </div>
         </th>` : lit.html`<td class="control-cell">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select row"}
+            ></sgds-checkbox>
           </div>
         </td>`;
 	}

package/react/components/DataTable/sgds-data-table-row.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-data-table-row.cjs.js","names":["SgdsElement","tableRowStyle","SgdsCheckbox","SgdsDataTableCell","SgdsDataTableHead","SgdsIcon","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","ifDefined","nothing","property","query","state","watch","setDefaultAnimation"],"sources":["../../../../src/components/DataTable/sgds-data-table-row.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport tableRowStyle from \"./data-table.css\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport { SgdsIcon } from \"../Icon/sgds-icon\";\n\n/*\n @summary A data table row. Set `expand` to enable an expandable content area beneath\n * the row, then place detail content in the `content` slot.\n \n @slot default - Insert `sgds-data-table-cell` or `sgds-data-table-head` elements.\n * @slot content - Content shown in the animated expand area beneath the row.\n \n @event sgds-show - Emitted when the expandable row begins to open.\n * @event sgds-after-show - Emitted after the expandable row open animation completes.\n * @event sgds-hide - Emitted when the expandable row begins to close.\n * @event sgds-after-hide - Emitted after the expandable row close animation completes.\n /\nexport class SgdsDataTableRow extends SgdsElement {\n static styles = [...SgdsElement.styles, tableRowStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-checkbox\": SgdsCheckbox,\n \"sgds-data-table-cell\": SgdsDataTableCell,\n \"sgds-data-table-head\": SgdsDataTableHead,\n \"sgds-icon\": SgdsIcon\n };\n\n /* When true, the row has an expandable content area toggled by a chevron. /\n @property({ type: Boolean, reflect: true }) expand = false;\n\n /* When true, the expandable content area is open. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /* When true, the row is checked. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* @internal — set by `sgds-data-table` to show a checkbox cell on this row. /\n @property({ type: Boolean }) showCheckbox = false;\n\n /* @internal — set by `sgds-data-table` when at least one sibling row is expandable. /\n @property({ type: Boolean }) showExpandPlaceholder = false;\n\n /* @internal — per-column alignment injected by `sgds-data-table` from header cells. /\n @property({ attribute: false }) columnAlignments: Array<\"left\" \| \"right\"> = [];\n\n /* @internal — set by `sgds-data-table` to indicate whether body rows exist. /\n @property({ type: Boolean }) hasDataRows = false;\n\n /* @internal /\n @query(\".expandable-body\") private _expandableBody!: HTMLElement;\n\n /* @internal /\n @query(\"sgds-checkbox\") private _checkboxEl!: SgdsCheckbox;\n\n @state() private _isHeaderRow = false;\n private _cellSlotNames = new WeakMap<SgdsDataTableCell \| SgdsDataTableHead, string>();\n private _lightDomObserver?: MutationObserver;\n\n /* The checkbox rendered inside this row, if `showCheckbox` is true. /\n get checkbox(): SgdsCheckbox \| null {\n return this._checkboxEl ?? null;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._lightDomObserver = new MutationObserver(() => this._handleLightDomChange());\n this._lightDomObserver.observe(this, { childList: true });\n this._handleLightDomChange();\n }\n\n disconnectedCallback() {\n this._lightDomObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n if (this._expandableBody) {\n this._expandableBody.hidden = !this.open;\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleExpandedChange() {\n if (this.open) {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n await stopAnimations(this._expandableBody);\n this._expandableBody.hidden = false;\n const { keyframes, options } = getAnimation(this, \"row.expand.show\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this.emit(\"sgds-after-show\");\n } else {\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.open = true;\n return;\n }\n await stopAnimations(this._expandableBody);\n const { keyframes, options } = getAnimation(this, \"row.expand.hide\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this._expandableBody.hidden = true;\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /* Opens the expandable content area. /\n public async show() {\n if (this.open) return;\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Closes the expandable content area. /\n public async hide() {\n if (!this.open) return;\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /* @internal — returns visible text content for a body cell by visual column index. */\n public getCellText(columnIndex: number) {\n const cells = this._getCells().filter(cell => cell instanceof SgdsDataTableCell) as SgdsDataTableCell[];\n const cell = cells[columnIndex];\n if (!cell) return \"\";\n return (cell.textContent ?? \"\").trim();\n }\n\n private _getCells() {\n return Array.from(this.children).filter(\n child => child instanceof SgdsDataTableCell \|\| child instanceof SgdsDataTableHead\n ) as Array<SgdsDataTableCell \| SgdsDataTableHead>;\n }\n\n private _syncCellSlots(cells: Array<SgdsDataTableCell \| SgdsDataTableHead>) {\n cells.forEach(cell => {\n const index = cells.indexOf(cell);\n const slotName = `cell-${index}`;\n this._cellSlotNames.set(cell, slotName);\n if (cell.getAttribute(\"slot\") !== slotName) {\n cell.setAttribute(\"slot\", slotName);\n }\n });\n }\n\n private _handleLightDomChange() {\n const cells = this._getCells();\n this._syncCellSlots(cells);\n this._isHeaderRow = cells.some(cell => cell instanceof SgdsDataTableHead);\n this.requestUpdate();\n }\n\n private _onCheckboxChange(e: CustomEvent) {\n this.emit(\"i-sgds-change\", { detail: { checked: (e.target as SgdsCheckbox).checked } });\n }\n\n private _toggleExpand() {\n this.open ? this.hide() : this.show();\n }\n\n private _onExpandKeyDown(e: KeyboardEvent) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n this._toggleExpand();\n }\n\n private _onSortKeyDown(e: KeyboardEvent, header: SgdsDataTableHead) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n header.handleSortClick();\n }\n\n private _renderCell(el: SgdsDataTableCell \| SgdsDataTableHead, columnIndex: number) {\n const slotName = this._cellSlotNames.get(el);\n\n if (el instanceof SgdsDataTableHead) {\n return html`<th\n width=${ifDefined(el.width)}\n colspan=${ifDefined(el.colSpan)}\n rowspan=${ifDefined(el.rowSpan)}\n aria-sort=${ifDefined(el.sortDirection)}\n scope=\"col\"\n tabindex=${ifDefined(el.sorting ? \"0\" : undefined)}\n ?data-sorting=${el.sorting}\n @click=${el.sorting ? () => el.handleSortClick() : nothing}\n @keydown=${el.sorting ? (e: KeyboardEvent) => this._onSortKeyDown(e, el) : nothing}\n >\n <div class=\"data-table-head ${el.textAlign === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n ${el.sorting\n ? html`\n <button\n type=\"button\"\n class=\"sort-button ${el.sortDirection === \"none\" ? \"\" : \"active\"}\"\n aria-label=${el.sortDirection === \"descending\" ? \"Sort descending\" : \"Sort ascending\"}\n ?disabled=${!this.hasDataRows}\n >\n <sgds-icon\n class=\"sort-icon\"\n name=${el.sortDirection === \"descending\" ? \"sort-descending\" : \"sort-ascending\"}\n size=\"sm\"\n ></sgds-icon>\n </button>\n `\n : nothing}\n </div>\n </th>`;\n }\n\n const cellAlignment = this.columnAlignments[columnIndex] ?? \"left\";\n return html`<td colspan=${ifDefined(el.colSpan)} rowspan=${ifDefined(el.rowSpan)}>\n <div class=\"data-table-cell ${cellAlignment === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n </div>\n </td>`;\n }\n\n private _renderExpandCell() {\n if (this._isHeaderRow) {\n return html`<th class=\"control-cell\" scope=\"col\"></th>`;\n }\n\n return html`<td class=\"control-cell\" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex=\"0\">\n <div class=\"data-table-cell expand-cell\">\n <sgds-icon name=${this.open ? \"chevron-up\" : \"chevron-down\"} size=\"md\"></sgds-icon>\n </div>\n </td>`;\n }\n\n private _renderExpandPlaceholder() {\n return this._isHeaderRow ? html`<th class=\"control-cell\" scope=\"col\"></th>` : html`<td class=\"control-cell\"></td>`;\n }\n\n private _renderCheckboxCell() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>\n </div>\n </th>`\n : html`<td class=\"control-cell\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>\n </div>\n </td>`;\n }\n\n render() {\n const cells = this._getCells();\n const totalCols = cells.length + (this.showCheckbox ? 1 : 0) + (this.expand \|\| this.showExpandPlaceholder ? 1 : 0);\n const rowPart = this._isHeaderRow ? \"row row-header\" : \"row row-body\";\n\n return html`\n <tr part=${rowPart} ?data-header-row=${this._isHeaderRow} class=${this.open ? \"active\" : \"\"}>\n ${this.expand\n ? this._renderExpandCell()\n : this.showExpandPlaceholder\n ? this._renderExpandPlaceholder()\n : nothing}\n ${this.showCheckbox ? this._renderCheckboxCell() : nothing}\n ${(() => {\n let visualColumnIndex = 0;\n return cells.map(el => {\n const renderedCell = this._renderCell(el, visualColumnIndex);\n const span = Number(el.colSpan) > 0 ? Number(el.colSpan) : 1;\n visualColumnIndex += span;\n return renderedCell;\n });\n })()}\n </tr>\n\n ${this.expand\n ? html`\n <tr class=\"expandable-row\">\n <td colspan=${totalCols} class=\"expandable-td\">\n <div class=\"expandable-body\">\n <div class=\"expandable-content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </td>\n </tr>\n `\n : nothing}\n `;\n }\n}\n\nsetDefaultAnimation(\"row.expand.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"row.expand.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nexport default SgdsDataTableRow;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-data-table-row.cjs.js","names":["SgdsElement","tableRowStyle","SgdsCheckbox","SgdsDataTableCell","SgdsDataTableHead","SgdsIcon","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","ifDefined","nothing","property","query","state","watch","setDefaultAnimation"],"sources":["../../../../src/components/DataTable/sgds-data-table-row.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport tableRowStyle from \"./data-table.css\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport { SgdsIcon } from \"../Icon/sgds-icon\";\n\n/*\n @summary A data table row. Set `expand` to enable an expandable content area beneath\n * the row, then place detail content in the `content` slot.\n \n @slot default - Insert `sgds-data-table-cell` or `sgds-data-table-head` elements.\n * @slot content - Content shown in the animated expand area beneath the row.\n \n @event sgds-show - Emitted when the expandable row begins to open.\n * @event sgds-after-show - Emitted after the expandable row open animation completes.\n * @event sgds-hide - Emitted when the expandable row begins to close.\n * @event sgds-after-hide - Emitted after the expandable row close animation completes.\n /\nexport class SgdsDataTableRow extends SgdsElement {\n static styles = [...SgdsElement.styles, tableRowStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-checkbox\": SgdsCheckbox,\n \"sgds-data-table-cell\": SgdsDataTableCell,\n \"sgds-data-table-head\": SgdsDataTableHead,\n \"sgds-icon\": SgdsIcon\n };\n\n /* When true, the row has an expandable content area toggled by a chevron. /\n @property({ type: Boolean, reflect: true }) expand = false;\n\n /* When true, the expandable content area is open. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /* When true, the row is checked. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* @internal — set by `sgds-data-table` to show a checkbox cell on this row. /\n @property({ type: Boolean }) showCheckbox = false;\n\n /* @internal — set by `sgds-data-table` when at least one sibling row is expandable. /\n @property({ type: Boolean }) showExpandPlaceholder = false;\n\n /* @internal — per-column alignment injected by `sgds-data-table` from header cells. /\n @property({ attribute: false }) columnAlignments: Array<\"left\" \| \"right\"> = [];\n\n /* @internal — set by `sgds-data-table` to indicate whether body rows exist. /\n @property({ type: Boolean }) hasDataRows = false;\n\n /* @internal /\n @query(\".expandable-body\") private _expandableBody!: HTMLElement;\n\n /* @internal /\n @query(\"sgds-checkbox\") private _checkboxEl!: SgdsCheckbox;\n\n @state() private _isHeaderRow = false;\n private _cellSlotNames = new WeakMap<SgdsDataTableCell \| SgdsDataTableHead, string>();\n private _lightDomObserver?: MutationObserver;\n\n /* The checkbox rendered inside this row, if `showCheckbox` is true. /\n get checkbox(): SgdsCheckbox \| null {\n return this._checkboxEl ?? null;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._lightDomObserver = new MutationObserver(() => this._handleLightDomChange());\n this._lightDomObserver.observe(this, { childList: true });\n this._handleLightDomChange();\n }\n\n disconnectedCallback() {\n this._lightDomObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n if (this._expandableBody) {\n this._expandableBody.hidden = !this.open;\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleExpandedChange() {\n if (this.open) {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n await stopAnimations(this._expandableBody);\n this._expandableBody.hidden = false;\n const { keyframes, options } = getAnimation(this, \"row.expand.show\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this.emit(\"sgds-after-show\");\n } else {\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.open = true;\n return;\n }\n await stopAnimations(this._expandableBody);\n const { keyframes, options } = getAnimation(this, \"row.expand.hide\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this._expandableBody.hidden = true;\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /* Opens the expandable content area. /\n public async show() {\n if (this.open) return;\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Closes the expandable content area. /\n public async hide() {\n if (!this.open) return;\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /* @internal — returns visible text content for a body cell by visual column index. */\n public getCellText(columnIndex: number) {\n const cells = this._getCells().filter(cell => cell instanceof SgdsDataTableCell) as SgdsDataTableCell[];\n const cell = cells[columnIndex];\n if (!cell) return \"\";\n return (cell.textContent ?? \"\").trim();\n }\n\n private _getCells() {\n return Array.from(this.children).filter(\n child => child instanceof SgdsDataTableCell \|\| child instanceof SgdsDataTableHead\n ) as Array<SgdsDataTableCell \| SgdsDataTableHead>;\n }\n\n private _syncCellSlots(cells: Array<SgdsDataTableCell \| SgdsDataTableHead>) {\n cells.forEach(cell => {\n const index = cells.indexOf(cell);\n const slotName = `cell-${index}`;\n this._cellSlotNames.set(cell, slotName);\n if (cell.getAttribute(\"slot\") !== slotName) {\n cell.setAttribute(\"slot\", slotName);\n }\n });\n }\n\n private _handleLightDomChange() {\n const cells = this._getCells();\n this._syncCellSlots(cells);\n this._isHeaderRow = cells.some(cell => cell instanceof SgdsDataTableHead);\n this.requestUpdate();\n }\n\n private _onCheckboxChange(e: CustomEvent) {\n this.emit(\"i-sgds-change\", { detail: { checked: (e.target as SgdsCheckbox).checked } });\n }\n\n private _toggleExpand() {\n this.open ? this.hide() : this.show();\n }\n\n private _onExpandKeyDown(e: KeyboardEvent) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n this._toggleExpand();\n }\n\n private _onSortKeyDown(e: KeyboardEvent, header: SgdsDataTableHead) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n header.handleSortClick();\n }\n\n private _renderCell(el: SgdsDataTableCell \| SgdsDataTableHead, columnIndex: number) {\n const slotName = this._cellSlotNames.get(el);\n\n if (el instanceof SgdsDataTableHead) {\n return html`<th\n width=${ifDefined(el.width)}\n colspan=${ifDefined(el.colSpan)}\n rowspan=${ifDefined(el.rowSpan)}\n aria-sort=${ifDefined(el.sortDirection)}\n scope=\"col\"\n tabindex=${ifDefined(el.sorting ? \"0\" : undefined)}\n ?data-sorting=${el.sorting}\n @click=${el.sorting ? () => el.handleSortClick() : nothing}\n @keydown=${el.sorting ? (e: KeyboardEvent) => this._onSortKeyDown(e, el) : nothing}\n >\n <div class=\"data-table-head ${el.textAlign === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n ${el.sorting\n ? html`\n <button\n type=\"button\"\n class=\"sort-button ${el.sortDirection === \"none\" ? \"\" : \"active\"}\"\n aria-label=${el.sortDirection === \"descending\" ? \"Sort descending\" : \"Sort ascending\"}\n ?disabled=${!this.hasDataRows}\n >\n <sgds-icon\n class=\"sort-icon\"\n name=${el.sortDirection === \"descending\" ? \"sort-descending\" : \"sort-ascending\"}\n size=\"sm\"\n ></sgds-icon>\n </button>\n `\n : nothing}\n </div>\n </th>`;\n }\n\n const cellAlignment = this.columnAlignments[columnIndex] ?? \"left\";\n return html`<td colspan=${ifDefined(el.colSpan)} rowspan=${ifDefined(el.rowSpan)}>\n <div class=\"data-table-cell ${cellAlignment === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n </div>\n </td>`;\n }\n\n private _renderExpandCell() {\n if (this._isHeaderRow) {\n return html`<th class=\"control-cell\" scope=\"col\"><span class=\"visually-hidden\">Expand</span></th>`;\n }\n\n return html`<td class=\"control-cell\" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex=\"0\">\n <div class=\"data-table-cell expand-cell\">\n <sgds-icon name=${this.open ? \"chevron-up\" : \"chevron-down\"} size=\"md\"></sgds-icon>\n </div>\n </td>`;\n }\n\n private _renderExpandPlaceholder() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\"><span class=\"visually-hidden\">Expand</span></th>`\n : html`<td class=\"control-cell\"></td>`;\n }\n\n private _renderCheckboxCell() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox\n .checked=${this.checked}\n @sgds-change=${this._onCheckboxChange}\n .ariaLabel=${\"Select all rows\"}\n ></sgds-checkbox>\n </div>\n </th>`\n : html`<td class=\"control-cell\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox\n .checked=${this.checked}\n @sgds-change=${this._onCheckboxChange}\n .ariaLabel=${\"Select row\"}\n ></sgds-checkbox>\n </div>\n </td>`;\n }\n\n render() {\n const cells = this._getCells();\n const totalCols = cells.length + (this.showCheckbox ? 1 : 0) + (this.expand \|\| this.showExpandPlaceholder ? 1 : 0);\n const rowPart = this._isHeaderRow ? \"row row-header\" : \"row row-body\";\n\n return html`\n <tr part=${rowPart} ?data-header-row=${this._isHeaderRow} class=${this.open ? \"active\" : \"\"}>\n ${this.expand\n ? this._renderExpandCell()\n : this.showExpandPlaceholder\n ? this._renderExpandPlaceholder()\n : nothing}\n ${this.showCheckbox ? this._renderCheckboxCell() : nothing}\n ${(() => {\n let visualColumnIndex = 0;\n return cells.map(el => {\n const renderedCell = this._renderCell(el, visualColumnIndex);\n const span = Number(el.colSpan) > 0 ? Number(el.colSpan) : 1;\n visualColumnIndex += span;\n return renderedCell;\n });\n })()}\n </tr>\n\n ${this.expand\n ? html`\n <tr class=\"expandable-row\">\n <td colspan=${totalCols} class=\"expandable-td\">\n <div class=\"expandable-body\">\n <div class=\"expandable-content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </td>\n </tr>\n `\n : nothing}\n `;\n }\n}\n\nsetDefaultAnimation(\"row.expand.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"row.expand.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nexport default SgdsDataTableRow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAAb,cAAsCA,qBAAAA,QAAY;;;EAYK,KAAA,SAAA;EAGF,KAAA,OAAA;EAGG,KAAA,UAAA;EAGV,KAAA,eAAA;EAGS,KAAA,wBAAA;EAGuB,KAAA,mBAAA,CAAC;EAGlC,KAAA,cAAA;EAQX,KAAA,eAAA;EACP,KAAA,iCAAA,IAAI,QAAuD;;;EAtCpE,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,mBAAAA,OAAa;;;EAG/B,KAAA,eAAA;GACpB,iBAAiBC,sBAAAA;GACjB,wBAAwBC,6BAAAA;GACxB,wBAAwBC,6BAAAA;GACxB,aAAaC,kBAAAA;EACf;;;CAkCA,IAAI,WAAgC;EAClC,OAAO,KAAK,eAAe;CAC7B;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,oBAAoB,IAAI,uBAAuB,KAAK,sBAAsB,CAAC;EAChF,KAAK,kBAAkB,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EACxD,KAAK,sBAAsB;CAC7B;CAEA,uBAAuB;EACrB,KAAK,mBAAmB,WAAW;EACnC,MAAM,qBAAqB;CAC7B;CAEA,eAAe;EACb,IAAI,KAAK,iBACP,KAAK,gBAAgB,SAAS,CAAC,KAAK;CAExC;CAEA,MACM,uBAAuB;EAC3B,IAAI,KAAK,MAAM;GAEb,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GACA,MAAMC,gBAAAA,eAAe,KAAK,eAAe;GACzC,KAAK,gBAAgB,SAAS;GAC9B,MAAM,EAAE,WAAW,YAAYC,2BAAAA,aAAa,MAAM,iBAAiB;GACnE,MAAMC,gBAAAA,UACJ,KAAK,iBACLC,gBAAAA,wBAAwB,WAAW,KAAK,gBAAgB,YAAY,GACpE,OACF;GACA,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAEL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GACA,MAAMH,gBAAAA,eAAe,KAAK,eAAe;GACzC,MAAM,EAAE,WAAW,YAAYC,2BAAAA,aAAa,MAAM,iBAAiB;GACnE,MAAMC,gBAAAA,UACJ,KAAK,iBACLC,gBAAAA,wBAAwB,WAAW,KAAK,gBAAgB,YAAY,GACpE,OACF;GACA,KAAK,gBAAgB,SAAS;GAC9B,KAAK,KAAK,iBAAiB;EAC7B;CACF;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,MAAM;EACf,KAAK,OAAO;EACZ,OAAOC,cAAAA,aAAa,MAAM,iBAAiB;CAC7C;;CAGA,MAAa,OAAO;EAClB,IAAI,CAAC,KAAK,MAAM;EAChB,KAAK,OAAO;EACZ,OAAOA,cAAAA,aAAa,MAAM,iBAAiB;CAC7C;;CAGA,YAAmB,aAAqB;EAEtC,MAAM,OADQ,KAAK,UAAU,CAAC,CAAC,QAAO,SAAQ,gBAAgBP,6BAAAA,iBAC7C,CAAC,CAAC;EACnB,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,KAAK,eAAe,GAAA,CAAI,KAAK;CACvC;CAEA,YAAoB;EAClB,OAAO,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QAC/B,UAAS,iBAAiBA,6BAAAA,qBAAqB,iBAAiBC,6BAAAA,iBAClE;CACF;CAEA,eAAuB,OAAqD;EAC1E,MAAM,SAAQ,SAAQ;GAEpB,MAAM,WAAW,QADH,MAAM,QAAQ,IACC;GAC7B,KAAK,eAAe,IAAI,MAAM,QAAQ;GACtC,IAAI,KAAK,aAAa,MAAM,MAAM,UAChC,KAAK,aAAa,QAAQ,QAAQ;EAEtC,CAAC;CACH;CAEA,wBAAgC;EAC9B,MAAM,QAAQ,KAAK,UAAU;EAC7B,KAAK,eAAe,KAAK;EACzB,KAAK,eAAe,MAAM,MAAK,SAAQ,gBAAgBA,6BAAAA,iBAAiB;EACxE,KAAK,cAAc;CACrB;CAEA,kBAA0B,GAAgB;EACxC,KAAK,KAAK,iBAAiB,EAAE,QAAQ,EAAE,SAAU,EAAE,OAAwB,QAAQ,EAAE,CAAC;CACxF;CAEA,gBAAwB;EACtB,KAAK,OAAO,KAAK,KAAK,IAAI,KAAK,KAAK;CACtC;CAEA,iBAAyB,GAAkB;EACzC,IAAI,EAAE,QAAQ,SAAS;EACvB,EAAE,eAAe;EACjB,KAAK,cAAc;CACrB;CAEA,eAAuB,GAAkB,QAA2B;EAClE,IAAI,EAAE,QAAQ,SAAS;EACvB,EAAE,eAAe;EACjB,OAAO,gBAAgB;CACzB;CAEA,YAAoB,IAA2C,aAAqB;EAClF,MAAM,WAAW,KAAK,eAAe,IAAI,EAAE;EAE3C,IAAI,cAAcA,6BAAAA,mBAChB,OAAO,IAAA,IAAI;iBACDO,GAAAA,6BAAAA,UAAAA,CAAU,GAAG,KAAK,EAAE;mBAClBA,GAAAA,6BAAAA,UAAAA,CAAU,GAAG,OAAO,EAAE;mBACtBA,GAAAA,6BAAAA,UAAAA,CAAU,GAAG,OAAO,EAAE;qBACpBA,GAAAA,6BAAAA,UAAAA,CAAU,GAAG,aAAa,EAAE;;oBAE7BA,GAAAA,6BAAAA,UAAAA,CAAU,GAAG,UAAU,MAAM,KAAA,CAAS,EAAE;wBACnC,GAAG,QAAQ;iBAClB,GAAG,gBAAgB,GAAG,gBAAgB,IAAIC,IAAAA,QAAQ;mBAChD,GAAG,WAAW,MAAqB,KAAK,eAAe,GAAG,EAAE,IAAIA,IAAAA,QAAQ;;sCAErD,GAAG,cAAc,UAAU,gBAAgB,aAAa;YAClF,WAAW,IAAA,IAAI,cAAc,SAAS,YAAYA,IAAAA,QAAQ;YAC1D,GAAG,UACD,IAAA,IAAI;;;uCAGqB,GAAG,kBAAkB,SAAS,KAAK,SAAS;+BACpD,GAAG,kBAAkB,eAAe,oBAAoB,iBAAiB;8BAC1E,CAAC,KAAK,YAAY;;;;2BAIrB,GAAG,kBAAkB,eAAe,oBAAoB,iBAAiB;;;;kBAKtFA,IAAAA,QAAQ;;;EAKlB,MAAM,gBAAgB,KAAK,iBAAiB,gBAAgB;EAC5D,OAAO,IAAA,IAAI,gBAAA,GAAeD,6BAAAA,UAAAA,CAAU,GAAG,OAAO,EAAE,YAAA,GAAWA,6BAAAA,UAAAA,CAAU,GAAG,OAAO,EAAE;oCACjD,kBAAkB,UAAU,gBAAgB,aAAa;UACnF,WAAW,IAAA,IAAI,cAAc,SAAS,YAAYC,IAAAA,QAAQ;;;CAGlE;CAEA,oBAA4B;EAC1B,IAAI,KAAK,cACP,OAAO,IAAA,IAAI;EAGb,OAAO,IAAA,IAAI,mCAAmC,KAAK,cAAc,YAAY,KAAK,iBAAiB;;0BAE7E,KAAK,OAAO,eAAe,eAAe;;;CAGlE;CAEA,2BAAmC;EACjC,OAAO,KAAK,eACR,IAAA,IAAI,0FACJ,IAAA,IAAI;CACV;CAEA,sBAA8B;EAC5B,OAAO,KAAK,eACR,IAAA,IAAI;;;yBAGa,KAAK,QAAQ;6BACT,KAAK,kBAAkB;2BACzB,kBAAkB;;;iBAIrC,IAAA,IAAI;;;yBAGa,KAAK,QAAQ;6BACT,KAAK,kBAAkB;2BACzB,aAAa;;;;CAItC;CAEA,SAAS;EACP,MAAM,QAAQ,KAAK,UAAU;EAC7B,MAAM,YAAY,MAAM,UAAU,KAAK,eAAe,IAAI,MAAM,KAAK,UAAU,KAAK,wBAAwB,IAAI;EAChH,MAAM,UAAU,KAAK,eAAe,mBAAmB;EAEvD,OAAO,IAAA,IAAI;iBACE,QAAQ,oBAAoB,KAAK,aAAa,SAAS,KAAK,OAAO,WAAW,GAAG;UACxF,KAAK,SACH,KAAK,kBAAkB,IACvB,KAAK,wBACL,KAAK,yBAAyB,IAC9BA,IAAAA,QAAQ;UACV,KAAK,eAAe,KAAK,oBAAoB,IAAIA,IAAAA,QAAQ;iBAClD;GACP,IAAI,oBAAoB;GACxB,OAAO,MAAM,KAAI,OAAM;IACrB,MAAM,eAAe,KAAK,YAAY,IAAI,iBAAiB;IAC3D,MAAM,OAAO,OAAO,GAAG,OAAO,IAAI,IAAI,OAAO,GAAG,OAAO,IAAI;IAC3D,qBAAqB;IACrB,OAAO;GACT,CAAC;EACH,EAAA,CAAG,EAAE;;;QAGL,KAAK,SACH,IAAA,IAAI;;4BAEc,UAAU;;;;;;;;cAS5BA,IAAAA,QAAQ;;CAEhB;AACF;AAtRGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,WAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,iBAAA,WAAA,yBAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,iBAAA,WAAA,oBAAA,KAAA,CAAA;AAG7BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;AAG1BC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,kBAAkB,CAAA,GAAA,iBAAA,WAAA,mBAAA,KAAA,CAAA;AAGxBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,eAAe,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;AAErBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;AA2BNC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,wBAAA,IAAA;AAmO/CC,2BAAAA,oBAAoB,mBAAmB;CACrC,WAAW,CACT;EAAE,QAAQ;EAAK,SAAS;CAAI,GAC5B;EAAE,QAAQ;EAAQ,SAAS;CAAI,CACjC;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC;AAEDA,2BAAAA,oBAAoB,mBAAmB;CACrC,WAAW,CACT;EAAE,QAAQ;EAAQ,SAAS;CAAI,GAC/B;EAAE,QAAQ;EAAK,SAAS;CAAI,CAC9B;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC"}

package/react/components/DataTable/sgds-data-table-row.js CHANGED Viewed

@@ -179,7 +179,7 @@ var SgdsDataTableRow = class extends SgdsElement {
     </td>`;
 	}
 	_renderExpandCell() {
-		if (this._isHeaderRow) return html`<th class="control-cell" scope="col"></th>`;
+		if (this._isHeaderRow) return html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>`;
 		return html`<td class="control-cell" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex="0">
       <div class="data-table-cell expand-cell">
         <sgds-icon name=${this.open ? "chevron-up" : "chevron-down"} size="md"></sgds-icon>
@@ -187,16 +187,24 @@ var SgdsDataTableRow = class extends SgdsElement {
     </td>`;
 	}
 	_renderExpandPlaceholder() {
-		return this._isHeaderRow ? html`<th class="control-cell" scope="col"></th>` : html`<td class="control-cell"></td>`;
+		return this._isHeaderRow ? html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>` : html`<td class="control-cell"></td>`;
 	}
 	_renderCheckboxCell() {
 		return this._isHeaderRow ? html`<th class="control-cell" scope="col">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select all rows"}
+            ></sgds-checkbox>
           </div>
         </th>` : html`<td class="control-cell">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select row"}
+            ></sgds-checkbox>
           </div>
         </td>`;
 	}

package/react/components/DataTable/sgds-data-table-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-data-table-row.js","names":["tableRowStyle"],"sources":["../../../../src/components/DataTable/sgds-data-table-row.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport tableRowStyle from \"./data-table.css\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport { SgdsIcon } from \"../Icon/sgds-icon\";\n\n/*\n @summary A data table row. Set `expand` to enable an expandable content area beneath\n * the row, then place detail content in the `content` slot.\n \n @slot default - Insert `sgds-data-table-cell` or `sgds-data-table-head` elements.\n * @slot content - Content shown in the animated expand area beneath the row.\n \n @event sgds-show - Emitted when the expandable row begins to open.\n * @event sgds-after-show - Emitted after the expandable row open animation completes.\n * @event sgds-hide - Emitted when the expandable row begins to close.\n * @event sgds-after-hide - Emitted after the expandable row close animation completes.\n /\nexport class SgdsDataTableRow extends SgdsElement {\n static styles = [...SgdsElement.styles, tableRowStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-checkbox\": SgdsCheckbox,\n \"sgds-data-table-cell\": SgdsDataTableCell,\n \"sgds-data-table-head\": SgdsDataTableHead,\n \"sgds-icon\": SgdsIcon\n };\n\n /* When true, the row has an expandable content area toggled by a chevron. /\n @property({ type: Boolean, reflect: true }) expand = false;\n\n /* When true, the expandable content area is open. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /* When true, the row is checked. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* @internal — set by `sgds-data-table` to show a checkbox cell on this row. /\n @property({ type: Boolean }) showCheckbox = false;\n\n /* @internal — set by `sgds-data-table` when at least one sibling row is expandable. /\n @property({ type: Boolean }) showExpandPlaceholder = false;\n\n /* @internal — per-column alignment injected by `sgds-data-table` from header cells. /\n @property({ attribute: false }) columnAlignments: Array<\"left\" \| \"right\"> = [];\n\n /* @internal — set by `sgds-data-table` to indicate whether body rows exist. /\n @property({ type: Boolean }) hasDataRows = false;\n\n /* @internal /\n @query(\".expandable-body\") private _expandableBody!: HTMLElement;\n\n /* @internal /\n @query(\"sgds-checkbox\") private _checkboxEl!: SgdsCheckbox;\n\n @state() private _isHeaderRow = false;\n private _cellSlotNames = new WeakMap<SgdsDataTableCell \| SgdsDataTableHead, string>();\n private _lightDomObserver?: MutationObserver;\n\n /* The checkbox rendered inside this row, if `showCheckbox` is true. /\n get checkbox(): SgdsCheckbox \| null {\n return this._checkboxEl ?? null;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._lightDomObserver = new MutationObserver(() => this._handleLightDomChange());\n this._lightDomObserver.observe(this, { childList: true });\n this._handleLightDomChange();\n }\n\n disconnectedCallback() {\n this._lightDomObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n if (this._expandableBody) {\n this._expandableBody.hidden = !this.open;\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleExpandedChange() {\n if (this.open) {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n await stopAnimations(this._expandableBody);\n this._expandableBody.hidden = false;\n const { keyframes, options } = getAnimation(this, \"row.expand.show\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this.emit(\"sgds-after-show\");\n } else {\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.open = true;\n return;\n }\n await stopAnimations(this._expandableBody);\n const { keyframes, options } = getAnimation(this, \"row.expand.hide\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this._expandableBody.hidden = true;\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /* Opens the expandable content area. /\n public async show() {\n if (this.open) return;\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Closes the expandable content area. /\n public async hide() {\n if (!this.open) return;\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /* @internal — returns visible text content for a body cell by visual column index. */\n public getCellText(columnIndex: number) {\n const cells = this._getCells().filter(cell => cell instanceof SgdsDataTableCell) as SgdsDataTableCell[];\n const cell = cells[columnIndex];\n if (!cell) return \"\";\n return (cell.textContent ?? \"\").trim();\n }\n\n private _getCells() {\n return Array.from(this.children).filter(\n child => child instanceof SgdsDataTableCell \|\| child instanceof SgdsDataTableHead\n ) as Array<SgdsDataTableCell \| SgdsDataTableHead>;\n }\n\n private _syncCellSlots(cells: Array<SgdsDataTableCell \| SgdsDataTableHead>) {\n cells.forEach(cell => {\n const index = cells.indexOf(cell);\n const slotName = `cell-${index}`;\n this._cellSlotNames.set(cell, slotName);\n if (cell.getAttribute(\"slot\") !== slotName) {\n cell.setAttribute(\"slot\", slotName);\n }\n });\n }\n\n private _handleLightDomChange() {\n const cells = this._getCells();\n this._syncCellSlots(cells);\n this._isHeaderRow = cells.some(cell => cell instanceof SgdsDataTableHead);\n this.requestUpdate();\n }\n\n private _onCheckboxChange(e: CustomEvent) {\n this.emit(\"i-sgds-change\", { detail: { checked: (e.target as SgdsCheckbox).checked } });\n }\n\n private _toggleExpand() {\n this.open ? this.hide() : this.show();\n }\n\n private _onExpandKeyDown(e: KeyboardEvent) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n this._toggleExpand();\n }\n\n private _onSortKeyDown(e: KeyboardEvent, header: SgdsDataTableHead) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n header.handleSortClick();\n }\n\n private _renderCell(el: SgdsDataTableCell \| SgdsDataTableHead, columnIndex: number) {\n const slotName = this._cellSlotNames.get(el);\n\n if (el instanceof SgdsDataTableHead) {\n return html`<th\n width=${ifDefined(el.width)}\n colspan=${ifDefined(el.colSpan)}\n rowspan=${ifDefined(el.rowSpan)}\n aria-sort=${ifDefined(el.sortDirection)}\n scope=\"col\"\n tabindex=${ifDefined(el.sorting ? \"0\" : undefined)}\n ?data-sorting=${el.sorting}\n @click=${el.sorting ? () => el.handleSortClick() : nothing}\n @keydown=${el.sorting ? (e: KeyboardEvent) => this._onSortKeyDown(e, el) : nothing}\n >\n <div class=\"data-table-head ${el.textAlign === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n ${el.sorting\n ? html`\n <button\n type=\"button\"\n class=\"sort-button ${el.sortDirection === \"none\" ? \"\" : \"active\"}\"\n aria-label=${el.sortDirection === \"descending\" ? \"Sort descending\" : \"Sort ascending\"}\n ?disabled=${!this.hasDataRows}\n >\n <sgds-icon\n class=\"sort-icon\"\n name=${el.sortDirection === \"descending\" ? \"sort-descending\" : \"sort-ascending\"}\n size=\"sm\"\n ></sgds-icon>\n </button>\n `\n : nothing}\n </div>\n </th>`;\n }\n\n const cellAlignment = this.columnAlignments[columnIndex] ?? \"left\";\n return html`<td colspan=${ifDefined(el.colSpan)} rowspan=${ifDefined(el.rowSpan)}>\n <div class=\"data-table-cell ${cellAlignment === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n </div>\n </td>`;\n }\n\n private _renderExpandCell() {\n if (this._isHeaderRow) {\n return html`<th class=\"control-cell\" scope=\"col\"></th>`;\n }\n\n return html`<td class=\"control-cell\" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex=\"0\">\n <div class=\"data-table-cell expand-cell\">\n <sgds-icon name=${this.open ? \"chevron-up\" : \"chevron-down\"} size=\"md\"></sgds-icon>\n </div>\n </td>`;\n }\n\n private _renderExpandPlaceholder() {\n return this._isHeaderRow ? html`<th class=\"control-cell\" scope=\"col\"></th>` : html`<td class=\"control-cell\"></td>`;\n }\n\n private _renderCheckboxCell() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>\n </div>\n </th>`\n : html`<td class=\"control-cell\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>\n </div>\n </td>`;\n }\n\n render() {\n const cells = this._getCells();\n const totalCols = cells.length + (this.showCheckbox ? 1 : 0) + (this.expand \|\| this.showExpandPlaceholder ? 1 : 0);\n const rowPart = this._isHeaderRow ? \"row row-header\" : \"row row-body\";\n\n return html`\n <tr part=${rowPart} ?data-header-row=${this._isHeaderRow} class=${this.open ? \"active\" : \"\"}>\n ${this.expand\n ? this._renderExpandCell()\n : this.showExpandPlaceholder\n ? this._renderExpandPlaceholder()\n : nothing}\n ${this.showCheckbox ? this._renderCheckboxCell() : nothing}\n ${(() => {\n let visualColumnIndex = 0;\n return cells.map(el => {\n const renderedCell = this._renderCell(el, visualColumnIndex);\n const span = Number(el.colSpan) > 0 ? Number(el.colSpan) : 1;\n visualColumnIndex += span;\n return renderedCell;\n });\n })()}\n </tr>\n\n ${this.expand\n ? html`\n <tr class=\"expandable-row\">\n <td colspan=${totalCols} class=\"expandable-td\">\n <div class=\"expandable-body\">\n <div class=\"expandable-content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </td>\n </tr>\n `\n : nothing}\n `;\n }\n}\n\nsetDefaultAnimation(\"row.expand.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"row.expand.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nexport default SgdsDataTableRow;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-data-table-row.js","names":["tableRowStyle"],"sources":["../../../../src/components/DataTable/sgds-data-table-row.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport tableRowStyle from \"./data-table.css\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport { SgdsIcon } from \"../Icon/sgds-icon\";\n\n/*\n @summary A data table row. Set `expand` to enable an expandable content area beneath\n * the row, then place detail content in the `content` slot.\n \n @slot default - Insert `sgds-data-table-cell` or `sgds-data-table-head` elements.\n * @slot content - Content shown in the animated expand area beneath the row.\n \n @event sgds-show - Emitted when the expandable row begins to open.\n * @event sgds-after-show - Emitted after the expandable row open animation completes.\n * @event sgds-hide - Emitted when the expandable row begins to close.\n * @event sgds-after-hide - Emitted after the expandable row close animation completes.\n /\nexport class SgdsDataTableRow extends SgdsElement {\n static styles = [...SgdsElement.styles, tableRowStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-checkbox\": SgdsCheckbox,\n \"sgds-data-table-cell\": SgdsDataTableCell,\n \"sgds-data-table-head\": SgdsDataTableHead,\n \"sgds-icon\": SgdsIcon\n };\n\n /* When true, the row has an expandable content area toggled by a chevron. /\n @property({ type: Boolean, reflect: true }) expand = false;\n\n /* When true, the expandable content area is open. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /* When true, the row is checked. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* @internal — set by `sgds-data-table` to show a checkbox cell on this row. /\n @property({ type: Boolean }) showCheckbox = false;\n\n /* @internal — set by `sgds-data-table` when at least one sibling row is expandable. /\n @property({ type: Boolean }) showExpandPlaceholder = false;\n\n /* @internal — per-column alignment injected by `sgds-data-table` from header cells. /\n @property({ attribute: false }) columnAlignments: Array<\"left\" \| \"right\"> = [];\n\n /* @internal — set by `sgds-data-table` to indicate whether body rows exist. /\n @property({ type: Boolean }) hasDataRows = false;\n\n /* @internal /\n @query(\".expandable-body\") private _expandableBody!: HTMLElement;\n\n /* @internal /\n @query(\"sgds-checkbox\") private _checkboxEl!: SgdsCheckbox;\n\n @state() private _isHeaderRow = false;\n private _cellSlotNames = new WeakMap<SgdsDataTableCell \| SgdsDataTableHead, string>();\n private _lightDomObserver?: MutationObserver;\n\n /* The checkbox rendered inside this row, if `showCheckbox` is true. /\n get checkbox(): SgdsCheckbox \| null {\n return this._checkboxEl ?? null;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._lightDomObserver = new MutationObserver(() => this._handleLightDomChange());\n this._lightDomObserver.observe(this, { childList: true });\n this._handleLightDomChange();\n }\n\n disconnectedCallback() {\n this._lightDomObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n if (this._expandableBody) {\n this._expandableBody.hidden = !this.open;\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleExpandedChange() {\n if (this.open) {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n await stopAnimations(this._expandableBody);\n this._expandableBody.hidden = false;\n const { keyframes, options } = getAnimation(this, \"row.expand.show\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this.emit(\"sgds-after-show\");\n } else {\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.open = true;\n return;\n }\n await stopAnimations(this._expandableBody);\n const { keyframes, options } = getAnimation(this, \"row.expand.hide\");\n await animateTo(\n this._expandableBody,\n shimKeyframesHeightAuto(keyframes, this._expandableBody.scrollHeight),\n options\n );\n this._expandableBody.hidden = true;\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /* Opens the expandable content area. /\n public async show() {\n if (this.open) return;\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Closes the expandable content area. /\n public async hide() {\n if (!this.open) return;\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n /* @internal — returns visible text content for a body cell by visual column index. */\n public getCellText(columnIndex: number) {\n const cells = this._getCells().filter(cell => cell instanceof SgdsDataTableCell) as SgdsDataTableCell[];\n const cell = cells[columnIndex];\n if (!cell) return \"\";\n return (cell.textContent ?? \"\").trim();\n }\n\n private _getCells() {\n return Array.from(this.children).filter(\n child => child instanceof SgdsDataTableCell \|\| child instanceof SgdsDataTableHead\n ) as Array<SgdsDataTableCell \| SgdsDataTableHead>;\n }\n\n private _syncCellSlots(cells: Array<SgdsDataTableCell \| SgdsDataTableHead>) {\n cells.forEach(cell => {\n const index = cells.indexOf(cell);\n const slotName = `cell-${index}`;\n this._cellSlotNames.set(cell, slotName);\n if (cell.getAttribute(\"slot\") !== slotName) {\n cell.setAttribute(\"slot\", slotName);\n }\n });\n }\n\n private _handleLightDomChange() {\n const cells = this._getCells();\n this._syncCellSlots(cells);\n this._isHeaderRow = cells.some(cell => cell instanceof SgdsDataTableHead);\n this.requestUpdate();\n }\n\n private _onCheckboxChange(e: CustomEvent) {\n this.emit(\"i-sgds-change\", { detail: { checked: (e.target as SgdsCheckbox).checked } });\n }\n\n private _toggleExpand() {\n this.open ? this.hide() : this.show();\n }\n\n private _onExpandKeyDown(e: KeyboardEvent) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n this._toggleExpand();\n }\n\n private _onSortKeyDown(e: KeyboardEvent, header: SgdsDataTableHead) {\n if (e.key !== \"Enter\") return;\n e.preventDefault();\n header.handleSortClick();\n }\n\n private _renderCell(el: SgdsDataTableCell \| SgdsDataTableHead, columnIndex: number) {\n const slotName = this._cellSlotNames.get(el);\n\n if (el instanceof SgdsDataTableHead) {\n return html`<th\n width=${ifDefined(el.width)}\n colspan=${ifDefined(el.colSpan)}\n rowspan=${ifDefined(el.rowSpan)}\n aria-sort=${ifDefined(el.sortDirection)}\n scope=\"col\"\n tabindex=${ifDefined(el.sorting ? \"0\" : undefined)}\n ?data-sorting=${el.sorting}\n @click=${el.sorting ? () => el.handleSortClick() : nothing}\n @keydown=${el.sorting ? (e: KeyboardEvent) => this._onSortKeyDown(e, el) : nothing}\n >\n <div class=\"data-table-head ${el.textAlign === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n ${el.sorting\n ? html`\n <button\n type=\"button\"\n class=\"sort-button ${el.sortDirection === \"none\" ? \"\" : \"active\"}\"\n aria-label=${el.sortDirection === \"descending\" ? \"Sort descending\" : \"Sort ascending\"}\n ?disabled=${!this.hasDataRows}\n >\n <sgds-icon\n class=\"sort-icon\"\n name=${el.sortDirection === \"descending\" ? \"sort-descending\" : \"sort-ascending\"}\n size=\"sm\"\n ></sgds-icon>\n </button>\n `\n : nothing}\n </div>\n </th>`;\n }\n\n const cellAlignment = this.columnAlignments[columnIndex] ?? \"left\";\n return html`<td colspan=${ifDefined(el.colSpan)} rowspan=${ifDefined(el.rowSpan)}>\n <div class=\"data-table-cell ${cellAlignment === \"right\" ? \"align-right\" : \"align-left\"}\">\n ${slotName ? html`<slot name=${slotName}></slot>` : nothing}\n </div>\n </td>`;\n }\n\n private _renderExpandCell() {\n if (this._isHeaderRow) {\n return html`<th class=\"control-cell\" scope=\"col\"><span class=\"visually-hidden\">Expand</span></th>`;\n }\n\n return html`<td class=\"control-cell\" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex=\"0\">\n <div class=\"data-table-cell expand-cell\">\n <sgds-icon name=${this.open ? \"chevron-up\" : \"chevron-down\"} size=\"md\"></sgds-icon>\n </div>\n </td>`;\n }\n\n private _renderExpandPlaceholder() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\"><span class=\"visually-hidden\">Expand</span></th>`\n : html`<td class=\"control-cell\"></td>`;\n }\n\n private _renderCheckboxCell() {\n return this._isHeaderRow\n ? html`<th class=\"control-cell\" scope=\"col\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox\n .checked=${this.checked}\n @sgds-change=${this._onCheckboxChange}\n .ariaLabel=${\"Select all rows\"}\n ></sgds-checkbox>\n </div>\n </th>`\n : html`<td class=\"control-cell\">\n <div class=\"data-table-cell checkbox-cell\">\n <sgds-checkbox\n .checked=${this.checked}\n @sgds-change=${this._onCheckboxChange}\n .ariaLabel=${\"Select row\"}\n ></sgds-checkbox>\n </div>\n </td>`;\n }\n\n render() {\n const cells = this._getCells();\n const totalCols = cells.length + (this.showCheckbox ? 1 : 0) + (this.expand \|\| this.showExpandPlaceholder ? 1 : 0);\n const rowPart = this._isHeaderRow ? \"row row-header\" : \"row row-body\";\n\n return html`\n <tr part=${rowPart} ?data-header-row=${this._isHeaderRow} class=${this.open ? \"active\" : \"\"}>\n ${this.expand\n ? this._renderExpandCell()\n : this.showExpandPlaceholder\n ? this._renderExpandPlaceholder()\n : nothing}\n ${this.showCheckbox ? this._renderCheckboxCell() : nothing}\n ${(() => {\n let visualColumnIndex = 0;\n return cells.map(el => {\n const renderedCell = this._renderCell(el, visualColumnIndex);\n const span = Number(el.colSpan) > 0 ? Number(el.colSpan) : 1;\n visualColumnIndex += span;\n return renderedCell;\n });\n })()}\n </tr>\n\n ${this.expand\n ? html`\n <tr class=\"expandable-row\">\n <td colspan=${totalCols} class=\"expandable-td\">\n <div class=\"expandable-body\">\n <div class=\"expandable-content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </td>\n </tr>\n `\n : nothing}\n `;\n }\n}\n\nsetDefaultAnimation(\"row.expand.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"row.expand.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 250, easing: \"ease-in-out\" }\n});\n\nexport default SgdsDataTableRow;\n"],"mappings":"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"}

package/react/components/DataTable/sgds-data-table.cjs.js CHANGED Viewed

@@ -62,7 +62,6 @@ var SgdsDataTable = class extends require_sgds_element.default {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.setAttribute("role", "table");
 	}
 	_isRowChecked(row) {
 		return row.checked || row.checkbox?.checked === true;
@@ -321,7 +320,7 @@ var SgdsDataTable = class extends require_sgds_element.default {
 		return lit.html`
       <div class="data-table">
         <div class="table-container">
-          <div class="table">
+          <div class="table" role="table">
             <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>
             ${this.loading ? this._renderLoadingSkeleton() : lit.nothing}
           </div>