npm - dap-design-system - Versions diffs - 0.62.3 → 0.63.0 - Mend

dap-design-system 0.62.3 → 0.63.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 (663) hide show

package/dist/components/option-list/option-list.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"option-list.component.js","sources":["../../../src/components/option-list/option-list.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { scrollIntoContainer } from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport styles from './option-list.scss?inline'\n\n/*\n `dap-ds-option-list`\n * @summary An option list is a list of selectable options.\n * @element dap-ds-option-list\n * @title - Option list\n \n @event {{ void }} dds-cancel - Fired when the escape key is pressed.\n * @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.\n * @event {{ void }} dds-keydown - Fired when a key is pressed down.\n * @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.\n \n @csspart base - The main option list container.\n * @csspart option-item - The option item of the option list.\n * @csspart popup-base - The base of the popup.\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 \n @slot - The default slot for the options.\n /\nexport default class DapDSOptionList extends SizedMixin(DdsElement) {\n static tagName = 'dap-ds-option-list'\n\n static dependencies = {\n 'dap-ds-option-item': DapDSOptionItem,\n }\n\n /* The filter text of the option list /\n @property() filterText = ''\n\n /* The value of the option list /\n @property({ type: String, reflect: true }) value?: string\n\n /* The focused state of the option list. /\n @property({ type: Boolean }) focused = false\n\n /* Whether the option list is searchable /\n @property({ type: Boolean }) search = false\n\n /* The search mode of the option list. Default is `none` /\n @property() searchMode: 'none' \| 'typehead' \| 'autocomplete' \| 'manual' =\n 'none'\n\n /\n @ignore\n /\n @property({ type: String }) searchOnValueSet = 'true'\n\n /* Whether the option list items are selectable, whether it shows the selected icon /\n @property({ type: String }) selectable = 'true'\n\n /\n @ignore\n /\n @property({ type: Array })\n public options?: any[]\n\n /\n @ignore\n */\n @property({ type: Boolean }) disableDelaySet = false\n\n queryTimeout: number \| undefined\n queryString = ''\n firstLoad = true\n\n @state()\n private currentOption: any\n\n @state()\n public selectedIndex: number\n\n @state()\n private optionEls: DapDSOptionItem[] = []\n\n @state()\n private availableOptions: DapDSOptionItem[] = []\n\n get isAutoComplete() {\n return this.searchMode === 'autocomplete' \|\| this.searchMode === 'manual'\n }\n\n static readonly styles = unsafeCSS(styles)\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n\n this.setAttribute('role', 'listbox')\n }\n\n getAllOptions() {\n const mainSlot = this.shadowRoot?.querySelector('slot')\n const assignedElement = mainSlot?.assignedElements()[0]\n const embeddedSlot =\n assignedElement?.nodeName === 'SLOT'\n ? (\n mainSlot?.assignedElements()[0] as HTMLSlotElement\n ).assignedElements()\n : mainSlot?.assignedElements()\n\n if (!embeddedSlot) {\n return [...this.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')]\n } else {\n return [...(embeddedSlot as DapDSOptionItem[])]\n }\n }\n\n private getAllRenderedOptions(): DapDSOptionItem[] {\n const ro =\n this.shadowRoot?.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')\n return ro ? [...ro] : []\n }\n\n getAllAvailabeOptions() {\n return this.availableOptions\n }\n\n getActiveOption() {\n if (!this.currentOption) {\n return null\n }\n\n const activeOption = this.getAllRenderedOptions().find(\n el => el.value === this.currentOption.value,\n )\n\n return activeOption\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n\n if (\n _changedProperties.has('value') &&\n !_changedProperties.has('currentOption') &&\n this.searchOnValueSet === 'true'\n ) {\n const option = this.availableOptions.find(\n option => option.value === this.value,\n )\n\n if (option) {\n this.changeOption(option, _changedProperties.get('value'))\n\n this.selectedIndex = this.findIndexByValue(\n this.availableOptions,\n this.value,\n )\n\n this.emit('dds-option-change', {\n ...this.getEventDetails(this.currentOption),\n })\n }\n }\n\n if (\n _changedProperties.has('options') \|\|\n _changedProperties.has('optionEls')\n ) {\n this.availableOptions = this.options \|\| this.optionEls\n this.emit('dds-list-changed', { elements: this.availableOptions })\n }\n }\n\n protected shouldUpdate(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): boolean {\n if (_changedProperties.has('filterText')) {\n if (\n this.filterText &&\n this.searchMode !== 'none' &&\n this.searchMode !== 'manual'\n ) {\n this.filterAvailableOptions()\n this.selectedIndex = 0\n this.setCurrentOption(this.availableOptions[0], false)\n this.emit('dds-list-changed', { elements: this.availableOptions })\n } else if (this.filterText && this.searchMode === 'manual') {\n if (this.selectedIndex === -1 && this.availableOptions.length > 0) {\n this.selectedIndex = 0\n this.setCurrentOption(this.availableOptions[0], false)\n }\n } else if (this.filterText && this.searchMode === 'none') {\n this.filterAvailableOptions()\n this.selectedIndex = -1\n this.setCurrentOption(null, false)\n this.setSelectedOption()\n this.emit('dds-list-changed', { elements: this.availableOptions })\n } else {\n this.availableOptions = this.options \|\| this.optionEls\n this.selectedIndex = -1\n this.setCurrentOption(null, false)\n this.emit('dds-list-changed', { elements: this.availableOptions })\n }\n }\n\n return super.shouldUpdate(_changedProperties)\n }\n\n public filterAvailableOptions(): void {\n const valueLowerCase = this.filterText.toLowerCase()\n this.availableOptions = (this.options \|\| this.optionEls).filter(item => {\n if (!item.disabled) {\n const itemTextLowerCase = item.optionText.toLowerCase()\n return itemTextLowerCase.startsWith(valueLowerCase)\n }\n })\n }\n\n attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n super.attributeChangedCallback(name, oldValue, newValue)\n if (\n name === 'value' &&\n oldValue !== newValue &&\n this.searchOnValueSet === 'true'\n ) {\n if (newValue) {\n const option = this.availableOptions.find(el => el.value === newValue)\n\n this.setSelectedOption(option)\n this.selectionChanged(option)\n\n this.emit('dds-option-change', {\n ...this.getEventDetails(this.currentOption),\n })\n } else {\n this.setSelectedOption()\n this.selectionChanged()\n }\n }\n }\n\n public setOptionsFromSlottedItems(): void {\n const elements = this.getAllOptions()\n this.availableOptions = elements\n this.optionEls = elements\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n // Keydown only reaches the list while focus is inside it. Focus can arrive\n // via Tab (not captureFocus), so mark the list focused or every key is ignored.\n this.focused = true\n\n // Tab and Escape must always work so keyboard users can leave the list\n // (WCAG 2.1.2). Tab keeps its native behaviour; the host closes the popup.\n if (event.key === 'Tab' \|\| event.key === 'Escape') {\n if (event.key === 'Escape') {\n event.preventDefault()\n this.emit('dds-cancel')\n }\n this.emit('dds-keydown', { key: event.key, code: event.code })\n return\n }\n\n event.preventDefault()\n\n this.handleKeyCodes(event.key, event.code)\n }\n\n private scrollToActiveOption(): void {\n if (!this.currentOption) {\n return\n }\n\n const activeOption = this.getAllRenderedOptions().find(\n el => el.value === this.currentOption.value,\n )\n\n if (activeOption) {\n // Scroll only within the list's own scroll container. A plain\n // scrollIntoView would also scroll every ancestor (modal body, page),\n // pushing the trigger out of the viewport and tripping the popup's\n // viewport auto-close so the dropdown snaps shut on open.\n scrollIntoContainer(activeOption)\n }\n }\n\n private handleNavigationKey(key: string): void {\n if (key === 'ArrowDown') {\n this.selectedIndex = this.findNearestEnabled(\n this.availableOptions,\n this.selectedIndex,\n 1,\n )\n } else if (key === 'ArrowUp') {\n const nearest = this.findNearestEnabled(\n this.availableOptions,\n this.selectedIndex,\n this.selectedIndex === -1 ? 1 : -1,\n )\n this.selectedIndex =\n nearest === this.availableOptions.length ? -1 : nearest\n } else if (key === 'Home') {\n this.selectedIndex = this.availableOptions[0]?.disabled\n ? this.findNearestEnabled(this.availableOptions, -1, 1)\n : 0\n } else if (key === 'End') {\n const nearest = this.findNearestEnabled(\n this.availableOptions,\n this.availableOptions.length,\n -1,\n )\n this.selectedIndex =\n nearest === this.availableOptions.length ? -1 : nearest\n }\n }\n\n private handleActionKey(key: string): void {\n if (key === 'Enter') {\n this.setSelectedOption(this.availableOptions[this.selectedIndex])\n this.selectionChanged(this.availableOptions[this.selectedIndex])\n this.emit('dds-option-change', {\n ...this.getEventDetails(this.currentOption),\n })\n }\n }\n\n private handleTypeheadKey(key: string): void {\n if (\n this.searchMode === 'typehead' &&\n (key?.length === 1 \|\| key === 'Backspace')\n ) {\n this.buildQueryString(key)\n }\n }\n\n private handleKeyCodes(key: string, keyCode?: string) {\n if (!this.focused) {\n return\n }\n\n this.handleNavigationKey(key)\n this.handleActionKey(key)\n this.handleTypeheadKey(key)\n\n if (this.selectedIndex >= 0) {\n const option = this.availableOptions[this.selectedIndex]\n this.setCurrentOption(option)\n this.emit('dds-keydown', {\n code: keyCode,\n key,\n ...this.getEventDetails(option),\n })\n }\n }\n\n private getEventDetails(option?: DapDSOptionItem) {\n if (!option) {\n return undefined\n }\n\n let opt = option\n\n if (option.tagName !== 'DAP-DS-OPTION-ITEM') {\n opt = option.closest('dap-ds-option-item')!\n }\n\n return {\n opt,\n value: opt?.value,\n text: opt?.optionText,\n index: this.selectedIndex,\n }\n }\n\n private findNearestEnabled(\n allOptions: DapDSOptionItem[],\n current: number,\n step: number,\n ) {\n let nextIndex: number = current\n let nextOption: DapDSOptionItem\n\n do {\n nextIndex += step\n nextOption = allOptions[nextIndex]\n if (nextOption === undefined) {\n break\n }\n } while (nextOption?.disabled)\n\n return nextOption ? nextIndex : current\n }\n\n private findIndexByValue(\n allOptions: DapDSOptionItem[],\n value?: string,\n ): number {\n return allOptions.findIndex(option => option.value === value)\n }\n\n private clearItemFocusStates() {\n this.availableOptions.forEach(el => {\n el.focused = false\n el.tabIndex = -1\n })\n }\n\n // Only set the current option without selecting it, eg: focus\n private setCurrentOption(option?: DapDSOptionItem \| null, setFocus = true) {\n this.clearItemFocusStates()\n\n if (option) {\n this.currentOption = option\n option.focused = true\n option.tabIndex = 0\n\n this.emit('dds-current-change', {\n ...this.getEventDetails(option),\n })\n\n if (setFocus) {\n this.setFocusedOption(option)\n } else {\n this.scrollToActiveOption()\n }\n } else {\n this.currentOption = null\n\n this.emit('dds-current-change', null)\n }\n }\n\n private setFocusedOption(option: DapDSOptionItem) {\n const renderedItem = this.getAllRenderedOptions().find(\n el => el.value === option.value,\n )\n\n if (renderedItem) {\n // preventScroll so native focus doesn't scroll ancestor containers (modal\n // body, page); scrollToActiveOption reveals it within the list instead.\n renderedItem.focus({ preventScroll: true })\n }\n }\n\n private setSelectedOption(option?: DapDSOptionItem \| undefined) {\n this.availableOptions.forEach(el => (el.selected = false))\n\n if (option) {\n this.currentOption = option\n\n option.selected = true\n }\n }\n\n private selectionChanged(option?: DapDSOptionItem \| undefined, value?: any) {\n const oldValue = value \|\| this.value\n\n if (option) {\n if (option.value !== oldValue) {\n this.value = option.value\n }\n }\n }\n\n private changeOption(option: DapDSOptionItem, value?: any) {\n if (option && !option.disabled) {\n this.selectedIndex = this.findIndexByValue(\n this.availableOptions,\n option.value,\n )\n\n this.setSelectedOption(option)\n this.setCurrentOption(option)\n this.selectionChanged(option, value)\n }\n }\n\n private readonly handleOptionClick = (event: MouseEvent) => {\n this.focused = true\n const option = event.target as DapDSOptionItem\n\n if (option && !option.disabled) {\n const isModifierKeyPressed = event.ctrlKey \|\| event.metaKey\n const isAlreadySelected = option.selected\n\n if (isModifierKeyPressed && isAlreadySelected) {\n // Find the empty item (with \"empty\" attribute) to select automatically\n const emptyItem = this.availableOptions.find(opt =>\n opt.hasAttribute('empty'),\n )\n\n if (emptyItem) {\n // Select the empty item automatically\n this.setSelectedOption(emptyItem)\n this.setCurrentOption(emptyItem)\n this.value = emptyItem.value\n this.selectedIndex = this.findIndexByValue(\n this.availableOptions,\n emptyItem.value,\n )\n\n this.emit('dds-option-change', {\n ...this.getEventDetails(emptyItem),\n })\n } else {\n // Fallback to original behavior if no empty item found\n this.setSelectedOption(undefined)\n this.setCurrentOption(null)\n this.value = undefined\n this.selectedIndex = -1\n\n this.emit('dds-option-deselect', {\n option: option,\n value: undefined,\n index: -1,\n text: option.optionText,\n })\n }\n\n return\n }\n\n this.setCurrentOption(option)\n this.setSelectedOption(option)\n this.selectionChanged(option)\n\n this.updateComplete.then(() => {\n this.selectedIndex = this.findIndexByValue(\n this.availableOptions,\n this.value,\n )\n\n if (!this.disableDelaySet) {\n this.emit('dds-option-change', {\n ...this.getEventDetails(this.currentOption),\n })\n }\n })\n } else {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n getSearchString = (char: string) => {\n if (typeof this.queryTimeout === 'number') {\n window.clearTimeout(this.queryTimeout)\n }\n\n this.queryTimeout = window.setTimeout(() => {\n this.queryString = ''\n }, 500)\n\n this.queryString += char\n return this.queryString\n }\n\n buildQueryString = (char: string) => {\n const queryString = this.getSearchString(char)\n\n for (const option of this.availableOptions) {\n const label = option.optionText.toLowerCase()\n\n if (label.startsWith(queryString.toLowerCase())) {\n this.selectedIndex = this.findIndexByValue(\n this.availableOptions,\n option.value,\n )\n this.setCurrentOption(option)\n break\n }\n }\n }\n\n private handleInitialFocus(): void {\n if (!this.value && this.selectedIndex < 0) {\n this.selectedIndex = 0\n } else {\n const index = this.value\n ? this.findIndexByValue(this.availableOptions, this.value)\n : this.selectedIndex\n\n if (index !== -1 && !this.isAutoComplete) {\n this.selectedIndex = index\n this.setCurrentOption(this.availableOptions[this.selectedIndex])\n this.setSelectedOption(this.availableOptions[this.selectedIndex])\n if (this.value) {\n this.selectionChanged(this.availableOptions[this.selectedIndex])\n }\n }\n }\n\n if (!this.selectedIndex) {\n this.setCurrentOption(this.availableOptions[0])\n this.setSelectedOption(this.availableOptions[0])\n }\n }\n\n private handleKeyFocus(key: string): void {\n if (this.isAutoComplete \|\| this.searchMode === 'none') {\n this.handleKeyCodes(key)\n this.setCurrentOption(this.availableOptions[this.selectedIndex], false)\n this.setSelectedOption(this.availableOptions[this.selectedIndex])\n }\n\n if (this.searchMode === 'typehead') {\n this.buildQueryString(key)\n }\n }\n\n public captureFocus(key?: string): void {\n this.focused = true\n this.focus()\n\n if (!key) {\n this.handleInitialFocus()\n } else {\n this.handleKeyFocus(key)\n }\n\n // The popup constrains its scroll container's max-height via floating-ui one\n // animation frame after opening. At this point that constraint isn't applied\n // yet (clientHeight === scrollHeight), so the container isn't scrollable and\n // both native focus() scrolling and scrollIntoView are no-ops. Defer the\n // scroll to the next frame so the selected option is actually revealed.\n if (typeof requestAnimationFrame === 'function') {\n requestAnimationFrame(() => this.scrollToActiveOption())\n }\n }\n\n public removeFocus(): void {\n this.focused = false\n this.clearItemFocusStates()\n }\n\n private handleSlotChange() {\n const allOptions = this.getAllOptions()\n this.setOptionsFromSlottedItems()\n\n if (allOptions.length > 0 && this.searchOnValueSet === 'true') {\n const option = allOptions.find(el => el.value === this.value)\n this.setSelectedOption(option)\n this.selectionChanged(option)\n\n if (this.currentOption) {\n this.selectedIndex = this.findIndexByValue(allOptions, this.value)\n this.emit('dds-option-change', {\n ...this.getEventDetails(this.currentOption),\n })\n }\n } else if (allOptions.length > 0 && !this.search && !this.isAutoComplete) {\n const firstOption = allOptions.find(option => !option.disabled)\n this.selectedIndex = 0\n this.setCurrentOption(firstOption, false)\n\n this.emit('dds-current-change', {\n ...this.getEventDetails(firstOption),\n })\n } else if (allOptions.length > 0 && (this.search \|\| this.isAutoComplete)) {\n const firstOption = allOptions.find(option => !option.disabled)\n\n if (\n !this.currentOption \|\|\n this.currentOption.value !== firstOption?.value\n ) {\n this.selectedIndex = 0\n this.setCurrentOption(firstOption, false)\n }\n }\n }\n\n render() {\n return html`<div\n part=\"base\"\n class=${clsx('option-list', {\n 'option-list--sm': this.size === 'sm',\n 'option-list--lg': this.size === 'lg',\n })}\n @keydown=${this.handleKeydown}\n @focus=${this.captureFocus}>\n ${this.availableOptions.map(\n (option, index) => html`\n <dap-ds-option-item\n size=${this.size}\n part=\"option-item\"\n exportparts=\"base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix\"\n ?disabled=${option.disabled}\n ?selected=${this.value === option.value}\n ?focused=${index === this.selectedIndex}\n label=${ifDefined(option.label)}\n role=\"option\"\n value=${option.value}\n tabIndex=${option.tabIndex}\n id=${option.id \|\| `dap-ds-option-${option.value}`}\n data-testid=${ifDefined(option.dataset.testid \|\| undefined)}\n selectable=${this.selectable}\n @click=${this.handleOptionClick}>\n ${unsafeStatic(option.innerHTML)}\n </dap-ds-option-item>\n `,\n )}\n <slot hidden @slotchange=${this.handleSlotChange}></slot>\n </div> `\n }\n}\n"],"names":["_DapDSOptionList","SizedMixin","DdsElement","event","option","isModifierKeyPressed","isAlreadySelected","emptyItem","opt","__spreadValues","char","queryString","_changedProperties","mainSlot","_a","assignedElement","embeddedSlot","ro","el","valueLowerCase","item","name","oldValue","newValue","elements","activeOption","scrollIntoContainer","key","nearest","keyCode","allOptions","current","step","nextIndex","nextOption","value","setFocus","renderedItem","index","firstOption","html","clsx","ifDefined","unsafeStatic","DapDSOptionItem","unsafeCSS","styles","DapDSOptionList","__decorateClass","property","state"],"mappings":"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"}
1	+ {"version":3,"file":"option-list.component.js","sources":["../../../src/components/option-list/option-list.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, ReactiveElement, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { scrollIntoContainer } from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport {\n filterOptions,\n isAutoCompleteMode,\n ListboxAction,\n ListboxEffect,\n ListboxState,\n reduceListbox,\n TYPEAHEAD_RESET_MS,\n} from './listbox-state'\nimport {\n DapDSOptionData,\n DapDSOptionRenderer,\n optionDataOf,\n optionElementsFor,\n optionItemsConverter,\n toOptionItems,\n} from './option-data'\nimport styles from './option-list.scss?inline'\n\ntype Option = DapDSOptionItem\n\n/** Element fields that mirror Listbox state and take part in Lit updates. /\n/* Frames during which an opening list keeps its active option in view. /\nconst REVEAL_FRAMES = 10\n/* User input that ends that period (they took over the scrolling). /\nconst USER_SCROLL_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown']\n\nconst REACTIVE_FIELDS = [\n 'value',\n 'focused',\n 'selectedIndex',\n 'currentOption',\n 'availableOptions',\n 'optionEls',\n] as const\n\n/\n `dap-ds-option-list`\n * @summary An option list is a list of selectable options.\n * @element dap-ds-option-list\n * @title - Option list\n \n @event {{ void }} dds-cancel - Fired when the escape key is pressed.\n * @event {{ option: DapDSOptionItem, value: string, index: number, text: string, item?: DapDSOptionData }} dds-option-change - Fired when the option list value changes. `item` is set when the options come from `items`.\n * @event {{ void }} dds-keydown - Fired when a key is pressed down.\n * @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.\n \n @csspart base - The main option list container.\n * @csspart option-item - The option item of the option list.\n * @csspart popup-base - The base of the popup.\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 \n @slot - The default slot for the options.\n /\nexport default class DapDSOptionList extends SizedMixin(DdsElement) {\n static tagName = 'dap-ds-option-list'\n\n static dependencies = {\n 'dap-ds-option-item': DapDSOptionItem,\n }\n\n /* The filter text of the option list /\n @property() filterText = ''\n\n /* The value of the option list /\n @property({ type: String, reflect: true }) value?: string\n\n /* The focused state of the option list. /\n @property({ type: Boolean }) focused = false\n\n /* Whether the option list is searchable /\n @property({ type: Boolean }) search = false\n\n /* The search mode of the option list. Default is `none` /\n @property() searchMode: 'none' \| 'typehead' \| 'autocomplete' \| 'manual' =\n 'none'\n\n /\n @ignore\n /\n @property({ type: String }) searchOnValueSet = 'true'\n\n /* Whether the option list items are selectable, whether it shows the selected icon /\n @property({ type: String }) selectable = 'true'\n\n /\n @ignore\n /\n @property({ type: Array })\n public options?: any[]\n\n /\n @ignore\n /\n @property({ type: Boolean }) disableDelaySet = false\n\n /\n The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.\n * @type {DapDSOptionData[]}\n /\n @property({ converter: optionItemsConverter })\n get items(): DapDSOptionData[] \| undefined {\n return this._items\n }\n\n set items(value: DapDSOptionData[] \| string \| undefined) {\n this._items = toOptionItems(value)\n }\n\n private _items?: DapDSOptionData[]\n\n /\n Renders the content of each option given in `items`. Defaults to the item's `label` as text. Must not render interactive elements, and should include the label text (it is the option's accessible name).\n * @type {DapDSOptionRenderer}\n /\n @property({ attribute: false })\n renderOption?: DapDSOptionRenderer\n\n /* Whether multiple options can be selected; exposed as aria-multiselectable on the listbox. /\n @property({ type: Boolean }) multiselectable = false\n\n queryTimeout: number \| undefined\n queryString = ''\n firstLoad = true\n\n @state()\n private currentOption: any\n\n @state()\n public selectedIndex: number\n\n @state()\n private optionEls: DapDSOptionItem[] = []\n\n @state()\n private availableOptions: DapDSOptionItem[] = []\n\n /* The option last marked as selected (Listbox state `marked`). /\n private markedOption: Option \| null = null\n\n /* The option carrying the focused flag (Listbox state `flagged`). /\n private flaggedOption: Option \| null = null\n\n private ownValue: ListboxState<Option>['ownValue'] = null\n\n /\n True when the element was server-rendered (declarative shadow DOM): its\n * shadow root already exists when the element is constructed.\n /\n private readonly serverRendered = !!this.shadowRoot\n\n get isAutoComplete() {\n return isAutoCompleteMode(this.searchMode)\n }\n\n static readonly styles = unsafeCSS(styles)\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n\n this.setAttribute('role', 'listbox')\n\n // On SSR hydration the slot is already assigned, so `slotchange` never\n // fires: process the slotted options here instead. On a client render the\n // slotchange event does this, so nothing runs twice.\n if (this.serverRendered && !this.items) {\n const options = this.getSlottedOptions()\n if (options.length > 0) {\n this.dispatch({ type: 'slotChanged', options })\n }\n }\n }\n\n getAllOptions() {\n if (this.items) {\n return optionElementsFor<DapDSOptionItem>(this.items)\n }\n return this.getSlottedOptions()\n }\n\n private getSlottedOptions(): DapDSOptionItem[] {\n const mainSlot = this.shadowRoot?.querySelector('slot')\n const assignedElement = mainSlot?.assignedElements()[0]\n const embeddedSlot =\n assignedElement?.nodeName === 'SLOT'\n ? (\n mainSlot?.assignedElements()[0] as HTMLSlotElement\n ).assignedElements()\n : mainSlot?.assignedElements()\n\n if (!embeddedSlot) {\n return [...this.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')]\n } else {\n return [...(embeddedSlot as DapDSOptionItem[])]\n }\n }\n\n private getAllRenderedOptions(): DapDSOptionItem[] {\n const ro =\n this.shadowRoot?.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')\n return ro ? [...ro] : []\n }\n\n getAllAvailabeOptions() {\n return this.availableOptions\n }\n\n getActiveOption() {\n if (!this.currentOption) {\n return null\n }\n\n const activeOption = this.getAllRenderedOptions().find(\n el => el.value === this.currentOption.value,\n )\n\n return activeOption\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n\n if (_changedProperties.has('multiselectable')) {\n if (this.multiselectable) {\n this.setAttribute('aria-multiselectable', 'true')\n } else {\n this.removeAttribute('aria-multiselectable')\n }\n }\n\n if (\n _changedProperties.has('value') &&\n !_changedProperties.has('currentOption')\n ) {\n this.dispatch({\n type: 'valueUpdated',\n previous: _changedProperties.get('value'),\n })\n }\n\n if (\n _changedProperties.has('options') \|\|\n _changedProperties.has('optionEls')\n ) {\n this.dispatch({ type: 'optionsUpdated' })\n }\n\n // Data items take the same path as a slot change of child options.\n if (\n _changedProperties.has('items') &&\n (this.items \|\| _changedProperties.get('items'))\n ) {\n this.dispatch({ type: 'slotChanged', options: this.getAllOptions() })\n this.warnIgnoredChildren()\n }\n\n if (this.items && this.renderOption) {\n this.warnMissingLabels()\n }\n }\n\n private warnedChildren = false\n private warnedLabels = false\n\n private warnIgnoredChildren() {\n if (\n !this.warnedChildren &&\n this.items &&\n this.getSlottedOptions().length > 0\n ) {\n this.warnedChildren = true\n console.warn(\n `${this.localName}: both \\`items\\` and dap-ds-option-item children are given; the children are ignored.`,\n )\n }\n }\n\n /* The visible text is the option's accessible name, so it should contain the label. /\n private warnMissingLabels() {\n if (this.warnedLabels) return\n const missing = this.getAllRenderedOptions().find(el => {\n const label = el.getAttribute('label') ?? ''\n return label && !(el.textContent ?? '').includes(label)\n })\n if (missing) {\n this.warnedLabels = true\n console.warn(\n `${this.localName}: renderOption output for \"${missing.getAttribute('label')}\" does not contain its label; the visible text is the option's accessible name.`,\n )\n }\n }\n\n protected shouldUpdate(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): boolean {\n if (_changedProperties.has('filterText')) {\n this.dispatch({ type: 'filterChanged' })\n }\n\n return super.shouldUpdate(_changedProperties)\n }\n\n public filterAvailableOptions(): void {\n this.availableOptions = filterOptions(\n this.options \|\| this.optionEls,\n this.filterText,\n )\n }\n\n attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n super.attributeChangedCallback(name, oldValue, newValue)\n if (\n name === 'value' &&\n oldValue !== newValue &&\n this.searchOnValueSet === 'true'\n ) {\n this.dispatch({ type: 'valueAttributeChanged', value: newValue })\n }\n }\n\n public setOptionsFromSlottedItems(): void {\n const elements = this.getAllOptions()\n this.availableOptions = elements\n this.optionEls = elements\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n this.dispatch({ type: 'keydown', key: event.key, code: event.code }, event)\n }\n\n private scrollToActiveOption(option: Option \| null = this.currentOption) {\n if (!option) {\n return\n }\n\n const activeOption = this.getAllRenderedOptions().find(\n el => el.value === option.value,\n )\n\n if (activeOption) {\n // Scroll only within the list's own scroll container. A plain\n // scrollIntoView would also scroll every ancestor (modal body, page),\n // pushing the trigger out of the viewport and tripping the popup's\n // viewport auto-close so the dropdown snaps shut on open.\n scrollIntoContainer(activeOption)\n }\n }\n\n private getEventDetails(\n option?: DapDSOptionItem \| null,\n index: number \| undefined = this.selectedIndex,\n ) {\n if (!option) {\n return undefined\n }\n\n let opt = option\n\n if (option.tagName !== 'DAP-DS-OPTION-ITEM') {\n opt = option.closest('dap-ds-option-item')!\n }\n\n return {\n opt,\n value: opt?.value,\n text: opt?.optionText,\n index,\n ...this.itemDetail(opt),\n }\n }\n\n /* `{ item }` for an option that came from `items`, else nothing (child payloads stay as they were). /\n private itemDetail(option?: Element \| null) {\n if (!this.items \|\| !option) return {}\n const value = (option as DapDSOptionItem).value\n const item = optionDataOf(option) ?? this.items.find(i => i.value === value)\n return item ? { item } : {}\n }\n\n private setFocusedOption(option: DapDSOptionItem) {\n const renderedItem = this.getAllRenderedOptions().find(\n el => el.value === option.value,\n )\n\n if (renderedItem) {\n // preventScroll so native focus doesn't scroll ancestor containers (modal\n // body, page); scrollToActiveOption reveals it within the list instead.\n renderedItem.focus({ preventScroll: true })\n scrollIntoContainer(renderedItem)\n }\n }\n\n private revealAbort?: () => void\n\n /\n The popup constrains its scroll container's max-height asynchronously\n * (floating-ui, re-run when the content changes), so there is no single\n * frame after which the container is final. Keep the active option in view\n * for a few frames, and stop as soon as the user scrolls, touches or types.\n /\n private revealOverFrames(frames = REVEAL_FRAMES) {\n if (typeof requestAnimationFrame !== 'function') {\n return\n }\n this.revealAbort?.()\n let cancelled = false\n const stop = () => {\n cancelled = true\n for (const type of USER_SCROLL_EVENTS) {\n this.removeEventListener(type, stop, true)\n }\n if (this.revealAbort === stop) this.revealAbort = undefined\n }\n for (const type of USER_SCROLL_EVENTS) {\n this.addEventListener(type, stop, { capture: true, passive: true })\n }\n this.revealAbort = stop\n const step = (left: number) =>\n requestAnimationFrame(() => {\n if (cancelled) return\n this.scrollToActiveOption()\n if (left > 1) step(left - 1)\n else stop()\n })\n step(frames)\n }\n\n /\n Scroll the active option into view once the popup has laid out. For hosts\n * that open the list without moving focus into it.\n * @internal\n /\n revealActiveOption() {\n this.runEffect({ type: 'scrollActiveNextFrame' })\n }\n\n private readonly handleOptionClick = (event: MouseEvent) => {\n const option = event.target as DapDSOptionItem\n this.dispatch(\n {\n type: 'click',\n option,\n selected: !!option?.selected,\n modifier: event.ctrlKey \|\| event.metaKey,\n },\n event,\n )\n }\n\n getSearchString = (char: string) => {\n this.restartTypeaheadTimer(TYPEAHEAD_RESET_MS)\n this.queryString += char\n return this.queryString\n }\n\n /* (Re)start the timer that clears the typeahead query. /\n private restartTypeaheadTimer(ms: number) {\n if (typeof this.queryTimeout === 'number') {\n window.clearTimeout(this.queryTimeout)\n }\n\n this.queryTimeout = window.setTimeout(() => {\n this.dispatch({ type: 'typeaheadElapsed' })\n }, ms)\n }\n\n buildQueryString = (char: string) => {\n this.dispatch({ type: 'typeahead', char })\n }\n\n public captureFocus(key?: string): void {\n this.dispatch({ type: 'open', key })\n }\n\n public removeFocus(): void {\n this.dispatch({ type: 'close' })\n }\n\n private handleSlotChange() {\n if (this.items) {\n this.warnIgnoredChildren()\n return\n }\n this.dispatch({ type: 'slotChanged', options: this.getAllOptions() })\n }\n\n // ---------------------------------------------------------------------------\n // Listbox state wiring\n // ---------------------------------------------------------------------------\n\n private toListboxState(): ListboxState<Option> {\n return {\n value: this.value,\n filterText: this.filterText,\n searchMode: this.searchMode,\n search: this.search,\n searchOnValueSet: this.searchOnValueSet,\n disableDelaySet: this.disableDelaySet,\n focused: this.focused,\n options: this.options,\n optionEls: this.optionEls,\n availableOptions: this.availableOptions,\n selectedIndex: this.selectedIndex,\n currentOption: this.currentOption,\n marked: this.markedOption,\n flagged: this.flaggedOption,\n query: this.queryString,\n ownValue: this.ownValue,\n }\n }\n\n /\n Reduce, apply the new state, then run the effects in order. Fields that\n * changed and changed back within one reduction are still reported to Lit,\n * exactly as the former sequence of assignments did.\n /\n private dispatch(action: ListboxAction<Option>, event?: Event) {\n const { state, effects, changed, flags } = reduceListbox(\n this.toListboxState(),\n action,\n )\n\n for (const key of REACTIVE_FIELDS) {\n if (!changed.includes(key)) continue\n const self = this as unknown as Record<string, unknown>\n if (self[key] !== state[key]) {\n self[key] = state[key]\n } else {\n const options = (\n this.constructor as typeof ReactiveElement\n ).getPropertyOptions(key)\n this.requestUpdate(key, self[key], {\n ...options,\n hasChanged: () => true,\n })\n }\n }\n this.applyOptionFlags(flags, state)\n this.markedOption = state.marked\n this.flaggedOption = state.flagged\n this.queryString = state.query\n this.ownValue = state.ownValue\n\n for (const effect of effects) {\n this.runEffect(effect, event)\n }\n }\n\n /\n Option flags follow Listbox state. On the caller's option items (the\n * source of truth for what is selected / focusable) the marked option is\n * `selected`, the flagged option is `focused` with tabindex 0, and every\n * other item is cleared. A rendered clone (a click passes the clone) is only\n * ever set, never cleared: its flags otherwise come from its render bindings.\n */\n private applyOptionFlags(\n flags: { selected: boolean; focus: boolean },\n state: ListboxState<Option>,\n ) {\n if (!flags.selected && !flags.focus) return\n\n const sources = new Set<Option>([\n ...this.optionEls,\n ...((this.options as Option[] \| undefined) ?? []),\n ])\n\n if (flags.selected) {\n sources.forEach(el => (el.selected = el === state.marked))\n if (state.marked) state.marked.selected = true\n }\n\n if (flags.focus) {\n sources.forEach(el => {\n const isFlagged = el === state.flagged\n el.focused = isFlagged\n el.tabIndex = isFlagged ? 0 : -1\n })\n if (state.flagged) {\n state.flagged.focused = true\n state.flagged.tabIndex = 0\n }\n }\n }\n\n private runEffect(effect: ListboxEffect<Option>, event?: Event) {\n switch (effect.type) {\n case 'emit':\n return this.emitListboxEvent(effect)\n case 'focusOption':\n return this.setFocusedOption(effect.option)\n case 'scrollActive':\n return this.scrollToActiveOption(effect.option)\n case 'scrollActiveNextFrame':\n return this.revealOverFrames()\n case 'focusHost':\n return this.focus()\n case 'preventDefault':\n return event?.preventDefault()\n case 'stopPropagation':\n return event?.stopPropagation()\n case 'scheduleTypeaheadReset':\n return this.restartTypeaheadTimer(effect.ms)\n case 'afterUpdate':\n this.updateComplete.then(() => this.dispatch(effect.action))\n return\n }\n }\n\n private emitListboxEvent(\n effect: Extract<ListboxEffect<Option>, { type: 'emit' }>,\n ) {\n const d = effect.detail\n switch (d.kind) {\n case 'details':\n return this.emit(effect.name, {\n ...this.getEventDetails(d.option, d.index),\n })\n case 'null':\n return this.emit(effect.name, null)\n case 'key':\n return this.emit(effect.name, { key: d.key, code: d.code })\n case 'keyDetails':\n return this.emit(effect.name, {\n code: d.code,\n key: d.key,\n ...this.getEventDetails(d.option, d.index),\n })\n case 'none':\n return this.emit(effect.name)\n case 'elements':\n return this.emit(effect.name, { elements: d.elements })\n case 'deselect':\n return this.emit(effect.name, {\n option: d.option,\n value: undefined,\n index: -1,\n text: d.option.optionText,\n ...this.itemDetail(d.option),\n })\n }\n }\n\n private renderOptionContent(option: DapDSOptionItem, index: number) {\n const item = this.items ? optionDataOf(option) : undefined\n if (!item) {\n return unsafeStatic(option.innerHTML)\n }\n if (!this.renderOption) {\n return item.label\n }\n return this.renderOption(item, {\n index,\n selected: this.value === option.value,\n active: index === this.selectedIndex,\n disabled: !!item.disabled,\n })\n }\n\n render() {\n return html`<div\n part=\"base\"\n class=${clsx('option-list', {\n 'option-list--sm': this.size === 'sm',\n 'option-list--lg': this.size === 'lg',\n })}\n @keydown=${this.handleKeydown}\n @focus=${this.captureFocus}>\n ${\n // No copied options before the first update: the server render and the\n // client's hydration render then match (both empty). Options always\n // arrive after it anyway (slotchange / items).\n (this.hasUpdated ? this.availableOptions : []).map(\n (option, index) => html`\n <dap-ds-option-item\n size=${this.size}\n part=\"option-item\"\n exportparts=\"base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix\"\n ?disabled=${option.disabled}\n ?selected=${this.value === option.value}\n ?focused=${index === this.selectedIndex}\n label=${ifDefined(option.label)}\n role=\"option\"\n value=${option.value}\n tabIndex=${option.tabIndex}\n id=${option.id \|\| `dap-ds-option-${option.value}`}\n data-testid=${ifDefined(option.dataset.testid \|\| undefined)}\n selectable=${this.selectable}\n @click=${this.handleOptionClick}>\n ${this.renderOptionContent(option, index)}\n </dap-ds-option-item>\n `,\n )\n }\n <!-- The caller's options are only the data source (the copies above\n are what is shown), so keep them out of the accessibility tree. -->\n <div hidden aria-hidden=\"true\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div> `\n }\n}\n"],"names":["REVEAL_FRAMES","USER_SCROLL_EVENTS","REACTIVE_FIELDS","_DapDSOptionList","SizedMixin","DdsElement","event","option","char","TYPEAHEAD_RESET_MS","value","toOptionItems","isAutoCompleteMode","_changedProperties","options","optionElementsFor","mainSlot","_a","assignedElement","embeddedSlot","ro","el","missing","label","_b","filterOptions","name","oldValue","newValue","elements","activeOption","scrollIntoContainer","index","opt","__spreadValues","item","optionDataOf","i","renderedItem","frames","cancelled","stop","type","step","left","ms","key","action","state","effects","changed","flags","reduceListbox","self","__spreadProps","effect","sources","isFlagged","d","unsafeStatic","html","clsx","ifDefined","DapDSOptionItem","unsafeCSS","styles","DapDSOptionList","__decorateClass","property","optionItemsConverter"],"mappings":"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"}

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

