@eui/eds 22.0.0-alpha.25 → 22.0.0-alpha.27
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.
- package/docs/changelog.html +25 -0
- package/docs/components/EdsLabel.html +51 -94
- package/docs/components/EdsOverlay.html +31 -1
- package/docs/directives/EdsColorDirective.html +0 -3
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/EdsLabel.md +12 -3
- package/docs/json/EdsOverlay.md +1 -0
- package/docs/json/documentation.json +150 -111
- package/docs/llms.txt +7 -5
- package/docs/miscellaneous/typealiases.html +30 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-chip.mjs +2 -2
- package/fesm2022/eui-eds-eds-chip.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-icon.mjs +2 -2
- package/fesm2022/eui-eds-eds-icon.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-label.mjs +26 -32
- package/fesm2022/eui-eds-eds-label.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-language-selector.mjs +2 -2
- package/fesm2022/eui-eds-eds-language-selector.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-overlay.mjs +5 -3
- package/fesm2022/eui-eds-eds-overlay.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tree.mjs +1 -1
- package/fesm2022/eui-eds-eds-tree.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eui-eds-eds-chip.d.ts +1 -1
- package/types/eui-eds-eds-label.d.ts +24 -8
- package/types/eui-eds-eds-label.d.ts.map +1 -1
- package/types/eui-eds-eds-overlay.d.ts +3 -1
- package/types/eui-eds-eds-overlay.d.ts.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-language-selector.mjs","sources":["../../eds-language-selector/eds-language-selector-dialog.ts","../../eds-language-selector/eds-language-selector.ts","../../eds-language-selector/eds-language-selector.html","../../eds-language-selector/index.ts","../../eds-language-selector/eui-eds-eds-language-selector.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n 'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n 'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n 'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n /** All available languages. */\n languages: EdsLanguage[];\n /** Currently selected language code. */\n selectedLanguage: string;\n /** Callback when a language is selected. */\n onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'eds-language-selector-dialog',\n template: `\n <div class=\"eds-language-dialog\">\n @if (nonEuLanguages().length > 0) {\n <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n }\n <div class=\"eds-language-dialog__grid\">\n @for (lang of euLanguages(); track lang.code) {\n <div class=\"eds-language-dialog__item\">\n <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n <button\n edsButton\n [color]=\"lang.code === config?.selectedLanguage ? 'primary' : 'neutral'\"\n (click)=\"selectLanguage(lang)\">\n <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n </button>\n </div>\n }\n </div>\n\n @if (nonEuLanguages().length > 0) {\n <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n <div class=\"eds-language-dialog__grid\">\n @for (lang of nonEuLanguages(); track lang.code) {\n <div class=\"eds-language-dialog__item\">\n <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n <button\n edsButton\n [color]=\"lang.code === config?.selectedLanguage ? 'primary' : 'neutral'\"\n (click)=\"selectLanguage(lang)\">\n <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n `,\n styles: [`\n .eds-language-dialog {\n padding: var(--eds-sp-m);\n }\n .eds-language-dialog__section-title {\n font: var(--eds-f-label-m-semibold);\n margin-bottom: var(--eds-sp-s);\n }\n .eds-language-dialog__section-title--additional {\n margin-top: var(--eds-sp-l);\n }\n .eds-language-dialog__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--eds-sp-s);\n }\n .eds-language-dialog__item {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-xs);\n }\n .eds-language-dialog__code {\n font-weight: 600;\n min-width: 2rem;\n }\n `],\n imports: [UpperCasePipe, ...EDS_BUTTON],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n /** EU languages filtered from the provided list. */\n euLanguages = computed(() =>\n (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n );\n\n /** Non-EU (additional) languages filtered from the provided list. */\n nonEuLanguages = computed(() =>\n (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n );\n\n private dialogService = inject(EdsDialogService);\n\n selectLanguage(lang: EdsLanguage): void {\n this.config?.onLanguageChange(lang.code);\n this.dialogService.closeDialog();\n }\n}\n","import { Component, input, output, signal, computed, ElementRef, inject, HostListener, Injector, booleanAttribute, afterNextRender } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EdsColorDirective } from '@eui/eds/shared';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguageSelectorDialog, EdsLanguageSelectorDialogConfig } from './eds-language-selector-dialog';\n\nexport interface EdsLanguage {\n /** Language code (e.g. 'en', 'fr', 'de'). */\n code: string;\n\n /** Display label (e.g. 'English', 'Français'). */\n label: string;\n}\n\n/** Threshold: when languages exceed this count, a dialog is shown instead of a dropdown. */\nconst DIALOG_THRESHOLD = 3;\n\n/** Minimum space (px) needed on the right for the dropdown to align left-to-right. */\nconst DROPDOWN_MIN_WIDTH = 160;\n\n@Component({\n selector: 'eds-language-selector',\n imports: [UpperCasePipe, ...EDS_ICON],\n templateUrl: './eds-language-selector.html',\n styleUrl: './eds-language-selector.scss',\n host: {\n '[class]': 'hostClasses()',\n },\n hostDirectives: [\n {\n directive: EdsColorDirective,\n inputs: [\n 'edsBrand',\n 'edsNeutral',\n 'edsColorVariant',\n ],\n },\n ],\n})\nexport class EdsLanguageSelector {\n private colorDirective = inject(EdsColorDirective);\n\n hostClasses = computed(() => {\n const color = this.colorDirective.getCssClass('eds-language-selector');\n return `eds-language-selector ${color}`.trim();\n });\n /** Available languages. */\n languages = input<EdsLanguage[]>([]);\n\n /** Currently selected language code. */\n selectedLanguage = input<string>('en');\n\n /** Aria label for accessibility. */\n ariaLabel = input<string>('');\n\n /** Whether the dropdown aligns to the right edge (opens towards left). Can be set explicitly or computed from viewport. */\n isRightAligned = input(false, { transform: booleanAttribute });\n\n /** When true, the trigger displays a globe icon with the language code in a borderless button layout. */\n hasIconLayout = input(false, { transform: booleanAttribute });\n\n /** Emits the selected language code when user picks a language. */\n languageChange = output<string>();\n\n isOpen = signal(false);\n\n /** Index of the currently focused item in the dropdown. */\n focusedIndex = signal(-1);\n\n /** Internal override for viewport-based alignment (only used when isRightAligned is not explicitly set). */\n protected dropdownAlignRight = signal(false);\n\n /** Resolved alignment: explicit input takes priority, then viewport-based. */\n protected resolvedAlignRight = computed(() => this.isRightAligned() || this.dropdownAlignRight());\n\n /** The id of the currently active descendant for aria-activedescendant. */\n protected activeDescendantId = computed(() => {\n const idx = this.focusedIndex();\n const langs = this.languages();\n if (idx >= 0 && idx < langs.length) {\n return 'eds-lang-option-' + langs[idx].code;\n }\n return null;\n });\n\n currentLanguage = computed(() => {\n const langs = this.languages();\n const selected = this.selectedLanguage();\n return langs.find(l => l.code === selected) ?? langs[0] ?? { code: 'en', label: 'EN' };\n });\n\n computedAriaLabel = computed(() => {\n if (this.ariaLabel()) return this.ariaLabel();\n return `Change Language - Current: ${this.currentLanguage().label}`;\n });\n\n /** Whether the language list should open in a dialog (more than 3 languages). */\n useDialog = computed(() => this.languages().length > DIALOG_THRESHOLD);\n\n private el = inject(ElementRef);\n private document = inject(DOCUMENT);\n private dialogService = inject(EdsDialogService);\n private injector = inject(Injector);\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {\n this.closeDropdown();\n }\n }\n\n toggle(): void {\n if (this.useDialog()) {\n this.openLanguageDialog();\n } else {\n if (!this.isOpen()) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n selectLanguage(lang: EdsLanguage): void {\n this.closeDropdown();\n this.languageChange.emit(lang.code);\n }\n\n /** Keyboard handler on the toggle button. */\n onToggleKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n if (!this.isOpen() && !this.useDialog()) {\n this.openDropdown();\n }\n }\n }\n\n /** Keyboard handler on the dropdown list. */\n onDropdownKeydown(event: KeyboardEvent): void {\n const langs = this.languages();\n const idx = this.focusedIndex();\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.focusedIndex.set(idx < langs.length - 1 ? idx + 1 : 0);\n this.scrollFocusedIntoView();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusedIndex.set(idx > 0 ? idx - 1 : langs.length - 1);\n this.scrollFocusedIntoView();\n break;\n\n case 'Home':\n event.preventDefault();\n this.focusedIndex.set(0);\n this.scrollFocusedIntoView();\n break;\n\n case 'End':\n event.preventDefault();\n this.focusedIndex.set(langs.length - 1);\n this.scrollFocusedIntoView();\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (idx >= 0 && idx < langs.length) {\n this.selectLanguage(langs[idx]);\n }\n break;\n\n case 'Escape':\n case 'Tab':\n this.closeDropdown();\n break;\n }\n }\n\n private openDropdown(): void {\n this.computeDropdownAlignment();\n // Set initial focus to the currently selected language, or first item\n const langs = this.languages();\n const selectedIdx = langs.findIndex(l => l.code === this.selectedLanguage());\n this.focusedIndex.set(selectedIdx >= 0 ? selectedIdx : 0);\n this.isOpen.set(true);\n // Focus the active option after render\n afterNextRender(() => {\n this.scrollFocusedIntoView();\n }, { injector: this.injector });\n }\n\n private closeDropdown(): void {\n this.isOpen.set(false);\n this.focusedIndex.set(-1);\n // Return focus to the toggle button\n const toggle = this.el.nativeElement.querySelector('.language-toggle') as HTMLElement;\n toggle?.focus();\n }\n\n private scrollFocusedIntoView(): void {\n const idx = this.focusedIndex();\n const langs = this.languages();\n if (idx >= 0 && idx < langs.length) {\n const optionEl = this.el.nativeElement.querySelector(`#eds-lang-option-${langs[idx].code}`) as HTMLElement;\n optionEl?.focus();\n }\n }\n\n private computeDropdownAlignment(): void {\n const hostRect = this.el.nativeElement.getBoundingClientRect();\n const viewportWidth = this.document.documentElement.clientWidth;\n const spaceOnRight = viewportWidth - hostRect.left;\n this.dropdownAlignRight.set(spaceOnRight < DROPDOWN_MIN_WIDTH);\n }\n\n private openLanguageDialog(): void {\n const config: EdsLanguageSelectorDialogConfig = {\n languages: this.languages(),\n selectedLanguage: this.selectedLanguage(),\n onLanguageChange: (code: string) => {\n this.languageChange.emit(code);\n },\n };\n\n this.dialogService.openDialog({\n title: 'Select Language',\n hasCloseButton: true,\n hasClosedOnEscape: true,\n hasClosedOnClickOutside: true,\n width: '480px',\n bodyComponent: { component: EdsLanguageSelectorDialog, config },\n }, this.injector);\n }\n}\n","<button\n type=\"button\"\n class=\"language-toggle\"\n [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n (keydown)=\"onToggleKeydown($event)\">\n @if (hasIconLayout()) {\n <eds-icon icon=\"globe\" size=\"s\" />\n <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n } @else {\n <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n }\n</button>\n\n@if (isOpen()) {\n <ul\n class=\"language-dropdown\"\n [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onDropdownKeydown($event)\">\n @for (lang of languages(); track lang.code; let i = $index) {\n <li\n class=\"language-option\"\n [class.selected]=\"lang.code === selectedLanguage()\"\n [class.focused]=\"i === focusedIndex()\"\n role=\"option\"\n [id]=\"'eds-lang-option-' + lang.code\"\n [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n (click)=\"selectLanguage(lang)\">\n <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n <span class=\"option-label\">{{ lang.label }}</span>\n </li>\n }\n </ul>\n}\n","import { EdsLanguageSelector } from './eds-language-selector';\nimport { EdsLanguageSelectorDialog } from './eds-language-selector-dialog';\n\nexport { EdsLanguageSelector };\nexport { EdsLanguageSelectorDialog, EdsLanguageSelectorDialogConfig } from './eds-language-selector-dialog';\nexport { EdsLanguage } from './eds-language-selector';\n\n/** Convenience array for importing eds-language-selector. */\nexport const EDS_LANGUAGE_SELECTOR = [EdsLanguageSelector, EdsLanguageSelectorDialog] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-language-selector.mjs","sources":["../../eds-language-selector/eds-language-selector-dialog.ts","../../eds-language-selector/eds-language-selector.ts","../../eds-language-selector/eds-language-selector.html","../../eds-language-selector/index.ts","../../eds-language-selector/eui-eds-eds-language-selector.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n 'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n 'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n 'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n /** All available languages. */\n languages: EdsLanguage[];\n /** Currently selected language code. */\n selectedLanguage: string;\n /** Callback when a language is selected. */\n onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'eds-language-selector-dialog',\n template: `\n <div class=\"eds-language-dialog\">\n @if (nonEuLanguages().length > 0) {\n <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n }\n <div class=\"eds-language-dialog__grid\">\n @for (lang of euLanguages(); track lang.code) {\n <div class=\"eds-language-dialog__item\">\n <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n <button\n edsButton\n [color]=\"lang.code === config?.selectedLanguage ? 'primary' : 'neutral'\"\n (click)=\"selectLanguage(lang)\">\n <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n </button>\n </div>\n }\n </div>\n\n @if (nonEuLanguages().length > 0) {\n <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n <div class=\"eds-language-dialog__grid\">\n @for (lang of nonEuLanguages(); track lang.code) {\n <div class=\"eds-language-dialog__item\">\n <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n <button\n edsButton\n [color]=\"lang.code === config?.selectedLanguage ? 'primary' : 'neutral'\"\n (click)=\"selectLanguage(lang)\">\n <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n `,\n styles: [`\n .eds-language-dialog {\n padding: var(--eds-sp-m);\n }\n .eds-language-dialog__section-title {\n font: var(--eds-f-label-m-semibold);\n margin-bottom: var(--eds-sp-s);\n }\n .eds-language-dialog__section-title--additional {\n margin-top: var(--eds-sp-l);\n }\n .eds-language-dialog__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--eds-sp-s);\n }\n .eds-language-dialog__item {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-xs);\n }\n .eds-language-dialog__code {\n font-weight: 600;\n min-width: 2rem;\n }\n `],\n imports: [UpperCasePipe, ...EDS_BUTTON],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n /** EU languages filtered from the provided list. */\n euLanguages = computed(() =>\n (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n );\n\n /** Non-EU (additional) languages filtered from the provided list. */\n nonEuLanguages = computed(() =>\n (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n );\n\n private dialogService = inject(EdsDialogService);\n\n selectLanguage(lang: EdsLanguage): void {\n this.config?.onLanguageChange(lang.code);\n this.dialogService.closeDialog();\n }\n}\n","import { Component, input, output, signal, computed, ElementRef, inject, HostListener, Injector, booleanAttribute, afterNextRender } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EdsColorDirective } from '@eui/eds/shared';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguageSelectorDialog, EdsLanguageSelectorDialogConfig } from './eds-language-selector-dialog';\n\nexport interface EdsLanguage {\n /** Language code (e.g. 'en', 'fr', 'de'). */\n code: string;\n\n /** Display label (e.g. 'English', 'Français'). */\n label: string;\n}\n\n/** Threshold: when languages exceed this count, a dialog is shown instead of a dropdown. */\nconst DIALOG_THRESHOLD = 3;\n\n/** Minimum space (px) needed on the right for the dropdown to align left-to-right. */\nconst DROPDOWN_MIN_WIDTH = 160;\n\n@Component({\n selector: 'eds-language-selector',\n imports: [UpperCasePipe, ...EDS_ICON],\n templateUrl: './eds-language-selector.html',\n styleUrl: './eds-language-selector.scss',\n host: {\n '[class]': 'hostClasses()',\n },\n hostDirectives: [\n {\n directive: EdsColorDirective,\n inputs: [\n 'edsBrand',\n 'edsNeutral',\n 'edsColorVariant',\n ],\n },\n ],\n})\nexport class EdsLanguageSelector {\n private colorDirective = inject(EdsColorDirective);\n\n hostClasses = computed(() => {\n const color = this.colorDirective.getCssClass('eds-language-selector');\n return `eds-language-selector ${color}`.trim();\n });\n /** Available languages. */\n languages = input<EdsLanguage[]>([]);\n\n /** Currently selected language code. */\n selectedLanguage = input<string>('en');\n\n /** Aria label for accessibility. */\n ariaLabel = input<string>('');\n\n /** Whether the dropdown aligns to the right edge (opens towards left). Can be set explicitly or computed from viewport. */\n isRightAligned = input(false, { transform: booleanAttribute });\n\n /** When true, the trigger displays a globe icon with the language code in a borderless button layout. */\n hasIconLayout = input(false, { transform: booleanAttribute });\n\n /** Emits the selected language code when user picks a language. */\n languageChange = output<string>();\n\n isOpen = signal(false);\n\n /** Index of the currently focused item in the dropdown. */\n focusedIndex = signal(-1);\n\n /** Internal override for viewport-based alignment (only used when isRightAligned is not explicitly set). */\n protected dropdownAlignRight = signal(false);\n\n /** Resolved alignment: explicit input takes priority, then viewport-based. */\n protected resolvedAlignRight = computed(() => this.isRightAligned() || this.dropdownAlignRight());\n\n /** The id of the currently active descendant for aria-activedescendant. */\n protected activeDescendantId = computed(() => {\n const idx = this.focusedIndex();\n const langs = this.languages();\n if (idx >= 0 && idx < langs.length) {\n return 'eds-lang-option-' + langs[idx].code;\n }\n return null;\n });\n\n currentLanguage = computed(() => {\n const langs = this.languages();\n const selected = this.selectedLanguage();\n return langs.find(l => l.code === selected) ?? langs[0] ?? { code: 'en', label: 'EN' };\n });\n\n computedAriaLabel = computed(() => {\n if (this.ariaLabel()) return this.ariaLabel();\n return `Change Language - Current: ${this.currentLanguage().label}`;\n });\n\n /** Whether the language list should open in a dialog (more than 3 languages). */\n useDialog = computed(() => this.languages().length > DIALOG_THRESHOLD);\n\n private el = inject(ElementRef);\n private document = inject(DOCUMENT);\n private dialogService = inject(EdsDialogService);\n private injector = inject(Injector);\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {\n this.closeDropdown();\n }\n }\n\n toggle(): void {\n if (this.useDialog()) {\n this.openLanguageDialog();\n } else {\n if (!this.isOpen()) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n selectLanguage(lang: EdsLanguage): void {\n this.closeDropdown();\n this.languageChange.emit(lang.code);\n }\n\n /** Keyboard handler on the toggle button. */\n onToggleKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n if (!this.isOpen() && !this.useDialog()) {\n this.openDropdown();\n }\n }\n }\n\n /** Keyboard handler on the dropdown list. */\n onDropdownKeydown(event: KeyboardEvent): void {\n const langs = this.languages();\n const idx = this.focusedIndex();\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.focusedIndex.set(idx < langs.length - 1 ? idx + 1 : 0);\n this.scrollFocusedIntoView();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusedIndex.set(idx > 0 ? idx - 1 : langs.length - 1);\n this.scrollFocusedIntoView();\n break;\n\n case 'Home':\n event.preventDefault();\n this.focusedIndex.set(0);\n this.scrollFocusedIntoView();\n break;\n\n case 'End':\n event.preventDefault();\n this.focusedIndex.set(langs.length - 1);\n this.scrollFocusedIntoView();\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (idx >= 0 && idx < langs.length) {\n this.selectLanguage(langs[idx]);\n }\n break;\n\n case 'Escape':\n case 'Tab':\n this.closeDropdown();\n break;\n }\n }\n\n private openDropdown(): void {\n this.computeDropdownAlignment();\n // Set initial focus to the currently selected language, or first item\n const langs = this.languages();\n const selectedIdx = langs.findIndex(l => l.code === this.selectedLanguage());\n this.focusedIndex.set(selectedIdx >= 0 ? selectedIdx : 0);\n this.isOpen.set(true);\n // Focus the active option after render\n afterNextRender(() => {\n this.scrollFocusedIntoView();\n }, { injector: this.injector });\n }\n\n private closeDropdown(): void {\n this.isOpen.set(false);\n this.focusedIndex.set(-1);\n // Return focus to the toggle button\n const toggle = this.el.nativeElement.querySelector('.language-toggle') as HTMLElement;\n toggle?.focus();\n }\n\n private scrollFocusedIntoView(): void {\n const idx = this.focusedIndex();\n const langs = this.languages();\n if (idx >= 0 && idx < langs.length) {\n const optionEl = this.el.nativeElement.querySelector(`#eds-lang-option-${langs[idx].code}`) as HTMLElement;\n optionEl?.focus();\n }\n }\n\n private computeDropdownAlignment(): void {\n const hostRect = this.el.nativeElement.getBoundingClientRect();\n const viewportWidth = this.document.documentElement.clientWidth;\n const spaceOnRight = viewportWidth - hostRect.left;\n this.dropdownAlignRight.set(spaceOnRight < DROPDOWN_MIN_WIDTH);\n }\n\n private openLanguageDialog(): void {\n const config: EdsLanguageSelectorDialogConfig = {\n languages: this.languages(),\n selectedLanguage: this.selectedLanguage(),\n onLanguageChange: (code: string) => {\n this.languageChange.emit(code);\n },\n };\n\n this.dialogService.openDialog({\n title: 'Select Language',\n hasCloseButton: true,\n hasClosedOnEscape: true,\n hasClosedOnClickOutside: true,\n width: '480px',\n bodyComponent: { component: EdsLanguageSelectorDialog, config },\n }, this.injector);\n }\n}\n","<button\n type=\"button\"\n class=\"language-toggle\"\n [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n (keydown)=\"onToggleKeydown($event)\">\n @if (hasIconLayout()) {\n <eds-icon icon=\"globe\" size=\"s\" />\n <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n } @else {\n <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n }\n</button>\n\n@if (isOpen()) {\n <ul\n class=\"language-dropdown\"\n [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onDropdownKeydown($event)\">\n @for (lang of languages(); track lang.code; let i = $index) {\n <li\n class=\"language-option\"\n [class.selected]=\"lang.code === selectedLanguage()\"\n [class.focused]=\"i === focusedIndex()\"\n role=\"option\"\n [id]=\"'eds-lang-option-' + lang.code\"\n [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n (click)=\"selectLanguage(lang)\">\n <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n <span class=\"option-label\">{{ lang.label }}</span>\n </li>\n }\n </ul>\n}\n","import { EdsLanguageSelector } from './eds-language-selector';\nimport { EdsLanguageSelectorDialog } from './eds-language-selector-dialog';\n\nexport { EdsLanguageSelector };\nexport { EdsLanguageSelectorDialog, EdsLanguageSelectorDialogConfig } from './eds-language-selector-dialog';\nexport { EdsLanguage } from './eds-language-selector';\n\n/** Convenience array for importing eds-language-selector. */\nexport const EDS_LANGUAGE_SELECTOR = [EdsLanguageSelector, EdsLanguageSelectorDialog] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
|
|
@@ -20,6 +20,8 @@ class EdsOverlay {
|
|
|
20
20
|
...(ngDevMode ? [{ debugName: "fixedWidth" }] : /* istanbul ignore next */ []));
|
|
21
21
|
/** Enables automatic closing when clicking outside the overlay. */
|
|
22
22
|
this.hasClosedOnClickOutside = input(false, { ...(ngDevMode ? { debugName: "hasClosedOnClickOutside" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
23
|
+
/** Shows a dimmed backdrop behind the overlay panel. Off by default. */
|
|
24
|
+
this.hasBackdrop = input(false, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
23
25
|
/** Applies highlighted visual styling. */
|
|
24
26
|
this.isHighlighted = input(false, { ...(ngDevMode ? { debugName: "isHighlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
25
27
|
/** Emitted when the overlay's active state changes (typically false for close requests). */
|
|
@@ -46,7 +48,7 @@ class EdsOverlay {
|
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsOverlay, isStandalone: true, selector: "eds-overlay", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null }, hasClosedOnClickOutside: { classPropertyName: "hasClosedOnClickOutside", publicName: "hasClosedOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, isHighlighted: { classPropertyName: "isHighlighted", publicName: "isHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeState: "activeState" }, host: { attributes: { "role": "dialog" }, listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class": "hostClasses()", "attr.aria-hidden": "!isActive()", "attr.inert": "!isActive() ? true : null" } }, ngImport: i0, template: "@if (isActive()) {\n <div
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsOverlay, isStandalone: true, selector: "eds-overlay", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null }, hasClosedOnClickOutside: { classPropertyName: "hasClosedOnClickOutside", publicName: "hasClosedOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, isHighlighted: { classPropertyName: "isHighlighted", publicName: "isHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeState: "activeState" }, host: { attributes: { "role": "dialog" }, listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class": "hostClasses()", "attr.aria-hidden": "!isActive()", "attr.inert": "!isActive() ? true : null" } }, ngImport: i0, template: "@if (isActive() && (hasBackdrop() || hasClosedOnClickOutside())) {\n <div\n class=\"eds-overlay-backdrop\"\n [class.eds-overlay-backdrop--visible]=\"hasBackdrop()\"\n (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n class=\"eds-overlay-panel\"\n [style.width]=\"fixedWidth() || null\"\n [cdkTrapFocus]=\"isActive()\"\n [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content select=\"eds-overlay-header\"></ng-content>\n <ng-content select=\"eds-overlay-content\"></ng-content>\n <ng-content select=\"eds-overlay-footer\"></ng-content>\n <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;display:flex}.eui-21 :host.eds-overlay--active{pointer-events:auto}.eui-21 :host.eds-overlay--right{justify-content:flex-end}.eui-21 :host.eds-overlay--left{justify-content:flex-start}.eui-21 :host.eds-overlay--top{align-items:flex-start}.eui-21 :host.eds-overlay--top .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(-100%)}.eui-21 :host.eds-overlay--top.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host.eds-overlay--bottom{align-items:flex-end}.eui-21 :host.eds-overlay--bottom .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(100%)}.eui-21 :host.eds-overlay--bottom.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host:not(.eds-overlay--active){visibility:hidden}.eui-21 :host:not(.eds-overlay--active) .eds-overlay-panel{transform:translate(100%)}.eui-21 :host:not(.eds-overlay--active).eds-overlay--left .eds-overlay-panel{transform:translate(-100%)}.eui-21 :host.eds-overlay--highlighted .eds-overlay-panel{border-left:3px solid var(--eds-c-border-primary)}.eui-21 :host .eds-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}.eui-21 :host .eds-overlay-backdrop.eds-overlay-backdrop--visible{background:var(--eds-c-alpha-backdrop)}.eui-21 :host .eds-overlay-panel{position:relative;display:flex;flex-direction:column;height:100%;background:var(--eds-c-surface-elevation-overlay);box-shadow:var(--eds-sh-4);overflow:hidden;transition:transform .3s cubic-bezier(.25,.8,.25,1);width:400px;max-width:100vw}.eui-21 :host.eds-overlay--width-small .eds-overlay-panel{width:320px}.eui-21 :host.eds-overlay--width-medium .eds-overlay-panel{width:480px}.eui-21 :host.eds-overlay--width-large .eds-overlay-panel{width:640px}.eui-21 :host.eds-overlay--width-xlarge .eds-overlay-panel{width:800px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
50
52
|
}
|
|
51
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsOverlay, decorators: [{
|
|
52
54
|
type: Component,
|
|
@@ -55,8 +57,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
55
57
|
role: 'dialog',
|
|
56
58
|
'[attr.aria-hidden]': '!isActive()',
|
|
57
59
|
'[attr.inert]': '!isActive() ? true : null',
|
|
58
|
-
}, template: "@if (isActive()) {\n <div
|
|
59
|
-
}], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fixedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWidth", required: false }] }], hasClosedOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClosedOnClickOutside", required: false }] }], isHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHighlighted", required: false }] }], activeState: [{ type: i0.Output, args: ["activeState"] }], onEscape: [{
|
|
60
|
+
}, template: "@if (isActive() && (hasBackdrop() || hasClosedOnClickOutside())) {\n <div\n class=\"eds-overlay-backdrop\"\n [class.eds-overlay-backdrop--visible]=\"hasBackdrop()\"\n (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n class=\"eds-overlay-panel\"\n [style.width]=\"fixedWidth() || null\"\n [cdkTrapFocus]=\"isActive()\"\n [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content select=\"eds-overlay-header\"></ng-content>\n <ng-content select=\"eds-overlay-content\"></ng-content>\n <ng-content select=\"eds-overlay-footer\"></ng-content>\n <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;display:flex}.eui-21 :host.eds-overlay--active{pointer-events:auto}.eui-21 :host.eds-overlay--right{justify-content:flex-end}.eui-21 :host.eds-overlay--left{justify-content:flex-start}.eui-21 :host.eds-overlay--top{align-items:flex-start}.eui-21 :host.eds-overlay--top .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(-100%)}.eui-21 :host.eds-overlay--top.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host.eds-overlay--bottom{align-items:flex-end}.eui-21 :host.eds-overlay--bottom .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(100%)}.eui-21 :host.eds-overlay--bottom.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host:not(.eds-overlay--active){visibility:hidden}.eui-21 :host:not(.eds-overlay--active) .eds-overlay-panel{transform:translate(100%)}.eui-21 :host:not(.eds-overlay--active).eds-overlay--left .eds-overlay-panel{transform:translate(-100%)}.eui-21 :host.eds-overlay--highlighted .eds-overlay-panel{border-left:3px solid var(--eds-c-border-primary)}.eui-21 :host .eds-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}.eui-21 :host .eds-overlay-backdrop.eds-overlay-backdrop--visible{background:var(--eds-c-alpha-backdrop)}.eui-21 :host .eds-overlay-panel{position:relative;display:flex;flex-direction:column;height:100%;background:var(--eds-c-surface-elevation-overlay);box-shadow:var(--eds-sh-4);overflow:hidden;transition:transform .3s cubic-bezier(.25,.8,.25,1);width:400px;max-width:100vw}.eui-21 :host.eds-overlay--width-small .eds-overlay-panel{width:320px}.eui-21 :host.eds-overlay--width-medium .eds-overlay-panel{width:480px}.eui-21 :host.eds-overlay--width-large .eds-overlay-panel{width:640px}.eui-21 :host.eds-overlay--width-xlarge .eds-overlay-panel{width:800px}\n"] }]
|
|
61
|
+
}], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fixedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWidth", required: false }] }], hasClosedOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClosedOnClickOutside", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], isHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHighlighted", required: false }] }], activeState: [{ type: i0.Output, args: ["activeState"] }], onEscape: [{
|
|
60
62
|
type: HostListener,
|
|
61
63
|
args: ['document:keydown.escape']
|
|
62
64
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-overlay.mjs","sources":["../../eds-overlay/eds-overlay.ts","../../eds-overlay/eds-overlay.html","../../eds-overlay/eds-overlay-header.ts","../../eds-overlay/eds-overlay-header.html","../../eds-overlay/eds-overlay-header-label.ts","../../eds-overlay/eds-overlay-header-sublabel.ts","../../eds-overlay/eds-overlay-header-action-items.ts","../../eds-overlay/eds-overlay-content.ts","../../eds-overlay/eds-overlay-footer.ts","../../eds-overlay/index.ts","../../eds-overlay/eui-eds-eds-overlay.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n selector: 'eds-overlay',\n templateUrl: './eds-overlay.html',\n styleUrl: './eds-overlay.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [A11yModule],\n host: {\n '[class]': 'hostClasses()',\n role: 'dialog',\n '[attr.aria-hidden]': '!isActive()',\n '[attr.inert]': '!isActive() ? true : null',\n },\n})\nexport class EdsOverlay {\n /** Controls the visibility and active state of the overlay. */\n isActive = input(false, { transform: booleanAttribute });\n\n /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n position = input<EdsOverlayPosition>('right');\n\n /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n width = input<string>('');\n\n /** Fixed width value (overrides responsive width). */\n fixedWidth = input<string>('');\n\n /** Enables automatic closing when clicking outside the overlay. */\n hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n /** Applies highlighted visual styling. */\n isHighlighted = input(false, { transform: booleanAttribute });\n\n /** Emitted when the overlay's active state changes (typically false for close requests). */\n activeState = output<boolean>();\n\n hostClasses = computed(() => {\n return [\n 'eds-overlay',\n `eds-overlay--${this.position()}`,\n this.isActive() ? 'eds-overlay--active' : '',\n this.width() ? `eds-overlay--width-${this.width()}` : '',\n this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n ].join(' ').trim();\n });\n\n @HostListener('document:keydown.escape')\n onEscape(): void {\n if (this.isActive()) {\n this.activeState.emit(false);\n }\n }\n\n onBackdropClick(): void {\n if (this.hasClosedOnClickOutside()) {\n this.activeState.emit(false);\n }\n }\n}\n","@if (isActive()) {\n <div class=\"eds-overlay-backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n class=\"eds-overlay-panel\"\n [style.width]=\"fixedWidth() || null\"\n [cdkTrapFocus]=\"isActive()\"\n [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content select=\"eds-overlay-header\"></ng-content>\n <ng-content select=\"eds-overlay-content\"></ng-content>\n <ng-content select=\"eds-overlay-footer\"></ng-content>\n <ng-content></ng-content>\n</div>\n","import { Component, output } from '@angular/core';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n@Component({\n selector: 'eds-overlay-header',\n templateUrl: './eds-overlay-header.html',\n styleUrl: './eds-overlay-header.scss',\n imports: [...EDS_ICON_BUTTON],\n})\nexport class EdsOverlayHeader {\n /** Emitted when the built-in close button is clicked. */\n closeClick = output<void>();\n\n onClose(): void {\n this.closeClick.emit();\n }\n}\n","<div class=\"header-labels\">\n <ng-content select=\"eds-overlay-header-label\"></ng-content>\n <ng-content select=\"eds-overlay-header-sublabel\"></ng-content>\n</div>\n<ng-content select=\"eds-overlay-header-action-items\"></ng-content>\n<button edsIconButton icon=\"x:core\" ariaLabel=\"Close overlay\" (click)=\"onClose()\"></button>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-label',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-label.scss',\n})\nexport class EdsOverlayHeaderLabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-sublabel',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-sublabel.scss',\n})\nexport class EdsOverlayHeaderSublabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-action-items',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-action-items.scss',\n})\nexport class EdsOverlayHeaderActionItems {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-content',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-content.scss',\n})\nexport class EdsOverlayContent {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-footer',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-footer.scss',\n})\nexport class EdsOverlayFooter {}\n","import { EdsOverlay, EdsOverlayPosition } from './eds-overlay';\nimport { EdsOverlayHeader } from './eds-overlay-header';\nimport { EdsOverlayHeaderLabel } from './eds-overlay-header-label';\nimport { EdsOverlayHeaderSublabel } from './eds-overlay-header-sublabel';\nimport { EdsOverlayHeaderActionItems } from './eds-overlay-header-action-items';\nimport { EdsOverlayContent } from './eds-overlay-content';\nimport { EdsOverlayFooter } from './eds-overlay-footer';\n\nexport {\n EdsOverlay,\n EdsOverlayPosition,\n EdsOverlayHeader,\n EdsOverlayHeaderLabel,\n EdsOverlayHeaderSublabel,\n EdsOverlayHeaderActionItems,\n EdsOverlayContent,\n EdsOverlayFooter,\n};\n\n/** Convenience array for importing all eds-overlay components. */\nexport const EDS_OVERLAY = [\n EdsOverlay,\n EdsOverlayHeader,\n EdsOverlayHeaderLabel,\n EdsOverlayHeaderSublabel,\n EdsOverlayHeaderActionItems,\n EdsOverlayContent,\n EdsOverlayFooter,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-overlay.mjs","sources":["../../eds-overlay/eds-overlay.ts","../../eds-overlay/eds-overlay.html","../../eds-overlay/eds-overlay-header.ts","../../eds-overlay/eds-overlay-header.html","../../eds-overlay/eds-overlay-header-label.ts","../../eds-overlay/eds-overlay-header-sublabel.ts","../../eds-overlay/eds-overlay-header-action-items.ts","../../eds-overlay/eds-overlay-content.ts","../../eds-overlay/eds-overlay-footer.ts","../../eds-overlay/index.ts","../../eds-overlay/eui-eds-eds-overlay.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n selector: 'eds-overlay',\n templateUrl: './eds-overlay.html',\n styleUrl: './eds-overlay.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [A11yModule],\n host: {\n '[class]': 'hostClasses()',\n role: 'dialog',\n '[attr.aria-hidden]': '!isActive()',\n '[attr.inert]': '!isActive() ? true : null',\n },\n})\nexport class EdsOverlay {\n /** Controls the visibility and active state of the overlay. */\n isActive = input(false, { transform: booleanAttribute });\n\n /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n position = input<EdsOverlayPosition>('right');\n\n /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n width = input<string>('');\n\n /** Fixed width value (overrides responsive width). */\n fixedWidth = input<string>('');\n\n /** Enables automatic closing when clicking outside the overlay. */\n hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n /** Shows a dimmed backdrop behind the overlay panel. Off by default. */\n hasBackdrop = input(false, { transform: booleanAttribute });\n\n /** Applies highlighted visual styling. */\n isHighlighted = input(false, { transform: booleanAttribute });\n\n /** Emitted when the overlay's active state changes (typically false for close requests). */\n activeState = output<boolean>();\n\n hostClasses = computed(() => {\n return [\n 'eds-overlay',\n `eds-overlay--${this.position()}`,\n this.isActive() ? 'eds-overlay--active' : '',\n this.width() ? `eds-overlay--width-${this.width()}` : '',\n this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n ].join(' ').trim();\n });\n\n @HostListener('document:keydown.escape')\n onEscape(): void {\n if (this.isActive()) {\n this.activeState.emit(false);\n }\n }\n\n onBackdropClick(): void {\n if (this.hasClosedOnClickOutside()) {\n this.activeState.emit(false);\n }\n }\n}\n","@if (isActive() && (hasBackdrop() || hasClosedOnClickOutside())) {\n <div\n class=\"eds-overlay-backdrop\"\n [class.eds-overlay-backdrop--visible]=\"hasBackdrop()\"\n (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n class=\"eds-overlay-panel\"\n [style.width]=\"fixedWidth() || null\"\n [cdkTrapFocus]=\"isActive()\"\n [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content select=\"eds-overlay-header\"></ng-content>\n <ng-content select=\"eds-overlay-content\"></ng-content>\n <ng-content select=\"eds-overlay-footer\"></ng-content>\n <ng-content></ng-content>\n</div>\n","import { Component, output } from '@angular/core';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n@Component({\n selector: 'eds-overlay-header',\n templateUrl: './eds-overlay-header.html',\n styleUrl: './eds-overlay-header.scss',\n imports: [...EDS_ICON_BUTTON],\n})\nexport class EdsOverlayHeader {\n /** Emitted when the built-in close button is clicked. */\n closeClick = output<void>();\n\n onClose(): void {\n this.closeClick.emit();\n }\n}\n","<div class=\"header-labels\">\n <ng-content select=\"eds-overlay-header-label\"></ng-content>\n <ng-content select=\"eds-overlay-header-sublabel\"></ng-content>\n</div>\n<ng-content select=\"eds-overlay-header-action-items\"></ng-content>\n<button edsIconButton icon=\"x:core\" ariaLabel=\"Close overlay\" (click)=\"onClose()\"></button>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-label',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-label.scss',\n})\nexport class EdsOverlayHeaderLabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-sublabel',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-sublabel.scss',\n})\nexport class EdsOverlayHeaderSublabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-header-action-items',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-header-action-items.scss',\n})\nexport class EdsOverlayHeaderActionItems {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-content',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-content.scss',\n})\nexport class EdsOverlayContent {}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'eds-overlay-footer',\n template: '<ng-content></ng-content>',\n styleUrl: './eds-overlay-footer.scss',\n})\nexport class EdsOverlayFooter {}\n","import { EdsOverlay, EdsOverlayPosition } from './eds-overlay';\nimport { EdsOverlayHeader } from './eds-overlay-header';\nimport { EdsOverlayHeaderLabel } from './eds-overlay-header-label';\nimport { EdsOverlayHeaderSublabel } from './eds-overlay-header-sublabel';\nimport { EdsOverlayHeaderActionItems } from './eds-overlay-header-action-items';\nimport { EdsOverlayContent } from './eds-overlay-content';\nimport { EdsOverlayFooter } from './eds-overlay-footer';\n\nexport {\n EdsOverlay,\n EdsOverlayPosition,\n EdsOverlayHeader,\n EdsOverlayHeaderLabel,\n EdsOverlayHeaderSublabel,\n EdsOverlayHeaderActionItems,\n EdsOverlayContent,\n EdsOverlayFooter,\n};\n\n/** Convenience array for importing all eds-overlay components. */\nexport const EDS_OVERLAY = [\n EdsOverlay,\n EdsOverlayHeader,\n EdsOverlayHeaderLabel,\n EdsOverlayHeaderSublabel,\n EdsOverlayHeaderActionItems,\n EdsOverlayContent,\n EdsOverlayFooter,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
|
|
@@ -948,7 +948,7 @@ class EdsTree {
|
|
|
948
948
|
return scrolled.getElementRef().nativeElement === this.cdkScrollableRef()?.getElementRef().nativeElement;
|
|
949
949
|
}
|
|
950
950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n @if (renderTree) {\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n class=\"eds-cdk-tree\">\n <!-- Leaf node (no children) -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n <div class=\"eds-tree-node-wrapper__container\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n }\n </cdk-nested-tree-node>\n <!-- Expandable node (has children) -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\">\n <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n edsIconButton\n size=\"s\"\n rounded\n [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n class=\"eds-tree-node__button\">\n </button>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n }\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n @if (node) {\n <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n @if (node && node.selectable) {\n <input\n edsInputCheckbox\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\" />\n }\n\n @if (node?.treeContentBlock?.iconSvgName) {\n <eds-icon\n [icon]=\"node?.treeContentBlock?.iconSvgName\"\n size=\"s\"\n class=\"eds-u-mr-xs\">\n </eds-icon>\n }\n\n @if (node?.treeContentBlock?.chips) {\n @for (chip of node.treeContentBlock.chips; track chip) {\n <eds-chip\n size=\"m\"\n [color]=\"$any(chip.typeClass || 'neutral')\"\n class=\"eds-u-mr-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n }\n\n @if (node?.treeContentBlock?.typeLabel) {\n <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eds-badge>\n }\n </div>\n\n <div class=\"eds-tree-node-wrapper__container-middle\">\n @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n <label\n edsLabel\n for=\"{{ id }}\"\n class=\"eds-u-text-truncate\"\n [class.eds-label--selected]=\"\n highlightPath()\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eds-u-cursor-pointer]=\"node?.selectable\">\n {{ node?.treeContentBlock?.label }}\n </label>\n }\n @if (node?.treeContentBlock?.url) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link\"\n [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n @if (node?.treeContentBlock?.urlExternal) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link-external\"\n [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n </div>\n\n @if (node?.treeContentBlock?.rightContent) {\n <div class=\"eds-tree-node-wrapper__container-right\">\n @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n <eds-badge variant=\"outline\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n {{ badge.label }}\n </eds-badge>\n }\n\n @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n <eds-chip\n size=\"m\"\n [color]=\"$any(chip.typeClass || 'neutral')\"\n class=\"eds-u-ml-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n\n @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n <eds-dropdown class=\"eds-u-ml-xs\">\n <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n <eds-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eds-dropdown-content>\n </eds-dropdown>\n }\n </div>\n }\n\n @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\" />\n }\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n edsIconButton\n size=\"s\"\n rounded\n [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n ariaLabel=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n </button>\n @if (metaDataContainer.expanded) {\n <div class=\"eds-tree-node__metacontent\">\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n }\n </ng-template>\n }\n</ng-template>\n", styles: [".eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n @if (renderTree) {\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n class=\"eds-cdk-tree\">\n <!-- Leaf node (no children) -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n <div class=\"eds-tree-node-wrapper__container\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n }\n </cdk-nested-tree-node>\n <!-- Expandable node (has children) -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\">\n <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n edsIconButton\n size=\"s\"\n rounded\n [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n class=\"eds-tree-node__button\">\n </button>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n }\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n @if (node) {\n <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n @if (node && node.selectable) {\n <input\n edsInputCheckbox\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\" />\n }\n\n @if (node?.treeContentBlock?.iconSvgName) {\n <eds-icon\n [icon]=\"node?.treeContentBlock?.iconSvgName\"\n size=\"s\"\n class=\"eds-u-mr-xs\">\n </eds-icon>\n }\n\n @if (node?.treeContentBlock?.chips) {\n @for (chip of node.treeContentBlock.chips; track chip) {\n <eds-chip\n size=\"m\"\n [color]=\"$any(chip.typeClass || 'neutral')\"\n class=\"eds-u-mr-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n }\n\n @if (node?.treeContentBlock?.typeLabel) {\n <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eds-badge>\n }\n </div>\n\n <div class=\"eds-tree-node-wrapper__container-middle\">\n @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n <label\n edsLabel\n for=\"{{ id }}\"\n class=\"eds-u-text-truncate\"\n [class.eds-label--selected]=\"\n highlightPath()\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eds-u-cursor-pointer]=\"node?.selectable\">\n {{ node?.treeContentBlock?.label }}\n </label>\n }\n @if (node?.treeContentBlock?.url) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link\"\n [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n @if (node?.treeContentBlock?.urlExternal) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link-external\"\n [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n </div>\n\n @if (node?.treeContentBlock?.rightContent) {\n <div class=\"eds-tree-node-wrapper__container-right\">\n @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n <eds-badge variant=\"outline\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n {{ badge.label }}\n </eds-badge>\n }\n\n @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n <eds-chip\n size=\"m\"\n [color]=\"$any(chip.typeClass || 'neutral')\"\n class=\"eds-u-ml-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n\n @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n <eds-dropdown class=\"eds-u-ml-xs\">\n <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n <eds-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eds-dropdown-content>\n </eds-dropdown>\n }\n </div>\n }\n\n @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\" />\n }\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n edsIconButton\n size=\"s\"\n rounded\n [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n ariaLabel=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n </button>\n @if (metaDataContainer.expanded) {\n <div class=\"eds-tree-node__metacontent\">\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n }\n </ng-template>\n }\n</ng-template>\n", styles: [".eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["color", "edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
952
952
|
}
|
|
953
953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, decorators: [{
|
|
954
954
|
type: Component,
|