npm - dap-design-system - Versions diffs - 0.62.2 → 0.62.4 - Mend

dap-design-system 0.62.2 → 0.62.4

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

package/dist/common/utils.d.ts +8 -0
package/dist/common/utils.js +36 -31
package/dist/common/utils.js.map +1 -1
package/dist/components/combobox/comboboxBase.d.ts +8 -0
package/dist/components/combobox/comboboxBase.js +64 -33
package/dist/components/combobox/comboboxBase.js.map +1 -1
package/dist/components/option-list/option-list.component.d.ts +2 -0
package/dist/components/option-list/option-list.component.js +42 -39
package/dist/components/option-list/option-list.component.js.map +1 -1
package/dist/components/popup/popup-base-element.d.ts +6 -0
package/dist/components/popup/popup-base-element.js +92 -63
package/dist/components/popup/popup-base-element.js.map +1 -1
package/dist/components/select/select.component.js +33 -30
package/dist/components/select/select.component.js.map +1 -1
package/dist/components/table/table-header.component.d.ts +5 -1
package/dist/components/table/table-header.component.js +24 -18
package/dist/components/table/table-header.component.js.map +1 -1
package/dist/components/table/table.component.d.ts +3 -3
package/dist/components/table/table.component.js +31 -29
package/dist/components/table/table.component.js.map +1 -1
package/dist/localization/locales/de.json.js +7 -7
package/dist/localization/locales/en.json.js +6 -6
package/dist/localization/locales/hu.json.js +1 -1
package/dist/manifest/types/vue/index.d.ts +281 -278
package/dist/manifest/vscode.html-custom-data.json +262 -252
package/dist/manifest/web-types.json +375 -355
package/dist/react/index.d.ts +9 -9
package/dist/react-types.ts +10 -10
package/dist/react.js +124 -124
package/package.json +4 -1

package/dist/components/select/select.component.js CHANGED Viewed

@@ -23,29 +23,29 @@ import { state as $ } from "../../node_modules/@lit/reactive-element/decorators/
 import { query as v } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as o } from "../../node_modules/lit-html/directives/if-defined.js";
 import { html as i } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as D } from "../../common/utils.js";
-import { GenericFormElement as w } from "../../internal/mixin/genericFormElement.js";
+import { getValidityStateObject as D, idInScope as w } from "../../common/utils.js";
+import { GenericFormElement as k } from "../../internal/mixin/genericFormElement.js";
 import "../../localization/localization.js";
-import k from "../feedback/feedback.component.js";
-import S from "../form/form-label/form-label.component.js";
-import A from "../icon/icon.component.js";
+import S from "../feedback/feedback.component.js";
+import A from "../form/form-label/form-label.component.js";
+import I from "../icon/icon.component.js";
 import L from "../icon-button/icon-button.component.js";
 import C from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
-import I from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
-import x from "../option-list/option-list.component.js";
-import V from "../popup/popup.component.js";
-import O from "../tooltip/tooltip.component.js";
-import T from "../tray/tray.component.js";
-import B from "../typography/typography.component.js";
-import q from "./select.scss.js";
-import g, { t as N } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as z } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var M = Object.defineProperty, n = (u, e, t, s) => {
+import x from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import V from "../option-list/option-list.component.js";
+import O from "../popup/popup.component.js";
+import T from "../tooltip/tooltip.component.js";
+import B from "../tray/tray.component.js";
+import q from "../typography/typography.component.js";
+import N from "./select.scss.js";
+import g, { t as z } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as M } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var E = Object.defineProperty, n = (u, e, t, s) => {
   for (var l = void 0, p = u.length - 1, m; p >= 0; p--)
     (m = u[p]) && (l = m(e, t, l) || l);
-  return l && M(e, t, l), l;
+  return l && E(e, t, l), l;
 };