@@ -1,16 +1,13 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as l } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as c } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { DdsElement as h } from "../../internal/dds-hu-element.js";
-import f from "./overlay.scss.js";
-import { unsafeCSS as p } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, m = (a, e, s, n) => {
+import { unsafeCSS as l, html as c } from "lit";
+import { property as h } from "lit/decorators.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import p from "./overlay.scss.js";
+var u = Object.defineProperty, v = (a, e, s, n) => {
   for (var t = void 0, o = a.length - 1, d; o >= 0; o--)
     (d = a[o]) && (t = d(e, s, t) || t);
   return t && u(e, s, t), t;
 };
-const i = class i extends h {
+const i = class i extends f {
   constructor() {
     super(...arguments), this.open = !1;
   }
@@ -58,13 +55,13 @@ const i = class i extends h {
     );
   }
   render() {
-    return l`<div part="base"><slot></slot></div>`;
+    return c`<div part="base"><slot></slot></div>`;
   }
 };
-i.tagName = "dap-ds-overlay", i.styles = p(f);
+i.tagName = "dap-ds-overlay", i.styles = l(p);
 let r = i;
-m([
-  c({ type: Boolean, reflect: !0 })
+v([
+  h({ type: Boolean, reflect: !0 })
 ], r.prototype, "open");
 export {
   r as default

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

	@@ -1 +1 @@
1	- {"version":3,"file":"overlay.component.js","sources":["../../../src/components/overlay/overlay.component.ts"],"sourcesContent":["import { html, type PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './overlay.scss?inline'\n\n/*\n `dap-ds-overlay`\n * @summary An overlay is a container for overlay content.\n * @element dap-ds-overlay\n * @title - Overlay\n \n @property {boolean} open - The open state of the overlay.\n \n @event {CustomEvent} dds-before-open - Fires before the overlay opens.\n * @event {CustomEvent} dds-opened - Fires after the overlay opens.\n * @event {CustomEvent} dds-before-close - Fires before the overlay closes.\n * @event {CustomEvent} dds-closed - Fires after the overlay closes.\n \n @slot - The content of the overlay.\n \n @csspart base - The overlay element\n \n @cssproperty --dds-overlay-z-index - Controls the z-index of the overlay (default: 1)\n * @cssproperty --dds-overlay-background - Controls the background of the overlay (default: var(--dds-black-10))\n * @cssproperty --dds-overlay-opacity-closed - Controls the opacity when overlay is closed (default: 0)\n * @cssproperty --dds-overlay-opacity-open - Controls the opacity when overlay is open (default: 1)\n * @cssproperty --dds-overlay-transition-duration - Controls the transition duration (default: var(--dds-transition-fast))\n * @cssproperty --dds-overlay-transition-timing - Controls the transition timing function (default: var(--dds-easing-ease-in-out))\n /\nexport default class DapDSOverlay extends DdsElement {\n static tagName = 'dap-ds-overlay'\n\n /* The open state of the overlay. */\n @property({ type: Boolean, reflect: true }) open = false\n\n static readonly styles = unsafeCSS(styles)\n\n connectedCallback(): void {\n super.connectedCallback()\n // Set aria-hidden to true by default\n if (!this.hasAttribute('aria-hidden')) {\n this.setAttribute('aria-hidden', 'true')\n }\n // Add closed class initially\n if (!this.open) {\n this.classList.add('closed')\n }\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('open')) {\n const wasOpen = changedProperties.get('open') as boolean \| undefined\n const isOpen = this.open\n\n if (isOpen && !wasOpen) {\n this.handleOpen()\n } else if (!isOpen && wasOpen) {\n this.handleClose()\n }\n }\n }\n\n private handleOpen(): void {\n const beforeOpenEvent = this.emit('dds-before-open', undefined, {\n cancelable: true,\n })\n\n if (beforeOpenEvent.defaultPrevented) {\n this.open = false\n return\n }\n\n this.classList.remove('closed', 'transitioning')\n this.setAttribute('aria-hidden', 'false')\n\n this.addEventListener(\n 'transitionend',\n () => {\n this.emit('dds-opened', undefined, {\n cancelable: false,\n })\n },\n { once: true },\n )\n }\n\n private handleClose(): void {\n const beforeCloseEvent = this.emit('dds-before-close', undefined, {\n cancelable: true,\n })\n\n if (beforeCloseEvent.defaultPrevented) {\n this.open = true\n return\n }\n\n this.classList.add('transitioning')\n this.classList.remove('closed')\n this.setAttribute('aria-hidden', 'true')\n\n this.addEventListener(\n 'transitionend',\n () => {\n this.classList.remove('transitioning')\n this.classList.add('closed')\n this.emit('dds-closed', undefined, {\n cancelable: false,\n })\n },\n { once: true },\n )\n }\n\n render() {\n return html`<div part=\"base\"><slot></slot></div>`\n }\n}\n"],"names":["_DapDSOverlay","DdsElement","changedProperties","wasOpen","isOpen","html","unsafeCSS","styles","DapDSOverlay","__decorateClass","property"],"mappings":"~~;;;;;;;;;;;;~~AA+BA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA;AAAA,EAAA;AAAA,EAInD,oBAA0B;AACxB,UAAM,kBAAkB,GAEnB,KAAK,aAAa,aAAa,KAC7B,KAAA,aAAa,eAAe,MAAM,GAGpC,KAAK,QACH,KAAA,UAAU,IAAI,QAAQ;AAAA,EAC7B;AAAA,EAGQ,QACRC,GACM;AAGF,QAFJ,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,GAAG;AAC3B,YAAAC,IAAUD,EAAkB,IAAI,MAAM,GACtCE,IAAS,KAAK;AAEhB,MAAAA,KAAU,CAACD,IACb,KAAK,WAAW,IACP,CAACC,KAAUD,KACpB,KAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAGM,aAAmB;AAKzB,QAJwB,KAAK,KAAK,mBAAmB,QAAW;AAAA,MAC9D,YAAY;AAAA,IAAA,CACb,EAEmB,kBAAkB;AACpC,WAAK,OAAO;AACZ;AAAA,IAAA;AAGG,SAAA,UAAU,OAAO,UAAU,eAAe,GAC1C,KAAA,aAAa,eAAe,OAAO,GAEnC,KAAA;AAAA,MACH;AAAA,MACA,MAAM;AACC,aAAA,KAAK,cAAc,QAAW;AAAA,UACjC,YAAY;AAAA,QAAA,CACb;AAAA,MACH;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IACf;AAAA,EAAA;AAAA,EAGM,cAAoB;AAK1B,QAJyB,KAAK,KAAK,oBAAoB,QAAW;AAAA,MAChE,YAAY;AAAA,IAAA,CACb,EAEoB,kBAAkB;AACrC,WAAK,OAAO;AACZ;AAAA,IAAA;AAGG,SAAA,UAAU,IAAI,eAAe,GAC7B,KAAA,UAAU,OAAO,QAAQ,GACzB,KAAA,aAAa,eAAe,MAAM,GAElC,KAAA;AAAA,MACH;AAAA,MACA,MAAM;AACC,aAAA,UAAU,OAAO,eAAe,GAChC,KAAA,UAAU,IAAI,QAAQ,GACtB,KAAA,KAAK,cAAc,QAAW;AAAA,UACjC,YAAY;AAAA,QAAA,CACb;AAAA,MACH;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IACf;AAAA,EAAA;AAAA,EAGF,SAAS;AACA,WAAAE;~~AAAAA~~,EAAA;AAEX;AA1FEL,EAAO,UAAU,kBAKDA,EAAA,SAASM,EAAUC,CAAM;AAN3C,IAAqBC,IAArBR;AAI8CS,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAJvBF,EAIyB,WAAA,MAAA;"}
1	+ {"version":3,"file":"overlay.component.js","sources":["../../../src/components/overlay/overlay.component.ts"],"sourcesContent":["import { html, type PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './overlay.scss?inline'\n\n/*\n `dap-ds-overlay`\n * @summary An overlay is a container for overlay content.\n * @element dap-ds-overlay\n * @title - Overlay\n \n @property {boolean} open - The open state of the overlay.\n \n @event {CustomEvent} dds-before-open - Fires before the overlay opens.\n * @event {CustomEvent} dds-opened - Fires after the overlay opens.\n * @event {CustomEvent} dds-before-close - Fires before the overlay closes.\n * @event {CustomEvent} dds-closed - Fires after the overlay closes.\n \n @slot - The content of the overlay.\n \n @csspart base - The overlay element\n \n @cssproperty --dds-overlay-z-index - Controls the z-index of the overlay (default: 1)\n * @cssproperty --dds-overlay-background - Controls the background of the overlay (default: var(--dds-black-10))\n * @cssproperty --dds-overlay-opacity-closed - Controls the opacity when overlay is closed (default: 0)\n * @cssproperty --dds-overlay-opacity-open - Controls the opacity when overlay is open (default: 1)\n * @cssproperty --dds-overlay-transition-duration - Controls the transition duration (default: var(--dds-transition-fast))\n * @cssproperty --dds-overlay-transition-timing - Controls the transition timing function (default: var(--dds-easing-ease-in-out))\n /\nexport default class DapDSOverlay extends DdsElement {\n static tagName = 'dap-ds-overlay'\n\n /* The open state of the overlay. */\n @property({ type: Boolean, reflect: true }) open = false\n\n static readonly styles = unsafeCSS(styles)\n\n connectedCallback(): void {\n super.connectedCallback()\n // Set aria-hidden to true by default\n if (!this.hasAttribute('aria-hidden')) {\n this.setAttribute('aria-hidden', 'true')\n }\n // Add closed class initially\n if (!this.open) {\n this.classList.add('closed')\n }\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('open')) {\n const wasOpen = changedProperties.get('open') as boolean \| undefined\n const isOpen = this.open\n\n if (isOpen && !wasOpen) {\n this.handleOpen()\n } else if (!isOpen && wasOpen) {\n this.handleClose()\n }\n }\n }\n\n private handleOpen(): void {\n const beforeOpenEvent = this.emit('dds-before-open', undefined, {\n cancelable: true,\n })\n\n if (beforeOpenEvent.defaultPrevented) {\n this.open = false\n return\n }\n\n this.classList.remove('closed', 'transitioning')\n this.setAttribute('aria-hidden', 'false')\n\n this.addEventListener(\n 'transitionend',\n () => {\n this.emit('dds-opened', undefined, {\n cancelable: false,\n })\n },\n { once: true },\n )\n }\n\n private handleClose(): void {\n const beforeCloseEvent = this.emit('dds-before-close', undefined, {\n cancelable: true,\n })\n\n if (beforeCloseEvent.defaultPrevented) {\n this.open = true\n return\n }\n\n this.classList.add('transitioning')\n this.classList.remove('closed')\n this.setAttribute('aria-hidden', 'true')\n\n this.addEventListener(\n 'transitionend',\n () => {\n this.classList.remove('transitioning')\n this.classList.add('closed')\n this.emit('dds-closed', undefined, {\n cancelable: false,\n })\n },\n { once: true },\n )\n }\n\n render() {\n return html`<div part=\"base\"><slot></slot></div>`\n }\n}\n"],"names":["_DapDSOverlay","DdsElement","changedProperties","wasOpen","isOpen","html","unsafeCSS","styles","DapDSOverlay","__decorateClass","property"],"mappings":";;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA;AAAA,EAAA;AAAA,EAInD,oBAA0B;AACxB,UAAM,kBAAkB,GAEnB,KAAK,aAAa,aAAa,KAC7B,KAAA,aAAa,eAAe,MAAM,GAGpC,KAAK,QACH,KAAA,UAAU,IAAI,QAAQ;AAAA,EAC7B;AAAA,EAGQ,QACRC,GACM;AAGF,QAFJ,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,GAAG;AAC3B,YAAAC,IAAUD,EAAkB,IAAI,MAAM,GACtCE,IAAS,KAAK;AAEhB,MAAAA,KAAU,CAACD,IACb,KAAK,WAAW,IACP,CAACC,KAAUD,KACpB,KAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAGM,aAAmB;AAKzB,QAJwB,KAAK,KAAK,mBAAmB,QAAW;AAAA,MAC9D,YAAY;AAAA,IAAA,CACb,EAEmB,kBAAkB;AACpC,WAAK,OAAO;AACZ;AAAA,IAAA;AAGG,SAAA,UAAU,OAAO,UAAU,eAAe,GAC1C,KAAA,aAAa,eAAe,OAAO,GAEnC,KAAA;AAAA,MACH;AAAA,MACA,MAAM;AACC,aAAA,KAAK,cAAc,QAAW;AAAA,UACjC,YAAY;AAAA,QAAA,CACb;AAAA,MACH;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IACf;AAAA,EAAA;AAAA,EAGM,cAAoB;AAK1B,QAJyB,KAAK,KAAK,oBAAoB,QAAW;AAAA,MAChE,YAAY;AAAA,IAAA,CACb,EAEoB,kBAAkB;AACrC,WAAK,OAAO;AACZ;AAAA,IAAA;AAGG,SAAA,UAAU,IAAI,eAAe,GAC7B,KAAA,UAAU,OAAO,QAAQ,GACzB,KAAA,aAAa,eAAe,MAAM,GAElC,KAAA;AAAA,MACH;AAAA,MACA,MAAM;AACC,aAAA,UAAU,OAAO,eAAe,GAChC,KAAA,UAAU,IAAI,QAAQ,GACtB,KAAA,KAAK,cAAc,QAAW;AAAA,UACjC,YAAY;AAAA,QAAA,CACb;AAAA,MACH;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IACf;AAAA,EAAA;AAAA,EAGF,SAAS;AACA,WAAAE;AAAA,EAAA;AAEX;AA1FEL,EAAO,UAAU,kBAKDA,EAAA,SAASM,EAAUC,CAAM;AAN3C,IAAqBC,IAArBR;AAI8CS,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAJvBF,EAIyB,WAAA,MAAA;"}

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

@@ -1,23 +1,17 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as p, html as u } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as m } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { DdsElement as b } from "../../internal/dds-hu-element.js";
-import "../../localization/localization.js";
+import { unsafeCSS as b, nothing as p, html as h } from "lit";
+import { property as i, state as l } from "lit/decorators.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
 import c from "../button/button.component.js";
 import S from "../icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.js";
 import x from "../option-item/option-item.component.js";
-import f from "../select/select.component.js";
-import y from "./pager.scss.js";
-import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as h } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var $ = Object.defineProperty, a = (l, t, s, o) => {
-  for (var n = void 0, r = l.length - 1, g; r >= 0; r--)
-    (g = l[r]) && (n = g(t, s, n) || n);
-  return n && $(t, s, n), n;
+import y from "../select/select.component.js";
+import f from "./pager.scss.js";
+var z = Object.defineProperty, a = (d, t, s, o) => {
+  for (var n = void 0, r = d.length - 1, g; r >= 0; r--)
+    (g = d[r]) && (n = g(t, s, n) || n);
+  return n && z(t, s, n), n;
 };
-const d = class d extends b {
+const u = class u extends m {
   constructor() {
     super(...arguments), this.disabled = !1, this.manualPagination = !1, this.pageIndex = 0, this._pageIndex = 0, this.pageSize = 10, this._pageSize = 10, this.totalRows = 0, this.pageSizeOptions = [10, 25, 50, 100], this.showPageSizeOptions = "true", this.showPageIndex = "true", this.showPageCount = "true", this.showFirstButton = "true", this.showPreviousButton = "true", this.showNextButton = "true", this.showLastButton = "true", this.showPageNumbers = "false", this.siblingCount = 1, this.pageButtonTestId = "pager-button";
   }
@@ -43,7 +37,7 @@ const d = class d extends b {
     });
   }
   renderPageSizeSelect() {
-    return this.showPageSizeOptions !== "true" ? p : u`<dap-ds-select
+    return this.showPageSizeOptions !== "true" ? p : h`<dap-ds-select
       class="pager__select"
       part="page-size"
       exportparts="base:page-size-select-base, trigger:page-size-select-trigger"
@@ -59,20 +53,20 @@ const d = class d extends b {
         slot="indicator-icon"
         size="16"></dap-ds-icon-arrow-down-s-fill>
       ${this.pageSizeOptions && this.pageSizeOptions.length > 0 ? this.pageSizeOptions.map(
-      (t) => u`<dap-ds-option-item
+      (t) => h`<dap-ds-option-item
                 value=${t}
-                label=${h("pager.pageSize", { count: t })}
+                label=${this.localize.t("pager.pageSize", { count: t })}
                 >${t}</dap-ds-option-item
               >`
     ) : p}
     </dap-ds-select>`;
   }
   renderNavigationButton(t, s, o, n, r, g) {
-    return u`<dap-ds-button
+    return h`<dap-ds-button
       part=${t}
       data-testid="${this.pageButtonTestId}-${t}"
       size="xs"
-      aria-label=${h(`pager.${s}`)}
+      aria-label=${this.localize.t(`pager.${s}`)}
       exportparts="base:pager-button-${t}-base, content:pager-button-${t}-content"
       variant="subtle-neutral"
       @click=${() => this.updatePageIndex(s, o, this.pageSize)}
@@ -89,10 +83,10 @@ const d = class d extends b {
   renderPageNumbers() {
     if (this.showPageNumbers !== "true") return p;
     const t = this.manualPagination ? this._pageIndex : this.pageIndex, s = Math.max(1, Math.ceil(this.totalRows / this.pageSize));
-    return u`<div part="page-numbers" class="pager__page-numbers">
+    return h`<div part="page-numbers" class="pager__page-numbers">
       ${this.pageNumberWindow(t, s).map((o) => {
       const n = o === t;
-      return u`<dap-ds-button
+      return h`<dap-ds-button
           part=${n ? "page-number page-number-active" : "page-number"}
           exportparts="base:page-number-base, content:page-number-content"
           class="pager__page-number${n ? " pager__page-number--active" : ""}"
@@ -112,12 +106,12 @@ const d = class d extends b {
     const t = this.manualPagination ? this._pageIndex : this.pageIndex, s = this.manualPagination ? this._pageSize : this.pageSize;
     if (this.pageStateText) {
       const o = this.pageStateText(t, s, this.totalRows);
-      return u`<span part="page-info" class="pager__info"
+      return h`<span part="page-info" class="pager__info"
         >${o}</span
       >`;
     }
-    return u`<span part="page-info" class="pager__info"
-      >${h("pager.pageInfo", {
+    return h`<span part="page-info" class="pager__info"
+      >${this.localize.t("pager.pageInfo", {
       rangeStart: t * s + 1,
       rangeEnd: (t + 1) * s,
       totalRows: this.totalRows
@@ -126,7 +120,7 @@ const d = class d extends b {
   }
   render() {
     const t = this.pageIndex === Math.ceil(this.totalRows / this.pageSize) - 1;
-    return u`
+    return h`
       <div part="base" class="pager">
         ${this.renderPageSizeSelect()}
         ${this.showFirstButton === "true" ? this.renderNavigationButton(
@@ -134,7 +128,7 @@ const d = class d extends b {
       "first",
       0,
       this.pageIndex === 0,
-      this.firstButtonLabel || h("pager.first"),
+      this.firstButtonLabel || this.localize.t("pager.first"),
       "first-button-label"
     ) : p}
         ${this.showPreviousButton === "true" ? this.renderNavigationButton(
@@ -142,7 +136,7 @@ const d = class d extends b {
       "previous",
       this.pageIndex - 1,
       this.pageIndex === 0,
-      this.previousButtonLabel || h("pager.previous"),
+      this.previousButtonLabel || this.localize.t("pager.previous"),
       "previous-button-label"
     ) : p}
         ${this.renderPageNumbers()} ${this.renderPageInfo()}
@@ -151,7 +145,7 @@ const d = class d extends b {
       "next",
       this.pageIndex + 1,
       t,
-      this.nextButtonLabel || h("pager.next"),
+      this.nextButtonLabel || this.localize.t("pager.next"),
       "next-button-label"
     ) : p}
         ${this.showLastButton === "true" ? this.renderNavigationButton(
@@ -159,20 +153,20 @@ const d = class d extends b {
       "last",
       Math.ceil(this.totalRows / this.pageSize) - 1,
       t,
-      this.lastButtonLabel || h("pager.last"),
+      this.lastButtonLabel || this.localize.t("pager.last"),
       "last-button-label"
     ) : p}
       </div>
     `;
   }
 };
-d.tagName = "dap-ds-pager", d.dependencies = {
-  "dap-ds-select": f,
+u.tagName = "dap-ds-pager", u.dependencies = {
+  "dap-ds-select": y,
   "dap-ds-icon-arrow-down-s-fill": S,
   "dap-ds-option-item": x,
   "dap-ds-button": c
-}, d.styles = w(y);
-let e = d;
+}, u.styles = b(f);
+let e = u;
 a([
   i({ type: Boolean })
 ], e.prototype, "disabled");
@@ -183,13 +177,13 @@ a([
   i({ type: Number })
 ], e.prototype, "pageIndex");
 a([
-  m()
+  l()
 ], e.prototype, "_pageIndex");
 a([
   i({ type: Number })
 ], e.prototype, "pageSize");
 a([
-  m()
+  l()
 ], e.prototype, "_pageSize");
 a([
   i({ type: Number })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pager.component.js","sources":["../../../src/components/pager/pager.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { translate } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport ArrowsArrowDownSFill from '../icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './pager.scss?inline'\n\n/*\n `dap-ds-pager`\n * @summary A pager is a component that displays pagination controls.\n * @element dap-ds-pager\n * @title - Pager\n \n @event {{ action: string, pagination: { pageIndex: number, pageSize: number } }} dds-pagination-change - Event fired when the pagination changes\n \n @csspart base - The main pager container.\n * @csspart first - The first page button.\n * @csspart previous - The previous page button.\n * @csspart next - The next page button.\n * @csspart last - The last page button.\n * @csspart page-size - The page size select.\n * @csspart pager-button-first-base - The base of the first page button.\n * @csspart pager-button-first-content - The content of the first page button.\n * @csspart pager-button-previous-base - The base of the previous page button.\n * @csspart pager-button-previous-content - The content of the previous page button.\n * @csspart pager-button-next-base - The base of the next page button.\n * @csspart pager-button-next-content - The content of the next page button.\n * @csspart pager-button-last-base - The base of the last page button.\n * @csspart pager-button-last-content - The content of the last page button.\n * @csspart page-size-select-base - The base of the page size select.\n * @csspart page-size-select-trigger - The trigger of the page size select.\n * @csspart page-numbers - The container of the numbered page buttons (shown when showPageNumbers is 'true').\n * @csspart page-number - Each numbered page button.\n * @csspart page-number-active - The active (current) numbered page button.\n * @csspart page-number-base - The base of each numbered page button.\n * @csspart page-number-content - The content of each numbered page button.\n * @csspart page-info - The page info / total count text.\n \n @cssproperty --dds-pager-spacing-vertical - The vertical spacing of the pager (default: var(--dds-spacing-400))\n * @cssproperty --dds-pager-spacing-horizontal - The horizontal spacing of the pager (default: var(--dds-spacing-200))\n * @cssproperty --dds-pager-button-padding - The padding of the pager buttons (default: var(--dds-spacing-150))\n * @cssproperty --dds-pager-button-border-width - The border width of the pager buttons (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-pager-button-border-color - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled))\n * @cssproperty --dds-pager-button-border-radius - The border radius of the pager buttons (default: var(--dds-radius-rounded))\n * @cssproperty --dds-pager-button-background - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled))\n * @cssproperty --dds-pager-button-font-size - The font size of the pager buttons (default: var(--dds-font-sm, 14px))\n * @cssproperty --dds-pager-button-font-weight - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700))\n /\nexport default class DapDSPager extends DdsElement {\n static tagName = 'dap-ds-pager'\n\n static dependencies = {\n 'dap-ds-select': DapDSSelect,\n 'dap-ds-icon-arrow-down-s-fill': ArrowsArrowDownSFill,\n 'dap-ds-option-item': DapDSOptionItem,\n 'dap-ds-button': DapDSButton,\n }\n\n /* Whether the pager is disabled. /\n @property({ type: Boolean }) disabled = false\n /* Enable manual pagination. If true, the component will not automatically update the page index. /\n @property({ type: Boolean }) manualPagination = false\n /* The current page index. /\n @property({ type: Number }) pageIndex = 0\n @state() private _pageIndex = 0\n /* The number of items per page. /\n @property({ type: Number }) pageSize = 10\n @state() private _pageSize = 10\n /* The total number of rows. /\n @property({ type: Number }) totalRows = 0\n /* Available page size options /\n @property({ type: Array }) pageSizeOptions = [10, 25, 50, 100]\n\n /* Show the page size options. /\n @property({ type: String }) showPageSizeOptions = 'true'\n /* Show the page index. /\n @property({ type: String }) showPageIndex = 'true'\n /* Show the page count. /\n @property({ type: String }) showPageCount = 'true'\n /* Show the first button. /\n @property({ type: String }) showFirstButton = 'true'\n /* Show the previous button. /\n @property({ type: String }) showPreviousButton = 'true'\n /* Show the next button. /\n @property({ type: String }) showNextButton = 'true'\n /* Show the last button. /\n @property({ type: String }) showLastButton = 'true'\n /* Show numbered page buttons between the previous and next buttons. /\n @property({ type: String }) showPageNumbers = 'false'\n /* How many page numbers to show on each side of the current page. /\n @property({ type: Number }) siblingCount = 1\n\n /* The first button label. /\n @property({ type: String }) firstButtonLabel: string\n /* The previous button label. /\n @property({ type: String }) previousButtonLabel: string\n /* The next button label. /\n @property({ type: String }) nextButtonLabel: string\n /* The last button label. /\n @property({ type: String }) lastButtonLabel: string\n\n /* `data-testid` for the pagination buttons. Suffixed with the button's part (first/previous/next/last). /\n @property() pageButtonTestId = 'pager-button'\n\n /* The function to determine the pager text. If not provided, uses default reactive translation.\n * @type {Function}\n /\n @property({ attribute: false }) pageStateText?: (\n pageIndex: number,\n pageSize: number,\n totalRows: number,\n ) => unknown\n\n static readonly styles = unsafeCSS(styles)\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n\n if (this.manualPagination) {\n if (_changedProperties.has('pageIndex')) {\n this._pageIndex = this.pageIndex\n }\n\n if (_changedProperties.has('pageSize')) {\n this._pageSize = this.pageSize\n }\n }\n }\n\n private updatePageIndex(action: string, pageIndex: number, pageSize: number) {\n this.manualPagination\n ? (this._pageIndex = pageIndex)\n : (this.pageIndex = pageIndex)\n\n this.emit('dds-pagination-change', {\n action,\n pagination: {\n pageIndex: pageIndex,\n pageSize: pageSize,\n },\n })\n }\n\n private updatePageSize(pageSize: number) {\n // Reset to first page when changing page size\n const pageIndex = 0\n\n if (this.manualPagination) {\n this._pageSize = pageSize\n this._pageIndex = pageIndex\n } else {\n this.pageSize = pageSize\n this.pageIndex = pageIndex\n }\n\n this.emit('dds-pagination-change', {\n action: 'pageSize',\n pagination: {\n pageIndex: pageIndex,\n pageSize: pageSize,\n },\n })\n }\n\n private renderPageSizeSelect() {\n if (this.showPageSizeOptions !== 'true') return nothing\n\n return html`<dap-ds-select\n class=\"pager__select\"\n part=\"page-size\"\n exportparts=\"base:page-size-select-base, trigger:page-size-select-trigger\"\n floatingStrategy=\"fixed\"\n noAnimation\n ?disabled=${this.disabled}\n size=\"xs\"\n .value=${this.manualPagination\n ? this._pageSize.toString()\n : this.pageSize.toString()}\n @dds-change=${(e: Event) => {\n if ((e.target as HTMLSelectElement).value) {\n this.updatePageSize(Number((e.target as HTMLSelectElement).value))\n }\n }}>\n <dap-ds-icon-arrow-down-s-fill\n slot=\"indicator-icon\"\n size=\"16\"></dap-ds-icon-arrow-down-s-fill>\n ${this.pageSizeOptions && this.pageSizeOptions.length > 0\n ? this.pageSizeOptions.map(\n size =>\n html`<dap-ds-option-item\n value=${size}\n label=${translate('pager.pageSize', { count: size })}\n >${size}</dap-ds-option-item\n >`,\n )\n : nothing}\n </dap-ds-select>`\n }\n\n private renderNavigationButton(\n part: string,\n action: string,\n pageIndex: number,\n disabled: boolean,\n label: unknown,\n slotName: string,\n ) {\n // The consumer may slot an icon in place of the text label, so carry the\n // localized text as the accessible name regardless of the slotted content.\n return html`<dap-ds-button\n part=${part}\n data-testid=\"${this.pageButtonTestId}-${part}\"\n size=\"xs\"\n aria-label=${translate(`pager.${action}`)}\n exportparts=\"base:pager-button-${part}-base, content:pager-button-${part}-content\"\n variant=\"subtle-neutral\"\n @click=${() => this.updatePageIndex(action, pageIndex, this.pageSize)}\n ?disabled=${disabled \|\| this.disabled}>\n <slot name=${slotName}> ${label} </slot>\n </dap-ds-button>`\n }\n\n /* Windowed list of page indexes to show around the current page. /\n private pageNumberWindow(pageIndex: number, pageCount: number): number[] {\n const start = Math.max(0, pageIndex - this.siblingCount)\n const end = Math.min(pageCount - 1, pageIndex + this.siblingCount)\n const pages: number[] = []\n for (let i = start; i <= end; i++) pages.push(i)\n return pages\n }\n\n private renderPageNumbers() {\n if (this.showPageNumbers !== 'true') return nothing\n\n const pageIndex = this.manualPagination ? this._pageIndex : this.pageIndex\n const pageCount = Math.max(1, Math.ceil(this.totalRows / this.pageSize))\n\n return html`<div part=\"page-numbers\" class=\"pager__page-numbers\">\n ${this.pageNumberWindow(pageIndex, pageCount).map(i => {\n const active = i === pageIndex\n return html`<dap-ds-button\n part=${active ? 'page-number page-number-active' : 'page-number'}\n exportparts=\"base:page-number-base, content:page-number-content\"\n class=\"pager__page-number${active\n ? ' pager__page-number--active'\n : ''}\"\n data-testid=\"${this.pageButtonTestId}-page-${i}\"\n size=\"xs\"\n variant=${active ? 'primary' : 'subtle-neutral'}\n aria-current=${active ? 'page' : nothing}\n @click=${() => this.updatePageIndex('page', i, this.pageSize)}\n ?disabled=${this.disabled}\n >${i + 1}</dap-ds-button\n >`\n })}\n </div>`\n }\n\n private renderPageInfo() {\n if (this.showPageIndex !== 'true') return nothing\n\n const pageIndex = this.manualPagination ? this._pageIndex : this.pageIndex\n const pageSize = this.manualPagination ? this._pageSize : this.pageSize\n\n // If custom pageStateText is provided, use it (for backwards compatibility)\n if (this.pageStateText) {\n const customText = this.pageStateText(pageIndex, pageSize, this.totalRows)\n return html`<span part=\"page-info\" class=\"pager__info\"\n >${customText}</span\n >`\n }\n\n // Otherwise use reactive translate()\n return html`<span part=\"page-info\" class=\"pager__info\"\n >${translate('pager.pageInfo', {\n rangeStart: pageIndex pageSize + 1,\n rangeEnd: (pageIndex + 1) * pageSize,\n totalRows: this.totalRows,\n })}</span\n >`\n }\n\n protected render() {\n const isLastPage =\n this.pageIndex === Math.ceil(this.totalRows / this.pageSize) - 1\n\n return html`\n <div part=\"base\" class=\"pager\">\n ${this.renderPageSizeSelect()}\n ${this.showFirstButton === 'true'\n ? this.renderNavigationButton(\n 'first',\n 'first',\n 0,\n this.pageIndex === 0,\n this.firstButtonLabel \|\| translate('pager.first'),\n 'first-button-label',\n )\n : nothing}\n ${this.showPreviousButton === 'true'\n ? this.renderNavigationButton(\n 'previous',\n 'previous',\n this.pageIndex - 1,\n this.pageIndex === 0,\n this.previousButtonLabel \|\| translate('pager.previous'),\n 'previous-button-label',\n )\n : nothing}\n ${this.renderPageNumbers()} ${this.renderPageInfo()}\n ${this.showNextButton === 'true'\n ? this.renderNavigationButton(\n 'next',\n 'next',\n this.pageIndex + 1,\n isLastPage,\n this.nextButtonLabel \|\| translate('pager.next'),\n 'next-button-label',\n )\n : nothing}\n ${this.showLastButton === 'true'\n ? this.renderNavigationButton(\n 'last',\n 'last',\n Math.ceil(this.totalRows / this.pageSize) - 1,\n isLastPage,\n this.lastButtonLabel \|\| translate('pager.last'),\n 'last-button-label',\n )\n : nothing}\n </div>\n `\n }\n}\n"],"names":["_DapDSPager","DdsElement","_changedProperties","action","pageIndex","pageSize","nothing","html","e","size","translate","part","disabled","label","slotName","pageCount","start","end","pages","i","active","customText","isLastPage","DapDSSelect","ArrowsArrowDownSFill","DapDSOptionItem","DapDSButton","unsafeCSS","styles","DapDSPager","__decorateClass","property","state"],"mappings":"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"}
1	+ {"version":3,"file":"pager.component.js","sources":["../../../src/components/pager/pager.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSButton from '../button/button.component'\nimport ArrowsArrowDownSFill from '../icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './pager.scss?inline'\n\n/*\n `dap-ds-pager`\n * @summary A pager is a component that displays pagination controls.\n * @element dap-ds-pager\n * @title - Pager\n \n @event {{ action: string, pagination: { pageIndex: number, pageSize: number } }} dds-pagination-change - Event fired when the pagination changes\n \n @csspart base - The main pager container.\n * @csspart first - The first page button.\n * @csspart previous - The previous page button.\n * @csspart next - The next page button.\n * @csspart last - The last page button.\n * @csspart page-size - The page size select.\n * @csspart pager-button-first-base - The base of the first page button.\n * @csspart pager-button-first-content - The content of the first page button.\n * @csspart pager-button-previous-base - The base of the previous page button.\n * @csspart pager-button-previous-content - The content of the previous page button.\n * @csspart pager-button-next-base - The base of the next page button.\n * @csspart pager-button-next-content - The content of the next page button.\n * @csspart pager-button-last-base - The base of the last page button.\n * @csspart pager-button-last-content - The content of the last page button.\n * @csspart page-size-select-base - The base of the page size select.\n * @csspart page-size-select-trigger - The trigger of the page size select.\n * @csspart page-numbers - The container of the numbered page buttons (shown when showPageNumbers is 'true').\n * @csspart page-number - Each numbered page button.\n * @csspart page-number-active - The active (current) numbered page button.\n * @csspart page-number-base - The base of each numbered page button.\n * @csspart page-number-content - The content of each numbered page button.\n * @csspart page-info - The page info / total count text.\n \n @cssproperty --dds-pager-spacing-vertical - The vertical spacing of the pager (default: var(--dds-spacing-400))\n * @cssproperty --dds-pager-spacing-horizontal - The horizontal spacing of the pager (default: var(--dds-spacing-200))\n * @cssproperty --dds-pager-button-padding - The padding of the pager buttons (default: var(--dds-spacing-150))\n * @cssproperty --dds-pager-button-border-width - The border width of the pager buttons (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-pager-button-border-color - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled))\n * @cssproperty --dds-pager-button-border-radius - The border radius of the pager buttons (default: var(--dds-radius-rounded))\n * @cssproperty --dds-pager-button-background - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled))\n * @cssproperty --dds-pager-button-font-size - The font size of the pager buttons (default: var(--dds-font-sm, 14px))\n * @cssproperty --dds-pager-button-font-weight - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700))\n /\nexport default class DapDSPager extends DdsElement {\n static tagName = 'dap-ds-pager'\n\n static dependencies = {\n 'dap-ds-select': DapDSSelect,\n 'dap-ds-icon-arrow-down-s-fill': ArrowsArrowDownSFill,\n 'dap-ds-option-item': DapDSOptionItem,\n 'dap-ds-button': DapDSButton,\n }\n\n /* Whether the pager is disabled. /\n @property({ type: Boolean }) disabled = false\n /* Enable manual pagination. If true, the component will not automatically update the page index. /\n @property({ type: Boolean }) manualPagination = false\n /* The current page index. /\n @property({ type: Number }) pageIndex = 0\n @state() private _pageIndex = 0\n /* The number of items per page. /\n @property({ type: Number }) pageSize = 10\n @state() private _pageSize = 10\n /* The total number of rows. /\n @property({ type: Number }) totalRows = 0\n /* Available page size options /\n @property({ type: Array }) pageSizeOptions = [10, 25, 50, 100]\n\n /* Show the page size options. /\n @property({ type: String }) showPageSizeOptions = 'true'\n /* Show the page index. /\n @property({ type: String }) showPageIndex = 'true'\n /* Show the page count. /\n @property({ type: String }) showPageCount = 'true'\n /* Show the first button. /\n @property({ type: String }) showFirstButton = 'true'\n /* Show the previous button. /\n @property({ type: String }) showPreviousButton = 'true'\n /* Show the next button. /\n @property({ type: String }) showNextButton = 'true'\n /* Show the last button. /\n @property({ type: String }) showLastButton = 'true'\n /* Show numbered page buttons between the previous and next buttons. /\n @property({ type: String }) showPageNumbers = 'false'\n /* How many page numbers to show on each side of the current page. /\n @property({ type: Number }) siblingCount = 1\n\n /* The first button label. /\n @property({ type: String }) firstButtonLabel: string\n /* The previous button label. /\n @property({ type: String }) previousButtonLabel: string\n /* The next button label. /\n @property({ type: String }) nextButtonLabel: string\n /* The last button label. /\n @property({ type: String }) lastButtonLabel: string\n\n /* `data-testid` for the pagination buttons. Suffixed with the button's part (first/previous/next/last). /\n @property() pageButtonTestId = 'pager-button'\n\n /* The function to determine the pager text. If not provided, uses default reactive translation.\n * @type {Function}\n /\n @property({ attribute: false }) pageStateText?: (\n pageIndex: number,\n pageSize: number,\n totalRows: number,\n ) => unknown\n\n static readonly styles = unsafeCSS(styles)\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n\n if (this.manualPagination) {\n if (_changedProperties.has('pageIndex')) {\n this._pageIndex = this.pageIndex\n }\n\n if (_changedProperties.has('pageSize')) {\n this._pageSize = this.pageSize\n }\n }\n }\n\n private updatePageIndex(action: string, pageIndex: number, pageSize: number) {\n this.manualPagination\n ? (this._pageIndex = pageIndex)\n : (this.pageIndex = pageIndex)\n\n this.emit('dds-pagination-change', {\n action,\n pagination: {\n pageIndex: pageIndex,\n pageSize: pageSize,\n },\n })\n }\n\n private updatePageSize(pageSize: number) {\n // Reset to first page when changing page size\n const pageIndex = 0\n\n if (this.manualPagination) {\n this._pageSize = pageSize\n this._pageIndex = pageIndex\n } else {\n this.pageSize = pageSize\n this.pageIndex = pageIndex\n }\n\n this.emit('dds-pagination-change', {\n action: 'pageSize',\n pagination: {\n pageIndex: pageIndex,\n pageSize: pageSize,\n },\n })\n }\n\n private renderPageSizeSelect() {\n if (this.showPageSizeOptions !== 'true') return nothing\n\n return html`<dap-ds-select\n class=\"pager__select\"\n part=\"page-size\"\n exportparts=\"base:page-size-select-base, trigger:page-size-select-trigger\"\n floatingStrategy=\"fixed\"\n noAnimation\n ?disabled=${this.disabled}\n size=\"xs\"\n .value=${this.manualPagination\n ? this._pageSize.toString()\n : this.pageSize.toString()}\n @dds-change=${(e: Event) => {\n if ((e.target as HTMLSelectElement).value) {\n this.updatePageSize(Number((e.target as HTMLSelectElement).value))\n }\n }}>\n <dap-ds-icon-arrow-down-s-fill\n slot=\"indicator-icon\"\n size=\"16\"></dap-ds-icon-arrow-down-s-fill>\n ${this.pageSizeOptions && this.pageSizeOptions.length > 0\n ? this.pageSizeOptions.map(\n size =>\n html`<dap-ds-option-item\n value=${size}\n label=${this.localize.t('pager.pageSize', { count: size })}\n >${size}</dap-ds-option-item\n >`,\n )\n : nothing}\n </dap-ds-select>`\n }\n\n private renderNavigationButton(\n part: string,\n action: string,\n pageIndex: number,\n disabled: boolean,\n label: unknown,\n slotName: string,\n ) {\n // The consumer may slot an icon in place of the text label, so carry the\n // localized text as the accessible name regardless of the slotted content.\n return html`<dap-ds-button\n part=${part}\n data-testid=\"${this.pageButtonTestId}-${part}\"\n size=\"xs\"\n aria-label=${this.localize.t(`pager.${action}`)}\n exportparts=\"base:pager-button-${part}-base, content:pager-button-${part}-content\"\n variant=\"subtle-neutral\"\n @click=${() => this.updatePageIndex(action, pageIndex, this.pageSize)}\n ?disabled=${disabled \|\| this.disabled}>\n <slot name=${slotName}> ${label} </slot>\n </dap-ds-button>`\n }\n\n /* Windowed list of page indexes to show around the current page. /\n private pageNumberWindow(pageIndex: number, pageCount: number): number[] {\n const start = Math.max(0, pageIndex - this.siblingCount)\n const end = Math.min(pageCount - 1, pageIndex + this.siblingCount)\n const pages: number[] = []\n for (let i = start; i <= end; i++) pages.push(i)\n return pages\n }\n\n private renderPageNumbers() {\n if (this.showPageNumbers !== 'true') return nothing\n\n const pageIndex = this.manualPagination ? this._pageIndex : this.pageIndex\n const pageCount = Math.max(1, Math.ceil(this.totalRows / this.pageSize))\n\n return html`<div part=\"page-numbers\" class=\"pager__page-numbers\">\n ${this.pageNumberWindow(pageIndex, pageCount).map(i => {\n const active = i === pageIndex\n return html`<dap-ds-button\n part=${active ? 'page-number page-number-active' : 'page-number'}\n exportparts=\"base:page-number-base, content:page-number-content\"\n class=\"pager__page-number${active\n ? ' pager__page-number--active'\n : ''}\"\n data-testid=\"${this.pageButtonTestId}-page-${i}\"\n size=\"xs\"\n variant=${active ? 'primary' : 'subtle-neutral'}\n aria-current=${active ? 'page' : nothing}\n @click=${() => this.updatePageIndex('page', i, this.pageSize)}\n ?disabled=${this.disabled}\n >${i + 1}</dap-ds-button\n >`\n })}\n </div>`\n }\n\n private renderPageInfo() {\n if (this.showPageIndex !== 'true') return nothing\n\n const pageIndex = this.manualPagination ? this._pageIndex : this.pageIndex\n const pageSize = this.manualPagination ? this._pageSize : this.pageSize\n\n // If custom pageStateText is provided, use it (for backwards compatibility)\n if (this.pageStateText) {\n const customText = this.pageStateText(pageIndex, pageSize, this.totalRows)\n return html`<span part=\"page-info\" class=\"pager__info\"\n >${customText}</span\n >`\n }\n\n // Otherwise use the reactive localized string\n return html`<span part=\"page-info\" class=\"pager__info\"\n >${this.localize.t('pager.pageInfo', {\n rangeStart: pageIndex pageSize + 1,\n rangeEnd: (pageIndex + 1) * pageSize,\n totalRows: this.totalRows,\n })}</span\n >`\n }\n\n protected render() {\n const isLastPage =\n this.pageIndex === Math.ceil(this.totalRows / this.pageSize) - 1\n\n return html`\n <div part=\"base\" class=\"pager\">\n ${this.renderPageSizeSelect()}\n ${this.showFirstButton === 'true'\n ? this.renderNavigationButton(\n 'first',\n 'first',\n 0,\n this.pageIndex === 0,\n this.firstButtonLabel \|\| this.localize.t('pager.first'),\n 'first-button-label',\n )\n : nothing}\n ${this.showPreviousButton === 'true'\n ? this.renderNavigationButton(\n 'previous',\n 'previous',\n this.pageIndex - 1,\n this.pageIndex === 0,\n this.previousButtonLabel \|\| this.localize.t('pager.previous'),\n 'previous-button-label',\n )\n : nothing}\n ${this.renderPageNumbers()} ${this.renderPageInfo()}\n ${this.showNextButton === 'true'\n ? this.renderNavigationButton(\n 'next',\n 'next',\n this.pageIndex + 1,\n isLastPage,\n this.nextButtonLabel \|\| this.localize.t('pager.next'),\n 'next-button-label',\n )\n : nothing}\n ${this.showLastButton === 'true'\n ? this.renderNavigationButton(\n 'last',\n 'last',\n Math.ceil(this.totalRows / this.pageSize) - 1,\n isLastPage,\n this.lastButtonLabel \|\| this.localize.t('pager.last'),\n 'last-button-label',\n )\n : nothing}\n </div>\n `\n }\n}\n"],"names":["_DapDSPager","DdsElement","_changedProperties","action","pageIndex","pageSize","nothing","html","e","size","part","disabled","label","slotName","pageCount","start","end","pages","i","active","customText","isLastPage","DapDSSelect","ArrowsArrowDownSFill","DapDSOptionItem","DapDSButton","unsafeCSS","styles","DapDSPager","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/password-input/password-input.component.d.ts CHANGED Viewed

@@ -75,18 +75,25 @@ import { default as DapDSStack } from '../stack/stack.component';
  * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).
  *
  * @csspart postfix - The postfix of the password input.
- * @csspart password-input - The password input.
- * @csspart password-input--visible - The visible password input.
  * @csspart show-button - The show button of the password input.
  * @csspart show-button-base - The base of the show button.
  * @csspart show-button-content - The content of the show button.
  * @csspart show-icon - The show icon of the password input.
  * @csspart show-icon-base - The base of the show icon.
- * @csspart hide-button - The hide button of the password input.
- * @csspart hide-button-base - The base of the hide button.
- * @csspart hide-button-content - The content of the hide button.
  * @csspart hide-icon - The hide icon of the password input.
  * @csspart hide-icon-base - The base of the hide icon.
+ * @csspart base - The main input container.
+ * @csspart input - The input element.
+ * @csspart label - The label of the input.
+ * @csspart description - The description of the input.
+ * @csspart feedback - The feedback of the input.
+ * @csspart tooltip - The tooltip of the input.
+ * @csspart addon-before - The addon before the input.
+ * @csspart addon-after - The addon after the input.
+ * @csspart prefix - The prefix of the input.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSPasswordInput extends InputBaseElement {
     static tagName: string;