-const c = class c extends w {
+const c = class c extends k {
   constructor() {
     super(...arguments), this.placement = "bottom-start", this.opened = !1, this.isMobile = !1, this.native = !1, this.loading = !1, this.noAnimation = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this.languageChangeHandler = () => {
       this.requestUpdate();
@@ -142,7 +142,7 @@ const c = class c extends w {
     });
   }
   get validationMessage() {
-    return N("form.validationMessage.select");
+    return z("form.validationMessage.select");
   }
   /** Get the current display text for the selected item, dynamically fetching from the option */
   get selectedDisplayText() {
@@ -231,7 +231,6 @@ const c = class c extends w {
     `;
   }
   renderTriggerElement() {
-    var e;
     return i` <button
       slot="trigger"
       part="trigger"
@@ -257,7 +256,11 @@ const c = class c extends w {
       aria-describedby=${o(this.getAriaDescribedBy())}
       aria-disabled=${this.disabled}
       aria-controls="option-list"
-      aria-activedescendant=${o((e = this.getActiveDescendant()) == null ? void 0 : e.id)}
+      aria-activedescendant=${o(
+      // Options render in option-list's shadow root, out of this scope; a
+      // cross-scope IDREF is ignored by browsers, so only same-scope ids are set
+      w(this.shadowRoot, this.getActiveDescendant())
+    )}
       ?required=${this.required}
       ?readonly=${this.readonly}
       ?autofocus=${this.autofocus}
@@ -382,18 +385,18 @@ const c = class c extends w {
   }
 };
 c.tagName = "dap-ds-select", c.dependencies = {
-  "dap-ds-icon-loading-spinner": I,
+  "dap-ds-icon-loading-spinner": x,
   "dap-ds-icon-arrow-down-s-line": C,
-  "dap-ds-option-list": x,
-  "dap-ds-form-label": S,
-  "dap-ds-tooltip": O,
+  "dap-ds-option-list": V,
+  "dap-ds-form-label": A,
+  "dap-ds-tooltip": T,
   "dap-ds-icon-button": L,
-  "dap-ds-icon": A,
-  "dap-ds-typography": B,
-  "dap-ds-popup": V,
-  "dap-ds-tray": T,
-  "dap-ds-feedback": k
-}, c.styles = z(q);
+  "dap-ds-icon": I,
+  "dap-ds-typography": q,
+  "dap-ds-popup": O,
+  "dap-ds-tray": B,
+  "dap-ds-feedback": S
+}, c.styles = M(N);
 let a = c;
 n([
   v("button")

package/dist/components/select/select.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n CommonFormElementSize,\n FloatingStrategy,\n PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/*\n `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n \n @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n \n @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' \| 'sm' \| 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative \| positive \| warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '')\n @property {boolean} subtle - The weight of the label. Default is `false`\n \n @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n \n @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n \n @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n /\nexport default class DapDSSelect extends GenericFormElement {\n static tagName = 'dap-ds-select'\n\n static dependencies = {\n 'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n 'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n 'dap-ds-option-list': DapDSOptionList,\n 'dap-ds-form-label': DapDSFormLabel,\n 'dap-ds-tooltip': DapDSTooltip,\n 'dap-ds-icon-button': DapDSIconButton,\n 'dap-ds-icon': DapDSIcon,\n 'dap-ds-typography': DapDSTypography,\n 'dap-ds-popup': DapDSPopup,\n 'dap-ds-tray': DapDSTray,\n 'dap-ds-feedback': DapDSFeedback,\n }\n\n /\n @ignore\n /\n @query('button') triggerButton!: HTMLButtonElement\n\n /\n @ignore\n /\n @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n /* The popup placement of the select\n * @type {'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start'\| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'}\n /\n @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n /* Whether the select dropdown is opened./\n @property({ type: Boolean, reflect: true }) opened? = false\n\n /* The placeholder of the select. /\n @property() placeholder: string \| null\n\n /* The sync size of the select dropdown /\n @property({ type: Boolean }) sync?: boolean\n\n /* Whether the select is in mobile mode. /\n @property({ type: Boolean }) isMobile?: boolean = false\n\n /* Whether to render a native HTML select element for mobile-friendly option selection. /\n @property({ type: Boolean }) native?: boolean = false\n\n /* The loading state of the select. /\n @property({ type: Boolean }) loading?: boolean = false\n\n /* The max heigth of the select dropdown. /\n @property({ type: Number }) maxHeight?: number\n\n /* Whether the select dropdown indicator is animated or not /\n @property({ type: Boolean }) noAnimation?: boolean = false\n\n /* The floating strategy of the select dropdown\n * @type {'absolute' \| 'fixed'}\n /\n @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n /* Whether to keep popup open when trigger leaves viewport. /\n @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n /\n @ignore\n /\n @state() selectedItem: any\n\n static readonly styles = unsafeCSS(styles)\n\n private languageChangeHandler = () => {\n // Force re-render when language changes to update selectedDisplayText\n this.requestUpdate()\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n // Listen for language changes to update the displayed text\n i18next.on('languageChanged', this.languageChangeHandler)\n\n // Ensure native browser validation UI is suppressed by default,\n // similar to other form components (inputs, combobox, etc.)\n this.addEventListener('invalid', this.handleInvalid)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n // Clean up language change listener\n i18next.off('languageChanged', this.languageChangeHandler)\n\n this.removeEventListener('invalid', this.handleInvalid)\n }\n\n /\n Lifecycle method to handle property changes\n /\n updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties)\n\n // Handle when value is set to undefined or null externally\n if (changedProperties.has('value')) {\n const newValue = this.value\n if (newValue === undefined \|\| newValue === null) {\n if (this.selectedItem !== null) {\n this.selectedItem = null\n this.setValidity()\n }\n }\n }\n }\n\n private readonly handleClick = () => {\n if (this.readonly \|\| this.disabled) {\n return\n }\n\n this.opened ? this.hideDropDown() : this.showDropDown()\n }\n\n private readonly handleKeyDown = async (event: KeyboardEvent) => {\n if (event.key === 'Tab' \|\| event.key === 'Shift') {\n return\n }\n\n if (this.readonly) {\n return\n }\n\n event.preventDefault()\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n return this.opened ? this.hideDropDown() : this.showDropDown()\n }\n\n if (event.key === 'Escape') {\n this.hideDropDown()\n return this.focus()\n }\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight'\n ) {\n if (!this.opened) {\n return this.showDropDown()\n }\n\n return\n }\n\n this.emit('dds-keydown', event)\n\n // typing\n this.showDropDown(event.key)\n }\n\n private readonly handleListKeyDown = (event: CustomEvent) => {\n if (event.detail?.key === 'Tab') {\n // Return focus to the trigger synchronously so the native Tab continues\n // from there and leaves the select instead of cycling inside the list.\n this.hideDropDown({ skipFocus: true })\n this.focus()\n return\n }\n\n if (event.detail?.key === 'Escape') {\n this.hideDropDown()\n }\n }\n\n private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n const path = event.composedPath()\n if (this && !path.includes(this)) {\n this.hideDropDown()\n }\n }\n\n private readonly handlePopupAutoClose = () => {\n this.hideDropDown({ skipFocus: true })\n }\n\n private readonly handleFocus = () => {\n this.emit('dds-focus')\n }\n\n private readonly handleBlur = () => {\n this.emit('dds-blur')\n }\n\n formResetCallback() {\n this.internals.setValidity({})\n this.internals.setFormValue(this.defaultValue)\n this.value = this.defaultValue\n this.selectedItem = this.defaultValue\n }\n\n async showDropDown(key?: string) {\n if (this.opened) {\n return\n }\n\n this.opened = true\n\n document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n await this.updateComplete\n this.optionList.captureFocus(key)\n\n // Force update to ensure aria-activedescendant is set correctly\n await this.updateComplete\n\n this.emit('dds-opened')\n }\n\n async hideDropDown(options?: { skipFocus?: boolean }) {\n if (!this.opened) {\n return\n }\n\n this.opened = false\n\n document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n await this.updateComplete\n this.optionList.removeFocus()\n\n if (!options?.skipFocus) {\n this.focus()\n }\n\n this.emit('dds-closed')\n }\n\n get focusElement() {\n return this.triggerButton\n }\n\n /\n Get the active descendant element for aria-activedescendant\n * Returns the currently focused option when dropdown is open, otherwise null\n /\n getActiveDescendant() {\n if (!this.opened) {\n return null\n }\n\n const activeOption = this.optionList?.getActiveOption()\n return activeOption\n }\n\n /\n Get the aria-describedby value, combining description and feedback IDs\n /\n private getAriaDescribedBy(): string \| undefined {\n const ids: string[] = []\n if (this.description) {\n ids.push('description')\n }\n if (this.feedback) {\n ids.push('feedback')\n }\n return ids.length > 0 ? ids.join(' ') : undefined\n }\n\n // custom validation\n get validity(): ValidityState {\n if (this.internals.validity) {\n return this.internals.validity\n } else {\n return getValidityStateObject({\n valueMissing:\n this.required &&\n (!this.selectedItem \|\|\n this.selectedItem.value === '' \|\|\n this.value === '' \|\|\n this.value === undefined \|\|\n this.value === null),\n })\n }\n }\n\n get validationMessage(): string {\n return t('form.validationMessage.select')\n }\n\n /* Get the current display text for the selected item, dynamically fetching from the option */\n get selectedDisplayText(): string \| null {\n if (!this.selectedItem) return null\n\n // Try to get the current text from the actual option element (reactive to language changes)\n if (this.optionList) {\n const currentOption = Array.from(\n this.optionList.querySelectorAll('dap-ds-option-item'),\n ).find((opt: any) => opt.value === this.selectedItem.value)\n\n if (currentOption) {\n return (currentOption as any).optionText\n }\n }\n\n // Fallback to cached text if option not found\n return this.selectedItem.text\n }\n\n checkValidity() {\n const hasValue =\n !!this.selectedItem &&\n this.selectedItem.value !== '' &&\n this.value !== '' &&\n this.value !== undefined &&\n this.value !== null\n\n return this.required ? hasValue : true\n }\n\n reportValidity() {\n return this.required ? this.checkValidity() : true\n }\n\n setValidity() {\n const isValid = this.checkValidity()\n\n if (!isValid) {\n this.internals.setValidity(\n {\n valueMissing:\n this.required &&\n (!this.selectedItem \|\|\n this.selectedItem.value === '' \|\|\n this.value === '' \|\|\n this.value === undefined \|\|\n this.value === null),\n },\n this.validationMessage,\n this.triggerButton,\n )\n } else {\n this.internals.setValidity({})\n }\n }\n\n handleInvalid(event: Event) {\n event.preventDefault()\n this.focus()\n }\n\n private readonly handleSelectedChange = (event: CustomEvent) => {\n const val = Object.keys(event.detail).length ? event.detail : null\n const newValue = val?.value\n // The option-list echoes dds-option-change whenever its value is synced from\n // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n // as a user change. A genuine selection changes the value here; a programmatic\n // one has already set it before the echo arrives. Emit only on a real change.\n const changed = newValue !== this.value\n this.selectedItem = val\n this.hideDropDown()\n this.value = newValue\n if (changed) {\n this.emit('dds-change', this.selectedItem)\n }\n\n this.setValidity()\n }\n\n private readonly handleOptionDeselect = () => {\n this.selectedItem = null\n this.value = undefined\n this.emit('dds-change', null)\n\n this.setValidity()\n }\n\n private readonly handleNativeChange = (event: Event) => {\n const select = event.target as HTMLSelectElement\n const value = select.value\n\n // Find matching option-item to get full item data\n const optionItem = this.querySelector(\n `dap-ds-option-item[value=\"${value}\"]`,\n ) as DapDSOptionItem \| null\n\n this.value = value\n this.selectedItem = optionItem\n ? { value, text: optionItem.optionText }\n : { value, text: value }\n\n this.emit('dds-change', this.selectedItem)\n this.setValidity()\n }\n\n private renderNativeOption(item: DapDSOptionItem) {\n return html`\n <option\n value=${item.value \|\| ''}\n ?disabled=${item.disabled}\n ?selected=${item.value === this.value}>\n ${item.optionText}\n </option>\n `\n }\n\n private renderNativeOptgroup(group: DapDSOptionGroup) {\n const options = Array.from(\n group.querySelectorAll('dap-ds-option-item'),\n ) as DapDSOptionItem[]\n return html`\n <optgroup label=${group.label \|\| ''} ?disabled=${group.disabled}>\n ${options.map(opt => this.renderNativeOption(opt))}\n </optgroup>\n `\n }\n\n private renderNativeOptions() {\n const children = Array.from(this.children)\n return children.map(child => {\n if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n return this.renderNativeOptgroup(child as DapDSOptionGroup)\n } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n return this.renderNativeOption(child as DapDSOptionItem)\n }\n return ''\n })\n }\n\n private renderNativeSelect() {\n return html`\n <div class=\"select-wrapper--native\">\n <select\n class=\"${clsx('select', `select--${this.effectiveSize}`, {\n 'select--disabled': this.disabled,\n 'select--readonly': this.readonly,\n 'select--success': this.status === 'success',\n 'select--error': this.status === 'error',\n 'select--loading': this.loading,\n })}\"\n part=\"trigger\"\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n ?disabled=${this.disabled}\n ?required=${this.required}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}>\n ${this.placeholder\n ? html`<option value=\"\" disabled ?selected=${!this.value}>\n ${this.placeholder}\n </option>`\n : ''}\n ${this.renderNativeOptions()}\n </select>\n <div class=\"icon\" part=\"indicator-icon\">\n ${this.loading\n ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n : html`<slot name=\"indicator-icon\"\n ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n ></slot>`}\n </div>\n </div>\n `\n }\n\n renderTriggerElement() {\n return html` <button\n slot=\"trigger\"\n part=\"trigger\"\n role=\"combobox\"\n class=\"${clsx('select', `select--${this.effectiveSize}`, {\n 'select--disabled': this.disabled,\n 'select--readonly': this.readonly,\n 'select--opened': this.opened,\n 'select--loading': this.loading,\n 'select--success': this.status === 'success',\n 'select--error': this.status === 'error',\n 'select--no-animation': this.noAnimation,\n 'select--optional': this.optional,\n })}\"\n aria-expanded=${this.readonly \|\| this.disabled\n ? 'false'\n : this.opened\n ? 'true'\n : 'false'}\n aria-haspopup=${ifDefined(\n this.readonly \|\| this.disabled ? undefined : 'listbox',\n )}\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n aria-label=${ifDefined(\n this.label\n ? undefined\n : this.ariaLabel \|\|\n this.selectedDisplayText \|\|\n this.placeholder \|\|\n undefined,\n )}\n aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n aria-disabled=${this.disabled}\n aria-controls=\"option-list\"\n aria-activedescendant=${ifDefined(this.getActiveDescendant()?.id)}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n tabindex=${this.readonly \|\| this.disabled ? -1 : 0}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @keydown=${this.handleKeyDown}\n @click=${this.handleClick}>\n <span class=\"text\">${this.selectedDisplayText \|\| this.placeholder}</span>\n <div\n class=\"${clsx('icon', {\n 'icon--opened': this.opened,\n 'icon--no-animation': this.noAnimation,\n })}\"\n part=\"indicator-icon\">\n ${this.loading\n ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n : html`<slot name=\"indicator-icon\"\n ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n ></slot>`}\n </div>\n </button>`\n }\n\n renderOptionList() {\n return html` <dap-ds-option-list\n class=\"option-list\"\n part=\"option-list\"\n exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n id=\"option-list\"\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n searchMode=\"typehead\"\n size=${ifDefined(this.effectiveSize)}\n value=${this.value}\n disableDelaySet\n @dds-option-change=${this.handleSelectedChange}\n @dds-keydown=${this.handleListKeyDown}\n @dds-option-deselect=${this.handleOptionDeselect}>\n <slot></slot>\n </dap-ds-option-list>`\n }\n\n render() {\n return html` <div class=\"label-container\">\n ${this.label &&\n html`<dap-ds-form-label\n part=\"label\"\n id=\"label\"\n .size=${this.effectiveSize}\n .required=${this.required}\n .requiredLabel=${this.requiredLabel}\n .optional=${this.optional}\n .optionalLabel=${this.optionalLabel}\n .subtle=${this.subtle}\n .disabled=${this.disabled}\n class=${clsx('label')}\n .noMargin=${!!this.description}\n for=\"input\"\n .hideLabel=${this.hideLabel}\n label=${ifDefined(this.label)}>\n </dap-ds-form-label>`}\n ${this.tooltip &&\n html` <dap-ds-tooltip\n part=\"tooltip\"\n content=${this.tooltip}\n mode=\"toggle\"\n placement=${this.tooltipPlacement}>\n <dap-ds-icon-button\n clean\n slot=\"trigger\"\n size=${this.effectiveSize as 'xs' \| 'sm' \| 'md' \| 'lg'}\n iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n aria-label=${this.tooltipAriaLabel}\n class=\"input-group__toggle-button\">\n <dap-ds-icon\n name=\"information-line\"\n class=\"info-button\"></dap-ds-icon>\n </dap-ds-icon-button>\n </dap-ds-tooltip>`}\n </div>\n ${this.description &&\n html`\n <dap-ds-typography\n part=\"description\"\n variant=\"description\"\n class=${clsx('input-description')}\n size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n id=\"description\">\n ${this.description}\n </dap-ds-typography>\n `}\n <div>\n ${this.native\n ? this.renderNativeSelect()\n : !this.isMobile\n ? html`<dap-ds-popup\n floatingStrategy=${ifDefined(this.floatingStrategy)}\n part=\"base\"\n exportparts=\"popup:popup-base\"\n class=\"select-popup\"\n ?opened=${this.opened}\n ?hasArrow=${false}\n overflow\n placement=${this.placement}\n maxHeight=${ifDefined(this.maxHeight)}\n ?sync=${this.sync}\n ?disableViewportAutoClose=${this.disableViewportAutoClose}\n @dds-close=${this.handlePopupAutoClose}\n size=${ifDefined(this.effectiveSize) as 'lg' \| 'sm' \| 'xs'}>\n ${this.renderTriggerElement()} ${this.renderOptionList()}\n </dap-ds-popup>`\n : html`\n ${this.renderTriggerElement()}\n <dap-ds-tray\n part=\"mobile-tray\"\n exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n ?open=${this.opened}\n closeButton=\"false\"\n header=\"false\"\n >${this.renderOptionList()}</dap-ds-tray\n >\n `}\n ${this.feedback &&\n html`<dap-ds-feedback\n part=\"feedback\"\n feedbackType=${ifDefined(this.feedbackType)}\n feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' \| 'sm' \| 'xs')}\"\n id=\"feedback\"\n .subtle=${this.subtle}>\n ${this.feedback}\n </dap-ds-feedback>`}\n </div>`\n }\n}\n"],"names":["_DapDSSelect","GenericFormElement","event","__async","_a","_b","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}
1	+ {"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n CommonFormElementSize,\n FloatingStrategy,\n PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject, idInScope } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/*\n `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n \n @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n \n @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' \| 'sm' \| 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative \| positive \| warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '')\n @property {boolean} subtle - The weight of the label. Default is `false`\n \n @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n \n @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n \n @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n /\nexport default class DapDSSelect extends GenericFormElement {\n static tagName = 'dap-ds-select'\n\n static dependencies = {\n 'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n 'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n 'dap-ds-option-list': DapDSOptionList,\n 'dap-ds-form-label': DapDSFormLabel,\n 'dap-ds-tooltip': DapDSTooltip,\n 'dap-ds-icon-button': DapDSIconButton,\n 'dap-ds-icon': DapDSIcon,\n 'dap-ds-typography': DapDSTypography,\n 'dap-ds-popup': DapDSPopup,\n 'dap-ds-tray': DapDSTray,\n 'dap-ds-feedback': DapDSFeedback,\n }\n\n /\n @ignore\n /\n @query('button') triggerButton!: HTMLButtonElement\n\n /\n @ignore\n /\n @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n /* The popup placement of the select\n * @type {'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start'\| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'}\n /\n @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n /* Whether the select dropdown is opened./\n @property({ type: Boolean, reflect: true }) opened? = false\n\n /* The placeholder of the select. /\n @property() placeholder: string \| null\n\n /* The sync size of the select dropdown /\n @property({ type: Boolean }) sync?: boolean\n\n /* Whether the select is in mobile mode. /\n @property({ type: Boolean }) isMobile?: boolean = false\n\n /* Whether to render a native HTML select element for mobile-friendly option selection. /\n @property({ type: Boolean }) native?: boolean = false\n\n /* The loading state of the select. /\n @property({ type: Boolean }) loading?: boolean = false\n\n /* The max heigth of the select dropdown. /\n @property({ type: Number }) maxHeight?: number\n\n /* Whether the select dropdown indicator is animated or not /\n @property({ type: Boolean }) noAnimation?: boolean = false\n\n /* The floating strategy of the select dropdown\n * @type {'absolute' \| 'fixed'}\n /\n @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n /* Whether to keep popup open when trigger leaves viewport. /\n @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n /\n @ignore\n /\n @state() selectedItem: any\n\n static readonly styles = unsafeCSS(styles)\n\n private languageChangeHandler = () => {\n // Force re-render when language changes to update selectedDisplayText\n this.requestUpdate()\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n // Listen for language changes to update the displayed text\n i18next.on('languageChanged', this.languageChangeHandler)\n\n // Ensure native browser validation UI is suppressed by default,\n // similar to other form components (inputs, combobox, etc.)\n this.addEventListener('invalid', this.handleInvalid)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n // Clean up language change listener\n i18next.off('languageChanged', this.languageChangeHandler)\n\n this.removeEventListener('invalid', this.handleInvalid)\n }\n\n /\n Lifecycle method to handle property changes\n /\n updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties)\n\n // Handle when value is set to undefined or null externally\n if (changedProperties.has('value')) {\n const newValue = this.value\n if (newValue === undefined \|\| newValue === null) {\n if (this.selectedItem !== null) {\n this.selectedItem = null\n this.setValidity()\n }\n }\n }\n }\n\n private readonly handleClick = () => {\n if (this.readonly \|\| this.disabled) {\n return\n }\n\n this.opened ? this.hideDropDown() : this.showDropDown()\n }\n\n private readonly handleKeyDown = async (event: KeyboardEvent) => {\n if (event.key === 'Tab' \|\| event.key === 'Shift') {\n return\n }\n\n if (this.readonly) {\n return\n }\n\n event.preventDefault()\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n return this.opened ? this.hideDropDown() : this.showDropDown()\n }\n\n if (event.key === 'Escape') {\n this.hideDropDown()\n return this.focus()\n }\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight'\n ) {\n if (!this.opened) {\n return this.showDropDown()\n }\n\n return\n }\n\n this.emit('dds-keydown', event)\n\n // typing\n this.showDropDown(event.key)\n }\n\n private readonly handleListKeyDown = (event: CustomEvent) => {\n if (event.detail?.key === 'Tab') {\n // Return focus to the trigger synchronously so the native Tab continues\n // from there and leaves the select instead of cycling inside the list.\n this.hideDropDown({ skipFocus: true })\n this.focus()\n return\n }\n\n if (event.detail?.key === 'Escape') {\n this.hideDropDown()\n }\n }\n\n private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n const path = event.composedPath()\n if (this && !path.includes(this)) {\n this.hideDropDown()\n }\n }\n\n private readonly handlePopupAutoClose = () => {\n this.hideDropDown({ skipFocus: true })\n }\n\n private readonly handleFocus = () => {\n this.emit('dds-focus')\n }\n\n private readonly handleBlur = () => {\n this.emit('dds-blur')\n }\n\n formResetCallback() {\n this.internals.setValidity({})\n this.internals.setFormValue(this.defaultValue)\n this.value = this.defaultValue\n this.selectedItem = this.defaultValue\n }\n\n async showDropDown(key?: string) {\n if (this.opened) {\n return\n }\n\n this.opened = true\n\n document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n await this.updateComplete\n this.optionList.captureFocus(key)\n\n // Force update to ensure aria-activedescendant is set correctly\n await this.updateComplete\n\n this.emit('dds-opened')\n }\n\n async hideDropDown(options?: { skipFocus?: boolean }) {\n if (!this.opened) {\n return\n }\n\n this.opened = false\n\n document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n await this.updateComplete\n this.optionList.removeFocus()\n\n if (!options?.skipFocus) {\n this.focus()\n }\n\n this.emit('dds-closed')\n }\n\n get focusElement() {\n return this.triggerButton\n }\n\n /\n Get the active descendant element for aria-activedescendant\n * Returns the currently focused option when dropdown is open, otherwise null\n /\n getActiveDescendant() {\n if (!this.opened) {\n return null\n }\n\n const activeOption = this.optionList?.getActiveOption()\n return activeOption\n }\n\n /\n Get the aria-describedby value, combining description and feedback IDs\n /\n private getAriaDescribedBy(): string \| undefined {\n const ids: string[] = []\n if (this.description) {\n ids.push('description')\n }\n if (this.feedback) {\n ids.push('feedback')\n }\n return ids.length > 0 ? ids.join(' ') : undefined\n }\n\n // custom validation\n get validity(): ValidityState {\n if (this.internals.validity) {\n return this.internals.validity\n } else {\n return getValidityStateObject({\n valueMissing:\n this.required &&\n (!this.selectedItem \|\|\n this.selectedItem.value === '' \|\|\n this.value === '' \|\|\n this.value === undefined \|\|\n this.value === null),\n })\n }\n }\n\n get validationMessage(): string {\n return t('form.validationMessage.select')\n }\n\n /* Get the current display text for the selected item, dynamically fetching from the option */\n get selectedDisplayText(): string \| null {\n if (!this.selectedItem) return null\n\n // Try to get the current text from the actual option element (reactive to language changes)\n if (this.optionList) {\n const currentOption = Array.from(\n this.optionList.querySelectorAll('dap-ds-option-item'),\n ).find((opt: any) => opt.value === this.selectedItem.value)\n\n if (currentOption) {\n return (currentOption as any).optionText\n }\n }\n\n // Fallback to cached text if option not found\n return this.selectedItem.text\n }\n\n checkValidity() {\n const hasValue =\n !!this.selectedItem &&\n this.selectedItem.value !== '' &&\n this.value !== '' &&\n this.value !== undefined &&\n this.value !== null\n\n return this.required ? hasValue : true\n }\n\n reportValidity() {\n return this.required ? this.checkValidity() : true\n }\n\n setValidity() {\n const isValid = this.checkValidity()\n\n if (!isValid) {\n this.internals.setValidity(\n {\n valueMissing:\n this.required &&\n (!this.selectedItem \|\|\n this.selectedItem.value === '' \|\|\n this.value === '' \|\|\n this.value === undefined \|\|\n this.value === null),\n },\n this.validationMessage,\n this.triggerButton,\n )\n } else {\n this.internals.setValidity({})\n }\n }\n\n handleInvalid(event: Event) {\n event.preventDefault()\n this.focus()\n }\n\n private readonly handleSelectedChange = (event: CustomEvent) => {\n const val = Object.keys(event.detail).length ? event.detail : null\n const newValue = val?.value\n // The option-list echoes dds-option-change whenever its value is synced from\n // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n // as a user change. A genuine selection changes the value here; a programmatic\n // one has already set it before the echo arrives. Emit only on a real change.\n const changed = newValue !== this.value\n this.selectedItem = val\n this.hideDropDown()\n this.value = newValue\n if (changed) {\n this.emit('dds-change', this.selectedItem)\n }\n\n this.setValidity()\n }\n\n private readonly handleOptionDeselect = () => {\n this.selectedItem = null\n this.value = undefined\n this.emit('dds-change', null)\n\n this.setValidity()\n }\n\n private readonly handleNativeChange = (event: Event) => {\n const select = event.target as HTMLSelectElement\n const value = select.value\n\n // Find matching option-item to get full item data\n const optionItem = this.querySelector(\n `dap-ds-option-item[value=\"${value}\"]`,\n ) as DapDSOptionItem \| null\n\n this.value = value\n this.selectedItem = optionItem\n ? { value, text: optionItem.optionText }\n : { value, text: value }\n\n this.emit('dds-change', this.selectedItem)\n this.setValidity()\n }\n\n private renderNativeOption(item: DapDSOptionItem) {\n return html`\n <option\n value=${item.value \|\| ''}\n ?disabled=${item.disabled}\n ?selected=${item.value === this.value}>\n ${item.optionText}\n </option>\n `\n }\n\n private renderNativeOptgroup(group: DapDSOptionGroup) {\n const options = Array.from(\n group.querySelectorAll('dap-ds-option-item'),\n ) as DapDSOptionItem[]\n return html`\n <optgroup label=${group.label \|\| ''} ?disabled=${group.disabled}>\n ${options.map(opt => this.renderNativeOption(opt))}\n </optgroup>\n `\n }\n\n private renderNativeOptions() {\n const children = Array.from(this.children)\n return children.map(child => {\n if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n return this.renderNativeOptgroup(child as DapDSOptionGroup)\n } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n return this.renderNativeOption(child as DapDSOptionItem)\n }\n return ''\n })\n }\n\n private renderNativeSelect() {\n return html`\n <div class=\"select-wrapper--native\">\n <select\n class=\"${clsx('select', `select--${this.effectiveSize}`, {\n 'select--disabled': this.disabled,\n 'select--readonly': this.readonly,\n 'select--success': this.status === 'success',\n 'select--error': this.status === 'error',\n 'select--loading': this.loading,\n })}\"\n part=\"trigger\"\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n ?disabled=${this.disabled}\n ?required=${this.required}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}>\n ${this.placeholder\n ? html`<option value=\"\" disabled ?selected=${!this.value}>\n ${this.placeholder}\n </option>`\n : ''}\n ${this.renderNativeOptions()}\n </select>\n <div class=\"icon\" part=\"indicator-icon\">\n ${this.loading\n ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n : html`<slot name=\"indicator-icon\"\n ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n ></slot>`}\n </div>\n </div>\n `\n }\n\n renderTriggerElement() {\n return html` <button\n slot=\"trigger\"\n part=\"trigger\"\n role=\"combobox\"\n class=\"${clsx('select', `select--${this.effectiveSize}`, {\n 'select--disabled': this.disabled,\n 'select--readonly': this.readonly,\n 'select--opened': this.opened,\n 'select--loading': this.loading,\n 'select--success': this.status === 'success',\n 'select--error': this.status === 'error',\n 'select--no-animation': this.noAnimation,\n 'select--optional': this.optional,\n })}\"\n aria-expanded=${this.readonly \|\| this.disabled\n ? 'false'\n : this.opened\n ? 'true'\n : 'false'}\n aria-haspopup=${ifDefined(\n this.readonly \|\| this.disabled ? undefined : 'listbox',\n )}\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n aria-label=${ifDefined(\n this.label\n ? undefined\n : this.ariaLabel \|\|\n this.selectedDisplayText \|\|\n this.placeholder \|\|\n undefined,\n )}\n aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n aria-disabled=${this.disabled}\n aria-controls=\"option-list\"\n aria-activedescendant=${ifDefined(\n // Options render in option-list's shadow root, out of this scope; a\n // cross-scope IDREF is ignored by browsers, so only same-scope ids are set\n idInScope(this.shadowRoot, this.getActiveDescendant()),\n )}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n tabindex=${this.readonly \|\| this.disabled ? -1 : 0}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @keydown=${this.handleKeyDown}\n @click=${this.handleClick}>\n <span class=\"text\">${this.selectedDisplayText \|\| this.placeholder}</span>\n <div\n class=\"${clsx('icon', {\n 'icon--opened': this.opened,\n 'icon--no-animation': this.noAnimation,\n })}\"\n part=\"indicator-icon\">\n ${this.loading\n ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n : html`<slot name=\"indicator-icon\"\n ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n ></slot>`}\n </div>\n </button>`\n }\n\n renderOptionList() {\n return html` <dap-ds-option-list\n class=\"option-list\"\n part=\"option-list\"\n exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n id=\"option-list\"\n aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n searchMode=\"typehead\"\n size=${ifDefined(this.effectiveSize)}\n value=${this.value}\n disableDelaySet\n @dds-option-change=${this.handleSelectedChange}\n @dds-keydown=${this.handleListKeyDown}\n @dds-option-deselect=${this.handleOptionDeselect}>\n <slot></slot>\n </dap-ds-option-list>`\n }\n\n render() {\n return html` <div class=\"label-container\">\n ${this.label &&\n html`<dap-ds-form-label\n part=\"label\"\n id=\"label\"\n .size=${this.effectiveSize}\n .required=${this.required}\n .requiredLabel=${this.requiredLabel}\n .optional=${this.optional}\n .optionalLabel=${this.optionalLabel}\n .subtle=${this.subtle}\n .disabled=${this.disabled}\n class=${clsx('label')}\n .noMargin=${!!this.description}\n for=\"input\"\n .hideLabel=${this.hideLabel}\n label=${ifDefined(this.label)}>\n </dap-ds-form-label>`}\n ${this.tooltip &&\n html` <dap-ds-tooltip\n part=\"tooltip\"\n content=${this.tooltip}\n mode=\"toggle\"\n placement=${this.tooltipPlacement}>\n <dap-ds-icon-button\n clean\n slot=\"trigger\"\n size=${this.effectiveSize as 'xs' \| 'sm' \| 'md' \| 'lg'}\n iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n aria-label=${this.tooltipAriaLabel}\n class=\"input-group__toggle-button\">\n <dap-ds-icon\n name=\"information-line\"\n class=\"info-button\"></dap-ds-icon>\n </dap-ds-icon-button>\n </dap-ds-tooltip>`}\n </div>\n ${this.description &&\n html`\n <dap-ds-typography\n part=\"description\"\n variant=\"description\"\n class=${clsx('input-description')}\n size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n id=\"description\">\n ${this.description}\n </dap-ds-typography>\n `}\n <div>\n ${this.native\n ? this.renderNativeSelect()\n : !this.isMobile\n ? html`<dap-ds-popup\n floatingStrategy=${ifDefined(this.floatingStrategy)}\n part=\"base\"\n exportparts=\"popup:popup-base\"\n class=\"select-popup\"\n ?opened=${this.opened}\n ?hasArrow=${false}\n overflow\n placement=${this.placement}\n maxHeight=${ifDefined(this.maxHeight)}\n ?sync=${this.sync}\n ?disableViewportAutoClose=${this.disableViewportAutoClose}\n @dds-close=${this.handlePopupAutoClose}\n size=${ifDefined(this.effectiveSize) as 'lg' \| 'sm' \| 'xs'}>\n ${this.renderTriggerElement()} ${this.renderOptionList()}\n </dap-ds-popup>`\n : html`\n ${this.renderTriggerElement()}\n <dap-ds-tray\n part=\"mobile-tray\"\n exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n ?open=${this.opened}\n closeButton=\"false\"\n header=\"false\"\n >${this.renderOptionList()}</dap-ds-tray\n >\n `}\n ${this.feedback &&\n html`<dap-ds-feedback\n part=\"feedback\"\n feedbackType=${ifDefined(this.feedbackType)}\n feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' \| 'sm' \| 'xs')}\"\n id=\"feedback\"\n .subtle=${this.subtle}>\n ${this.feedback}\n </dap-ds-feedback>`}\n </div>`\n }\n}\n"],"names":["_DapDSSelect","GenericFormElement","event","__async","_a","_b","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","idInScope","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/table/table-header.component.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
 /**
  * Table header cell component.
@@ -23,7 +24,10 @@ export default class DapDSTableHeader extends DdsElement {
     static readonly styles: import('lit').CSSResult;
     /**If the header cell is the last one.*/
     last: boolean;
-    /** The html role of the header cell */
+    /** The html role of the header cell. Derived from `scope` unless set explicitly. */
     role: string;
+    /** Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */
+    scope: 'col' | 'row';
+    protected willUpdate(changedProperties: PropertyValueMap<this>): void;
     render(): import('lit-html').TemplateResult;
 }

package/dist/components/table/table-header.component.js CHANGED Viewed

@@ -1,32 +1,38 @@
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
 import "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import { DdsElement as n } from "../../internal/dds-hu-element.js";
-import u from "./table-header.scss.js";
-import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var d = Object.defineProperty, a = (s, m, p, h) => {
-  for (var t = void 0, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (t = i(m, p, t) || t);
-  return t && d(m, p, t), t;
+import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { html as c } from "../../node_modules/lit-html/static.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import n from "./table-header.scss.js";
+import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, i = (l, e, a, d) => {
+  for (var t = void 0, s = l.length - 1, m; s >= 0; s--)
+    (m = l[s]) && (t = m(e, a, t) || t);
+  return t && u(e, a, t), t;
 };
-const e = class e extends n {
+const o = class o extends f {
   constructor() {
-    super(...arguments), this.role = "columnheader";
+    super(...arguments), this.role = "columnheader", this.scope = "col";
+  }
+  willUpdate(e) {
+    e.has("scope") && this.hasAttribute("scope") && (this.role = this.scope === "row" ? "rowheader" : "columnheader");
   }
   render() {
-    return f` <slot part="base"></slot> `;
+    return c` <slot part="base"></slot> `;
   }
 };
-e.tagName = "dap-ds-table-header", e.styles = c(u);
-let r = e;
-a([
-  l({ type: Boolean, reflect: !0 })
+o.tagName = "dap-ds-table-header", o.styles = h(n);
+let r = o;
+i([
+  p({ type: Boolean, reflect: !0 })
 ], r.prototype, "last");
-a([
-  l({ reflect: !0 })
+i([
+  p({ reflect: !0 })
 ], r.prototype, "role");
+i([
+  p({ type: String, reflect: !0 })
+], r.prototype, "scope");
 export {
   r as default
 };

package/dist/components/table/table-header.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-header.scss?inline'\n\n/*\n Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n \n @slot - The default slot.\n \n @csspart base - The main header cell container.\n \n @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n /\nexport default class DapDSTableHeader extends DdsElement {\n static tagName = 'dap-ds-table-header'\n\n static readonly styles = unsafeCSS(styles)\n\n /If the header cell is the last one./\n @property({ type: Boolean, reflect: true }) last: boolean\n /** The html role of the header cell */\n @property({ reflect: true })\n public role = 'columnheader'\n\n render() {\n return html` <slot part=\"base\"></slot> `\n }\n}\n"],"names":["_DapDSTableHeader","DdsElement","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO;AAAA,EAAA;AAAA,~~EAEd~~,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;~~AAbEF~~,EAAO,UAAU,uBAEDA,EAAA,~~SAASG~~,EAAUC,CAAM;AAH3C,IAAqBC,~~IAArBL~~;~~AAM8CM~~,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;"}
1	+ {"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-header.scss?inline'\n\n/*\n Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n \n @slot - The default slot.\n \n @csspart base - The main header cell container.\n \n @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n /\nexport default class DapDSTableHeader extends DdsElement {\n static tagName = 'dap-ds-table-header'\n\n static readonly styles = unsafeCSS(styles)\n\n /If the header cell is the last one./\n @property({ type: Boolean, reflect: true }) last: boolean\n /** The html role of the header cell. Derived from `scope` unless set explicitly. /\n @property({ reflect: true })\n public role = 'columnheader'\n\n /* Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */\n @property({ type: String, reflect: true }) scope: 'col' \| 'row' = 'col'\n\n protected willUpdate(changedProperties: PropertyValueMap<this>): void {\n // Only follow scope after the first render's default, so an explicit\n // role=\"...\" attribute without a scope is kept\n if (changedProperties.has('scope') && this.hasAttribute('scope')) {\n this.role = this.scope === 'row' ? 'rowheader' : 'columnheader'\n }\n }\n\n render() {\n return html` <slot part=\"base\"></slot> `\n }\n}\n"],"names":["_DapDSTableHeader","DdsElement","changedProperties","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO,gBAGoD,KAAA,QAAA;AAAA,EAAA;AAAA,EAExD,WAAWC,GAAiD;AAGpE,IAAIA,EAAkB,IAAI,OAAO,KAAK,KAAK,aAAa,OAAO,MAC7D,KAAK,OAAO,KAAK,UAAU,QAAQ,cAAc;AAAA,EACnD;AAAA,EAGF,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAxBEH,EAAO,UAAU,uBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;AAM8CO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;AAGoCC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAZtBF,EAYwB,WAAA,OAAA;"}

package/dist/components/table/table.component.d.ts CHANGED Viewed

@@ -16,15 +16,15 @@ export default class DapDSTable extends DdsElement {
     static tagName: string;
     /**@ignore */
     rows: Array<HTMLElement>;
-    /** The html role of the table. A static data table is a `table`; `grid` is
-     * only right for an interactive widget with keyboard-navigable cells. */
+    /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. */
     role: string;
     /**If the table has mobile design */
     mobile: boolean;
     /** The caption of the table */
     caption: string;
     static readonly styles: import('lit').CSSResult;
+    private captionLabelApplied;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import('lit-html').TemplateResult;
 }

package/dist/components/table/table.component.js CHANGED Viewed

@@ -1,53 +1,55 @@
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as f } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import { DdsElement as d } from "../../internal/dds-hu-element.js";
-import u from "./table.scss.js";
-import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, s = (n, e, o, l) => {
-  for (var t = void 0, a = n.length - 1, m; a >= 0; a--)
-    (m = n[a]) && (t = m(e, o, t) || t);
-  return t && g(e, o, t), t;
+import { queryAssignedElements as d } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { html as c } from "../../node_modules/lit-html/static.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import b from "./table.scss.js";
+import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var y = Object.defineProperty, s = (l, i, a, n) => {
+  for (var t = void 0, o = l.length - 1, h; o >= 0; o--)
+    (h = l[o]) && (t = h(i, a, t) || t);
+  return t && y(i, a, t), t;
 };
-const i = class i extends d {
+const r = class r extends m {
   constructor() {
-    super(...arguments), this.role = "table", this.mobile = !1, this.caption = "";
+    super(...arguments), this.role = "table", this.mobile = !1, this.caption = "", this.captionLabelApplied = !1;
   }
-  firstUpdated(e) {
-    this.rows.forEach((o, l) => {
-      l === this.rows.length - 1 && o.toggleAttribute("last");
-    });
+  firstUpdated(i) {
+    this.rows.forEach((a, n) => {
+      n === this.rows.length - 1 && a.toggleAttribute("last");
+    }), !this.caption && !this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby") && console.warn(
+      "dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose."
+    );
   }
-  updated(e) {
-    e.has("caption") && (this.caption ? this.setAttribute("aria-label", this.caption) : this.removeAttribute("aria-label"));
+  willUpdate(i) {
+    i.has("caption") && (this.caption ? (this.setAttribute("aria-label", this.caption), this.captionLabelApplied = !0) : this.captionLabelApplied && (this.removeAttribute("aria-label"), this.captionLabelApplied = !1));
   }
   render() {
-    return f`
-      ${this.caption ? f`<caption class="caption" part="caption" aria-hidden="true">
+    return c`
+      ${this.caption ? c`<caption class="caption" part="caption" aria-hidden="true">
             ${this.caption}
-          </caption>` : c}
+          </caption>` : f}
       <slot></slot>
     `;
   }
 };
-i.tagName = "dap-ds-table", i.styles = y(u);
-let r = i;
+r.tagName = "dap-ds-table", r.styles = u(b);
+let e = r;
 s([
-  h()
-], r.prototype, "rows");
+  d()
+], e.prototype, "rows");
 s([
   p({ reflect: !0 })
-], r.prototype, "role");
+], e.prototype, "role");
 s([
   p({ type: Boolean, reflect: !0 })
-], r.prototype, "mobile");
+], e.prototype, "mobile");
 s([
   p({ type: String })
-], r.prototype, "caption");
+], e.prototype, "caption");
 export {
-  r as default
+  e as default
 };
 //# sourceMappingURL=table.component.js.map

package/dist/components/table/table.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/*\n Data table component.\n * @element dap-ds-table\n * @title - Table\n \n @slot - The default slot. Accepts `dap-ds-table-row` elements.\n \n @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n /\nexport default class DapDSTable extends DdsElement {\n static tagName = 'dap-ds-table'\n\n /@ignore /\n @queryAssignedElements() rows!: Array<HTMLElement>\n /** The html role of the table. A ~~static~~ ~~data table is a~~ `table`; `grid` is\n * only ~~right~~ for an interactive ~~widget with keyboard-navigable cells~~. /\n @property({ reflect: true }) public role = 'table'\n /If the table has mobile design /\n @property({ type: Boolean, reflect: true }) mobile = false\n\n /** The caption of the table */\n @property({ type: String }) caption = ''\n\n static readonly styles = unsafeCSS(styles)\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n this.rows.forEach((row, index) => {\n if (index === this.rows.length - 1) {\n row.toggleAttribute('last')\n }\n })\n }\n\n protected ~~updated~~(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n // The caption names the table. The rendered <caption> is in the shadow root\n // and not tied to the host's role, so the name goes on the host instead;\n // never set an empty label.\n if (_changedProperties.has('caption')) {\n if (this.caption) {\n this.setAttribute('aria-label', this.caption)\n } else {\n this.removeAttribute('aria-label')\n }\n }\n }\n\n render() {\n // aria-hidden: the caption text is already the host's aria-label, so screen\n // readers would otherwise announce it twice\n return html`\n ${this.caption\n ? html`<caption class=\"caption\" part=\"caption\" aria-hidden=\"true\">\n ${this.caption}\n </caption>`\n : nothing}\n <slot></slot>\n `\n }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","nothing","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAO+B,KAAO,OAAO,SAEU,KAAA,SAAA,IAGf,KAAA,UAAA;AAAA,EAAA;AAAA,~~EAI5B~~,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD;AAAA,~~EAAA~~;AAAA,~~EAGO~~,~~QACRD~~,GACM;~~AAIF~~,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,~~UACF~~,KAAA,aAAa,cAAc,KAAK,OAAO,~~IAE5C~~,KAAK,gBAAgB,YAAY;AAAA,~~EAErC~~;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAAA,QACH,KAAK,UACHA;AAAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;~~AApDEN~~,EAAO,UAAU,gBAaDA,EAAA,SAASO,EAAUC,CAAM;AAd3C,IAAqBC,IAArBT;AAI2BU,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AAGWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAPRH,EAOiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBH,EASyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}
1	+ {"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/*\n Data table component.\n * @element dap-ds-table\n * @title - Table\n \n @slot - The default slot. Accepts `dap-ds-table-row` elements.\n \n @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n /\nexport default class DapDSTable extends DdsElement {\n static tagName = 'dap-ds-table'\n\n /@ignore /\n @queryAssignedElements() rows!: Array<HTMLElement>\n // `grid` is only right for an interactive table with keyboard-navigable cells\n /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. /\n @property({ reflect: true }) public role = 'table'\n /If the table has mobile design /\n @property({ type: Boolean, reflect: true }) mobile = false\n\n /** The caption of the table */\n @property({ type: String }) caption = ''\n\n static readonly styles = unsafeCSS(styles)\n\n // Whether the host's aria-label came from the caption (and so is ours to\n // remove); an aria-label the author set is left alone\n private captionLabelApplied = false\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n this.rows.forEach((row, index) => {\n if (index === this.rows.length - 1) {\n row.toggleAttribute('last')\n }\n })\n\n if (\n !this.caption &&\n !this.hasAttribute('aria-label') &&\n !this.hasAttribute('aria-labelledby')\n ) {\n console.warn(\n 'dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose.',\n )\n }\n }\n\n protected willUpdate(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n // The caption names the table. The rendered <caption> is in the shadow root\n // and not tied to the host's role, so the name goes on the host instead;\n // never set an empty label. Done before render (not in updated()) because\n // aria-label is a reactive property and setting it after would re-render.\n if (_changedProperties.has('caption')) {\n if (this.caption) {\n this.setAttribute('aria-label', this.caption)\n this.captionLabelApplied = true\n } else if (this.captionLabelApplied) {\n this.removeAttribute('aria-label')\n this.captionLabelApplied = false\n }\n }\n }\n\n render() {\n // aria-hidden: the caption text is already the host's aria-label, so screen\n // readers would otherwise announce it twice\n return html`\n ${this.caption\n ? html`<caption class=\"caption\" part=\"caption\" aria-hidden=\"true\">\n ${this.caption}\n </caption>`\n : nothing}\n <slot></slot>\n `\n }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","nothing","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAO+B,KAAO,OAAO,SAEU,KAAA,SAAA,IAGf,KAAA,UAAA,IAMtC,KAAQ,sBAAsB;AAAA,EAAA;AAAA,EAEpB,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD,GAGC,CAAC,KAAK,WACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,KAE5B,QAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAAA,EAGQ,WACRD,GACM;AAKF,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,WACF,KAAA,aAAa,cAAc,KAAK,OAAO,GAC5C,KAAK,sBAAsB,MAClB,KAAK,wBACd,KAAK,gBAAgB,YAAY,GACjC,KAAK,sBAAsB;AAAA,EAE/B;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAAA,QACH,KAAK,UACHA;AAAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;AArEEN,EAAO,UAAU,gBAaDA,EAAA,SAASO,EAAUC,CAAM;AAd3C,IAAqBC,IAArBT;AAI2BU,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AAGWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAPRH,EAOiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBH,EASyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}

package/dist/localization/locales/de.json.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const e = "./_schema.json", n = { neutral: "Information", informative: "Information", positive: "Erfolg", warning: "Warnung", negative: "Fehler" }, t = "Schließen", i = "Abbrechen", a = "Auswahl löschen", r = "Kopieren", o = "Bestätigen", s = "Ok", c = "Suchen", l = "Tag", d = "(öffnet in neuem Tab)", h = { optional: "(Optional)", tooltip: "Information" }, g = { maxLength: "Maximale Länge um {{count}} Zeichen überschritten" }, u = { info: "Info", success: "Erfolg", error: "Fehler" }, m = { selected: "ausgewählt", disabled: "nicht verfügbar" }, b = "lädt", f = "Lädt...", p = "anzeigen", v = "ausblenden", D = "verringern", S = "erhöhen", w = "Inhaltsverzeichnis", z = "{{val, datetime}}", k = "ausgewählt", A = { today: "heute", now: "jetzt", nextMonth: "nächster Monat", prevMonth: "vorheriger Monat", year: "Jahr", month: "Monat" }, L = { validationMessage: { select: "Bitte wählen Sie eine Option", datepicker: "Bitte wählen Sie ein Datum" } }, x = { dragDropArea: "Dateien hier ablegen oder klicken zum Hochladen", dragDropInstructions: "Sie können Dateien auch durch Ziehen und Ablegen in den Bereich hochladen.", files: "Dateien", uploadButtonLabel: "Hochladen", browseButtonLabel: "Durchsuchen", browse: "Dateien durchsuchen", fileList: "Dateiliste", fileSize: "{{size}} MB", upload: "Hochladen", uploading: "Hochladen läuft", dropzone: { label: "Dateien hochladen", text: "Dateien hier ablegen oder klicken zum Hochladen", acceptedTypes: "Erlaubte Dateitypen" }, link: "Link", cancel: "Abbrechen", delete: "Löschen", view: "Ansehen", error: { fileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB", fileType: "Der Dateityp ist nicht erlaubt", fileAmount: "Die Anzahl der Dateien überschreitet das maximale Limit von {count}", perFileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB" }, removeDialog: { title: "Datei entfernen", message: "Sind Sie sicher, dass Sie {{fileName}} entfernen möchten?", confirm: "Löschen", cancel: "Abbrechen" } }, B = { pageSize: "{{count}} Einträge / Seite", first: "Erste", previous: "Zurück", next: "Weiter", last: "Letzte", pageInfo: "{{rangeStart}}-{{rangeEnd}} von {{totalRows}}" }, E = { sortAscending: "Aufsteigend sortieren", sortDescending: "Absteigend sortieren", clearSort: "Sortierung löschen", tableDescription: "Datentabelle mit sortierbaren Spalten", defaultCaption: "Datentabelle", rowSelected: "Zeile ausgewählt", rowDeselected: "Zeile abgewählt", sortedBy: "Sortiert nach {{column}} {{direction}}", pageChanged: "Seite {{page}} von {{total}}", noData: "Keine Daten verfügbar", resizeColumn: "Spaltenbreite ändern" }, M = { expand: "Abschnitt erweitern", collapse: "Abschnitt einklappen" }, I = { hour: "Stunde", minute: "Minute", second: "Sekunde" }, y = { remove: "Entfernen", removable: "entfernbar, drücken Sie Entf zum Entfernen" }, T = { notifications: "Benachrichtigungen" }, Z = { multiselect: { selected: "{{count}} Element{{count > 1 ? 'e' : ''}} ausgewählt" } }, H = { loading: "Lädt", progress: "Fortschritt: {{percentage}}%" }, R = {
+const e = "./_schema.json", n = { neutral: "Information", informative: "Information", positive: "Erfolg", warning: "Warnung", negative: "Fehler" }, t = "Schließen", i = "Abbrechen", a = "Auswahl löschen", r = "Kopieren", o = "Bestätigen", s = "Ok", c = "Suchen", l = "Tag", d = "(öffnet in neuem Tab)", h = { optional: "(Optional)", tooltip: "Information" }, g = { maxLength: "Maximale Länge um {{count}} Zeichen überschritten" }, u = { info: "Info", success: "Erfolg", error: "Fehler" }, m = { selected: "ausgewählt", disabled: "nicht verfügbar" }, b = "lädt", f = "Lädt...", p = "anzeigen", v = "ausblenden", D = "verringern", w = "erhöhen", S = "Inhaltsverzeichnis", z = "{{val, datetime}}", k = "ausgewählt", A = { today: "heute", now: "jetzt", nextMonth: "nächster Monat", prevMonth: "vorheriger Monat", year: "Jahr", month: "Monat" }, L = { validationMessage: { select: "Bitte wählen Sie eine Option", datepicker: "Bitte wählen Sie ein Datum" } }, x = { dragDropArea: "Dateien hier ablegen oder klicken zum Hochladen", dragDropInstructions: "Sie können Dateien auch durch Ziehen und Ablegen in den Bereich hochladen.", files: "Dateien", uploadButtonLabel: "Hochladen", browseButtonLabel: "Durchsuchen", browse: "Dateien durchsuchen", fileList: "Dateiliste", fileSize: "{{size}} MB", upload: "Hochladen", uploading: "Hochladen läuft", dropzone: { label: "Dateien hochladen", text: "Dateien hier ablegen oder klicken zum Hochladen", acceptedTypes: "Erlaubte Dateitypen" }, link: "Link", cancel: "Abbrechen", delete: "Löschen", view: "Ansehen", error: { fileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB", fileType: "Der Dateityp ist nicht erlaubt", fileAmount: "Die Anzahl der Dateien überschreitet das maximale Limit von {count}", perFileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB" }, removeDialog: { title: "Datei entfernen", message: "Sind Sie sicher, dass Sie {{fileName}} entfernen möchten?", confirm: "Löschen", cancel: "Abbrechen" } }, B = { pageSize: "{{count}} Einträge / Seite", first: "Erste", previous: "Zurück", next: "Weiter", last: "Letzte", pageInfo: "{{rangeStart}}-{{rangeEnd}} von {{totalRows}}" }, E = { sortAscending: "Aufsteigend sortieren", sortDescending: "Absteigend sortieren", clearSort: "Sortierung löschen", tableDescription: "Datentabelle mit sortierbaren Spalten", defaultCaption: "Datentabelle", rowSelected: "Zeile ausgewählt", rowDeselected: "Zeile abgewählt", sortedBy: "Sortiert nach {{column}} {{direction}}", pageChanged: "Seite {{page}} von {{total}}", noData: "Keine Daten verfügbar", resizeColumn: "Spaltenbreite ändern" }, M = { expand: "Abschnitt erweitern", collapse: "Abschnitt einklappen" }, I = { hour: "Stunde", minute: "Minute", second: "Sekunde" }, y = { remove: "Entfernen", removable: "entfernbar, drücken Sie Entf zum Entfernen" }, T = { notifications: "Benachrichtigungen" }, Z = { activeOption: "{{option}}, {{position}} von {{count}}", multiselect: { selected_one: "{{count}} Element ausgewählt", selected_other: "{{count}} Elemente ausgewählt" } }, H = { loading: "Lädt", progress: "Fortschritt: {{percentage}}%" }, O = {
   $schema: e,
   bannerType: n,
   close: t,
@@ -22,8 +22,8 @@ const e = "./_schema.json", n = { neutral: "Information", informative: "Informat
   show: p,
   hide: v,
   decrease: D,
-  increase: S,
-  tocTitle: w,
+  increase: w,
+  tocTitle: S,
   date: z,
   selected: k,
   calendar: A,
@@ -33,7 +33,7 @@ const e = "./_schema.json", n = { neutral: "Information", informative: "Informat
   datatable: E,
   accordion: M,
   "official-website-banner": { heading: "Die offizielle Website von Ungarn.", "heading-2": "Offizielle Regierungswebsite", content: "Nur offizielle Regierungswebsites mit der Endung gov.hu können verwendet werden, die gesetzlich geregelt sind und mehrere Schutzschichten haben." },
-  "avatar-group": { "overflow-label": "{{count}} weitere{{count > 1 ? '' : 'r'}} Avatar{{count > 1 ? 'e' : ''}}" },
+  "avatar-group": { "overflow-label_one": "{{count}} weiterer Avatar", "overflow-label_other": "{{count}} weitere Avatare" },
   timepicker: I,
   chip: y,
   snackbar: T,
@@ -57,13 +57,13 @@ export {
   E as datatable,
   z as date,
   D as decrease,
-  R as default,
+  O as default,
   g as errors,
   u as feedback,
   x as fileInput,
   L as form,
   v as hide,
-  S as increase,
+  w as increase,
   h as label,
   m as listItems,
   b as loading,
@@ -78,6 +78,6 @@ export {
   f as spinner,
   l as tag,
   I as timepicker,
-  w as tocTitle
+  S as tocTitle
 };
 //# sourceMappingURL=de.json.js.map