@siemens/element-ng 49.14.0 → 51.0.0-rc.5
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/README.md +1 -1
- package/fesm2022/siemens-element-ng-about.mjs +41 -25
- package/fesm2022/siemens-element-ng-about.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-accordion.mjs +58 -40
- package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-action-modal.mjs +83 -53
- package/fesm2022/siemens-element-ng-action-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-ag-grid.mjs +15 -12
- package/fesm2022/siemens-element-ng-ag-grid.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-application-header.mjs +176 -166
- package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs +34 -28
- package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-autocomplete.mjs +27 -22
- package/fesm2022/siemens-element-ng-autocomplete.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs +31 -21
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-badge.mjs +9 -8
- package/fesm2022/siemens-element-ng-badge.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +17 -14
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb.mjs +21 -17
- package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-card.mjs +71 -46
- package/fesm2022/siemens-element-ng-card.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-carousel.mjs +57 -33
- package/fesm2022/siemens-element-ng-carousel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-chat-messages.mjs +181 -117
- package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs +39 -25
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-color-picker.mjs +26 -17
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +56 -35
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-common.mjs +12 -12
- package/fesm2022/siemens-element-ng-connection-strength.mjs +14 -12
- package/fesm2022/siemens-element-ng-connection-strength.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-content-action-bar.mjs +36 -27
- package/fesm2022/siemens-element-ng-content-action-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-copyright-notice.mjs +19 -14
- package/fesm2022/siemens-element-ng-copyright-notice.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +335 -221
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs +8 -8
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +119 -72
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +376 -244
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs +22 -17
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-empty-state.mjs +15 -12
- package/fesm2022/siemens-element-ng-empty-state.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +105 -91
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filter-bar.mjs +32 -24
- package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +251 -153
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-footer.mjs +12 -10
- package/fesm2022/siemens-element-ng-footer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs +345 -113
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly-legacy.mjs +99 -0
- package/fesm2022/siemens-element-ng-formly-legacy.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-formly.mjs +222 -316
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +40 -30
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-help-button.mjs +5 -5
- package/fesm2022/siemens-element-ng-help-button.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +46 -47
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-info-page.mjs +17 -11
- package/fesm2022/siemens-element-ng-info-page.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-inline-notification.mjs +19 -14
- package/fesm2022/siemens-element-ng-inline-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-ip-input.mjs +25 -25
- package/fesm2022/siemens-element-ng-ip-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-landing-page.mjs +120 -74
- package/fesm2022/siemens-element-ng-landing-page.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-language-switcher.mjs +16 -12
- package/fesm2022/siemens-element-ng-language-switcher.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-link.mjs +31 -21
- package/fesm2022/siemens-element-ng-link.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs +76 -56
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs +46 -63
- package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-localization.mjs +14 -12
- package/fesm2022/siemens-element-ng-localization.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +47 -30
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-maplibre.mjs +42 -0
- package/fesm2022/siemens-element-ng-maplibre.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs +6 -5
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-menu.mjs +56 -48
- package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-modal.mjs +14 -11
- package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +249 -204
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +120 -83
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar.mjs +72 -45
- package/fesm2022/siemens-element-ng-navbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-notification-item.mjs +19 -11
- package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-number-input.mjs +40 -28
- package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-pagination.mjs +31 -20
- package/fesm2022/siemens-element-ng-pagination.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-password-strength.mjs +32 -23
- package/fesm2022/siemens-element-ng-password-strength.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-password-toggle.mjs +18 -13
- package/fesm2022/siemens-element-ng-password-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-phone-number.mjs +123 -139
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-photo-upload.mjs +84 -51
- package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-pills-input.mjs +63 -58
- package/fesm2022/siemens-element-ng-pills-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-popover-legacy.mjs +43 -28
- package/fesm2022/siemens-element-ng-popover-legacy.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-popover.mjs +35 -27
- package/fesm2022/siemens-element-ng-popover.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-progressbar.mjs +23 -16
- package/fesm2022/siemens-element-ng-progressbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-resize-observer.mjs +32 -43
- package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-result-details-list.mjs +12 -10
- package/fesm2022/siemens-element-ng-result-details-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-search-bar.mjs +38 -31
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-select.mjs +218 -163
- package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-shadow-root.mjs +3 -3
- package/fesm2022/siemens-element-ng-side-panel.mjs +128 -86
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-skip-links.mjs +21 -24
- package/fesm2022/siemens-element-ng-skip-links.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-slider.mjs +44 -29
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-split.mjs +273 -293
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs +65 -51
- package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-counter.mjs +15 -11
- package/fesm2022/siemens-element-ng-status-counter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +26 -16
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-chip.mjs +25 -16
- package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-widget.mjs +27 -17
- package/fesm2022/siemens-element-ng-summary-widget.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-system-banner.mjs +11 -8
- package/fesm2022/siemens-element-ng-system-banner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs-legacy.mjs +20 -17
- package/fesm2022/siemens-element-ng-tabs-legacy.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +73 -70
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-theme.mjs +29 -6
- package/fesm2022/siemens-element-ng-theme.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +60 -41
- package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-toast-notification.mjs +45 -40
- package/fesm2022/siemens-element-ng-toast-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tooltip.mjs +105 -82
- package/fesm2022/siemens-element-ng-tooltip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tour.mjs +24 -18
- package/fesm2022/siemens-element-ng-tour.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs +0 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +96 -75
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-typeahead.mjs +76 -70
- package/fesm2022/siemens-element-ng-typeahead.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-wizard.mjs +72 -48
- package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
- package/formly-legacy/package.json +4 -0
- package/maplibre/package.json +4 -0
- package/maplibre/styles/_index.scss +1 -0
- package/maplibre/styles/maplibre-gl.scss +715 -0
- package/package.json +37 -23
- package/schematics/migration.json +4 -4
- package/schematics/migrations/data/class-member-replacement.js +1 -19
- package/schematics/migrations/data/component-property-names.js +1 -25
- package/schematics/migrations/data/element-class-changes.js +1 -28
- package/schematics/migrations/data/element-migration-data.js +2 -0
- package/schematics/migrations/data/element-selectors.js +1 -11
- package/schematics/migrations/data/index.js +0 -4
- package/schematics/migrations/data/migration-test-data.js +9 -6
- package/schematics/migrations/data/provider-function-removals.js +7 -0
- package/schematics/migrations/data/symbol-removals.js +7 -7
- package/schematics/migrations/data/symbol-renaming.js +1 -48
- package/schematics/migrations/element-migration/element-migration.js +3 -6
- package/schematics/migrations/utilities/import-removal.js +39 -0
- package/schematics/migrations/utilities/index.js +2 -0
- package/schematics/migrations/utilities/provider-function-removal.migration.js +116 -0
- package/schematics/ng-update/index.js +1 -1
- package/schematics/ng-update/migrate-split-sizes.js +105 -0
- package/schematics/ng-update/{migrate-to-v49.js → migrate-to-v51.js} +5 -3
- package/template-i18n.json +45 -47
- package/types/siemens-element-ng-application-header.d.ts +8 -28
- package/types/siemens-element-ng-breadcrumb.d.ts +1 -1
- package/types/siemens-element-ng-chat-messages.d.ts +11 -9
- package/types/siemens-element-ng-circle-status.d.ts +1 -1
- package/types/siemens-element-ng-content-action-bar.d.ts +1 -1
- package/types/siemens-element-ng-dashboard.d.ts +2 -2
- package/types/siemens-element-ng-date-range-filter.d.ts +1 -1
- package/types/siemens-element-ng-datepicker.d.ts +3 -14
- package/types/siemens-element-ng-electron-titlebar.d.ts +1 -1
- package/types/siemens-element-ng-file-uploader.d.ts +13 -31
- package/types/siemens-element-ng-filter-bar.d.ts +1 -1
- package/types/siemens-element-ng-filtered-search.d.ts +4 -4
- package/types/siemens-element-ng-form.d.ts +180 -44
- package/types/siemens-element-ng-formly-legacy.d.ts +40 -0
- package/types/siemens-element-ng-formly.d.ts +34 -167
- package/types/siemens-element-ng-icon.d.ts +2 -19
- package/types/siemens-element-ng-ip-input.d.ts +1 -1
- package/types/siemens-element-ng-landing-page.d.ts +2 -2
- package/types/siemens-element-ng-loading-spinner.d.ts +7 -17
- package/types/siemens-element-ng-maplibre.d.ts +26 -0
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +86 -38
- package/types/siemens-element-ng-navbar-vertical.d.ts +1 -1
- package/types/siemens-element-ng-navbar.d.ts +3 -3
- package/types/siemens-element-ng-notification-item.d.ts +12 -0
- package/types/siemens-element-ng-phone-number.d.ts +5 -8
- package/types/siemens-element-ng-photo-upload.d.ts +4 -4
- package/types/siemens-element-ng-resize-observer.d.ts +0 -17
- package/types/siemens-element-ng-search-bar.d.ts +1 -1
- package/types/siemens-element-ng-select.d.ts +1 -1
- package/types/siemens-element-ng-side-panel.d.ts +3 -3
- package/types/siemens-element-ng-split.d.ts +99 -70
- package/types/siemens-element-ng-status-bar.d.ts +5 -13
- package/types/siemens-element-ng-status-counter.d.ts +1 -1
- package/types/siemens-element-ng-tabs.d.ts +1 -2
- package/types/siemens-element-ng-theme.d.ts +12 -2
- package/types/siemens-element-ng-threshold.d.ts +1 -1
- package/types/siemens-element-ng-toast-notification.d.ts +0 -1
- package/types/siemens-element-ng-tooltip.d.ts +7 -7
- package/types/siemens-element-ng-translate.d.ts +2 -5
- package/fesm2022/siemens-element-ng-icon-status.mjs +0 -46
- package/fesm2022/siemens-element-ng-icon-status.mjs.map +0 -1
- package/fesm2022/siemens-element-ng-sort-bar.mjs +0 -99
- package/fesm2022/siemens-element-ng-sort-bar.mjs.map +0 -1
- package/icon-status/package.json +0 -4
- package/schematics/vitest-setup.js +0 -5
- package/sort-bar/package.json +0 -4
- package/types/siemens-element-ng-icon-status.d.ts +0 -25
- package/types/siemens-element-ng-sort-bar.d.ts +0 -59
- /package/{LICENSE.md → LICENSE} +0 -0
|
@@ -3,7 +3,7 @@ import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
|
|
|
3
3
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
4
4
|
import { NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { input, signal, inject, Injector, viewChild, effect, untracked,
|
|
6
|
+
import { input, signal, inject, Injector, viewChild, effect, untracked, Component, Directive, ElementRef, computed, afterNextRender, HostListener, booleanAttribute, model, output } from '@angular/core';
|
|
7
7
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { elementMenu, elementThumbnails, elementDown2, elementOptionsVertical, elementFavoritesFilled, elementFavorites, elementExport, elementCancel } from '@siemens/element-icons';
|
|
9
9
|
import { SI_HEADER_WITH_DROPDOWNS, SiHeaderDropdownTriggerDirective, SI_HEADER_DROPDOWN_OPTIONS } from '@siemens/element-ng/header-dropdown';
|
|
@@ -29,29 +29,38 @@ class SiApplicationHeaderComponent {
|
|
|
29
29
|
*
|
|
30
30
|
* @defaultValue 'sm'
|
|
31
31
|
*/
|
|
32
|
-
expandBreakpoint = input('sm',
|
|
33
|
-
|
|
32
|
+
expandBreakpoint = input('sm', /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "expandBreakpoint" }] : /* istanbul ignore next */ []));
|
|
34
|
+
launchpad = input(/* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [undefined, { debugName: "launchpad" }] : /* istanbul ignore next */ []));
|
|
34
36
|
/**
|
|
35
37
|
* @defaultValue
|
|
36
38
|
* ```
|
|
37
39
|
* t(() => $localize`:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`)
|
|
38
40
|
* ```
|
|
39
41
|
*/
|
|
40
|
-
launchpadLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`),
|
|
42
|
+
launchpadLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`), /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "launchpadLabel" }] : /* istanbul ignore next */ []));
|
|
41
44
|
/** @internal */
|
|
42
45
|
closeMobileMenus = new Subject();
|
|
43
46
|
/** @internal */
|
|
44
|
-
mobileNavigationExpanded = signal(false,
|
|
47
|
+
mobileNavigationExpanded = signal(false, /* @ts-ignore */
|
|
48
|
+
...(ngDevMode ? [{ debugName: "mobileNavigationExpanded" }] : /* istanbul ignore next */ []));
|
|
45
49
|
/** @internal */
|
|
46
|
-
hasNavigation = signal(false,
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
hasNavigation = signal(false, /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "hasNavigation" }] : /* istanbul ignore next */ []));
|
|
52
|
+
openDropdownCount = signal(0, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "openDropdownCount" }] : /* istanbul ignore next */ []));
|
|
54
|
+
launchpadOpen = signal(false, /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "launchpadOpen" }] : /* istanbul ignore next */ []));
|
|
49
56
|
id = `__si-application-header-${SiApplicationHeaderComponent.idCounter++}`;
|
|
50
|
-
toggleNavigation = t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_NAVIGATION:
|
|
57
|
+
toggleNavigation = t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_NAVIGATION:Show navigation`);
|
|
51
58
|
injector = inject(Injector);
|
|
52
59
|
icons = addIcons({ elementThumbnails, elementMenu });
|
|
53
|
-
navigationToggle = viewChild('navigationToggle',
|
|
54
|
-
|
|
60
|
+
navigationToggle = viewChild('navigationToggle', /* @ts-ignore */
|
|
61
|
+
...(ngDevMode ? [{ debugName: "navigationToggle" }] : /* istanbul ignore next */ []));
|
|
62
|
+
focusTrap = viewChild.required(CdkTrapFocus, /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
|
|
55
64
|
breakpointObserver = inject(BreakpointObserver);
|
|
56
65
|
openDropdown;
|
|
57
66
|
closeMobileSub = this.closeMobileMenus.subscribe(() => {
|
|
@@ -153,12 +162,12 @@ class SiApplicationHeaderComponent {
|
|
|
153
162
|
this.dropdownClosed();
|
|
154
163
|
}
|
|
155
164
|
}
|
|
156
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
165
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiApplicationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
166
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiApplicationHeaderComponent, isStandalone: true, selector: "si-application-header", inputs: { expandBreakpoint: { classPropertyName: "expandBreakpoint", publicName: "expandBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, launchpad: { classPropertyName: "launchpad", publicName: "launchpad", isSignal: true, isRequired: false, transformFunction: null }, launchpadLabel: { classPropertyName: "launchpadLabel", publicName: "launchpadLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], viewQueries: [{ propertyName: "navigationToggle", first: true, predicate: ["navigationToggle"], descendants: true, isSignal: true }, { propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<header\n [class]=\"`application-header expand-${expandBreakpoint()}`\"\n [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n @if (launchpad()) {\n <button\n type=\"button\"\n aria-haspopup=\"dialog\"\n [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n [class.show]=\"launchpadOpen()\"\n [class.d-none]=\"hasNavigation()\"\n [attr.aria-expanded]=\"launchpadOpen()\"\n [attr.aria-label]=\"launchpadLabel() | translate\"\n [attr.aria-controls]=\"id + '-launchpad'\"\n (click)=\"toggleLaunchpad()\"\n >\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementThumbnails\" />\n </button>\n }\n @if (hasNavigation()) {\n <button\n #navigationToggle\n type=\"button\"\n class=\"header-toggle focus-inside\"\n [class.show]=\"mobileNavigationExpanded()\"\n [attr.aria-expanded]=\"mobileNavigationExpanded()\"\n [attr.aria-label]=\"toggleNavigation | translate\"\n [attr.aria-controls]=\"id + '-navigation-wrapper'\"\n (click)=\"toggleMobileNavigationExpanded()\"\n >\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementMenu\" />\n </button>\n }\n <ng-content select=\"si-header-brand, element-header-brand\">\n <div class=\"header-brand\"></div>\n </ng-content>\n\n <div\n class=\"d-contents\"\n [id]=\"id + '-navigation-wrapper'\"\n [cdkTrapFocus]=\"mobileNavigationExpanded()\"\n (keydown.escape)=\"navigationEscapePressed()\"\n >\n <ng-content select=\"si-header-navigation, element-header-navigation\">\n <div class=\"header-navigation\"></div>\n </ng-content>\n </div>\n\n <ng-content select=\"si-header-actions, element-header-actions\">\n <div class=\"header-actions\"></div>\n </ng-content>\n</header>\n\n@if (launchpadOpen() && launchpad()) {\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n [id]=\"id + '-launchpad'\"\n [attr.aria-label]=\"launchpadLabel() | translate\"\n >\n <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n <div\n [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n (click)=\"backdropClicked()\"\n ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
158
167
|
}
|
|
159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiApplicationHeaderComponent, decorators: [{
|
|
160
169
|
type: Component,
|
|
161
|
-
args: [{ selector: 'si-application-header', imports: [SiTranslatePipe, A11yModule, NgTemplateOutlet, SiIconComponent], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }],
|
|
170
|
+
args: [{ selector: 'si-application-header', imports: [SiTranslatePipe, A11yModule, NgTemplateOutlet, SiIconComponent], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], template: "<header\n [class]=\"`application-header expand-${expandBreakpoint()}`\"\n [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n @if (launchpad()) {\n <button\n type=\"button\"\n aria-haspopup=\"dialog\"\n [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n [class.show]=\"launchpadOpen()\"\n [class.d-none]=\"hasNavigation()\"\n [attr.aria-expanded]=\"launchpadOpen()\"\n [attr.aria-label]=\"launchpadLabel() | translate\"\n [attr.aria-controls]=\"id + '-launchpad'\"\n (click)=\"toggleLaunchpad()\"\n >\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementThumbnails\" />\n </button>\n }\n @if (hasNavigation()) {\n <button\n #navigationToggle\n type=\"button\"\n class=\"header-toggle focus-inside\"\n [class.show]=\"mobileNavigationExpanded()\"\n [attr.aria-expanded]=\"mobileNavigationExpanded()\"\n [attr.aria-label]=\"toggleNavigation | translate\"\n [attr.aria-controls]=\"id + '-navigation-wrapper'\"\n (click)=\"toggleMobileNavigationExpanded()\"\n >\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementMenu\" />\n </button>\n }\n <ng-content select=\"si-header-brand, element-header-brand\">\n <div class=\"header-brand\"></div>\n </ng-content>\n\n <div\n class=\"d-contents\"\n [id]=\"id + '-navigation-wrapper'\"\n [cdkTrapFocus]=\"mobileNavigationExpanded()\"\n (keydown.escape)=\"navigationEscapePressed()\"\n >\n <ng-content select=\"si-header-navigation, element-header-navigation\">\n <div class=\"header-navigation\"></div>\n </ng-content>\n </div>\n\n <ng-content select=\"si-header-actions, element-header-actions\">\n <div class=\"header-actions\"></div>\n </ng-content>\n</header>\n\n@if (launchpadOpen() && launchpad()) {\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n [id]=\"id + '-launchpad'\"\n [attr.aria-label]=\"launchpadLabel() | translate\"\n >\n <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n <div\n [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n (click)=\"backdropClicked()\"\n ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"] }]
|
|
162
171
|
}], ctorParameters: () => [], propDecorators: { expandBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBreakpoint", required: false }] }], launchpad: [{ type: i0.Input, args: [{ isSignal: true, alias: "launchpad", required: false }] }], launchpadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "launchpadLabel", required: false }] }], navigationToggle: [{ type: i0.ViewChild, args: ['navigationToggle', { isSignal: true }] }], focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
|
|
163
172
|
|
|
164
173
|
/**
|
|
@@ -167,15 +176,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
167
176
|
*/
|
|
168
177
|
class SiAccountDetailsComponent {
|
|
169
178
|
/** The user's full name. */
|
|
170
|
-
name = input.required(
|
|
179
|
+
name = input.required(/* @ts-ignore */
|
|
180
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
171
181
|
/** The user's company name. */
|
|
172
|
-
company = input(
|
|
182
|
+
company = input(/* @ts-ignore */
|
|
183
|
+
...(ngDevMode ? [undefined, { debugName: "company" }] : /* istanbul ignore next */ []));
|
|
173
184
|
/** The user's email address. */
|
|
174
|
-
email = input(
|
|
185
|
+
email = input(/* @ts-ignore */
|
|
186
|
+
...(ngDevMode ? [undefined, { debugName: "email" }] : /* istanbul ignore next */ []));
|
|
175
187
|
/** The user's role. */
|
|
176
|
-
userRole = input(
|
|
177
|
-
|
|
178
|
-
static
|
|
188
|
+
userRole = input(/* @ts-ignore */
|
|
189
|
+
...(ngDevMode ? [undefined, { debugName: "userRole" }] : /* istanbul ignore next */ []));
|
|
190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiAccountDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiAccountDetailsComponent, isStandalone: true, selector: "si-account-details", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
179
192
|
<div class="mx-5">
|
|
180
193
|
<div class="si-h5">{{ name() }}</div>
|
|
181
194
|
@if (email()) {
|
|
@@ -192,9 +205,9 @@ class SiAccountDetailsComponent {
|
|
|
192
205
|
</div>
|
|
193
206
|
}
|
|
194
207
|
</div>
|
|
195
|
-
`, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
208
|
+
`, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
196
209
|
}
|
|
197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiAccountDetailsComponent, decorators: [{
|
|
198
211
|
type: Component,
|
|
199
212
|
args: [{
|
|
200
213
|
selector: 'si-account-details',
|
|
@@ -216,8 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
216
229
|
</div>
|
|
217
230
|
}
|
|
218
231
|
</div>
|
|
219
|
-
|
|
220
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
232
|
+
`
|
|
221
233
|
}]
|
|
222
234
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], company: [{ type: i0.Input, args: [{ isSignal: true, alias: "company", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }] } });
|
|
223
235
|
|
|
@@ -233,8 +245,8 @@ class SiHeaderNavigationItemComponent {
|
|
|
233
245
|
optional: true
|
|
234
246
|
});
|
|
235
247
|
icons = addIcons({ elementDown2 });
|
|
236
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiHeaderNavigationItemComponent, isStandalone: true, selector: "button[si-header-navigation-item], a[si-header-navigation-item]", host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside" }, providers: [
|
|
238
250
|
{ provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
|
|
239
251
|
], ngImport: i0, template: `
|
|
240
252
|
<div class="item-title">
|
|
@@ -243,9 +255,9 @@ class SiHeaderNavigationItemComponent {
|
|
|
243
255
|
@if (dropdownTrigger) {
|
|
244
256
|
<si-icon class="dropdown-caret" [icon]="icons.elementDown2" />
|
|
245
257
|
}
|
|
246
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }]
|
|
258
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
|
|
247
259
|
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderNavigationItemComponent, decorators: [{
|
|
249
261
|
type: Component,
|
|
250
262
|
args: [{
|
|
251
263
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -262,7 +274,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
262
274
|
providers: [
|
|
263
275
|
{ provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
|
|
264
276
|
],
|
|
265
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
266
277
|
host: {
|
|
267
278
|
class: 'header-item focus-inside',
|
|
268
279
|
'[class.dropdown-toggle]': '!!dropdownTrigger'
|
|
@@ -282,18 +293,23 @@ class SiHeaderCollapsibleActionsComponent {
|
|
|
282
293
|
*
|
|
283
294
|
* @defaultValue
|
|
284
295
|
* ```
|
|
285
|
-
* t(() => $localize`:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:
|
|
296
|
+
* t(() => $localize`:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Show actions`)
|
|
286
297
|
* ```
|
|
287
298
|
*/
|
|
288
|
-
mobileToggleLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:
|
|
299
|
+
mobileToggleLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Show actions`), /* @ts-ignore */
|
|
300
|
+
...(ngDevMode ? [{ debugName: "mobileToggleLabel" }] : /* istanbul ignore next */ []));
|
|
289
301
|
/** @internal **/
|
|
290
|
-
mobileExpanded = signal(false,
|
|
302
|
+
mobileExpanded = signal(false, /* @ts-ignore */
|
|
303
|
+
...(ngDevMode ? [{ debugName: "mobileExpanded" }] : /* istanbul ignore next */ []));
|
|
291
304
|
/** @internal **/
|
|
292
|
-
badgeCount = signal(0,
|
|
305
|
+
badgeCount = signal(0, /* @ts-ignore */
|
|
306
|
+
...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
|
|
293
307
|
id = `__si-header-collapsible-actions-${SiHeaderCollapsibleActionsComponent.idCounter++}`;
|
|
294
308
|
icons = addIcons({ elementOptionsVertical });
|
|
295
|
-
toggle = viewChild.required('toggle'
|
|
296
|
-
|
|
309
|
+
toggle = viewChild.required('toggle', /* @ts-ignore */
|
|
310
|
+
...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
|
|
311
|
+
focusTrap = viewChild.required(CdkTrapFocus, /* @ts-ignore */
|
|
312
|
+
...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
|
|
297
313
|
header = inject(SiApplicationHeaderComponent);
|
|
298
314
|
closeMobileSub = this.header.closeMobileMenus.subscribe(() => this.closeMobile());
|
|
299
315
|
ngOnDestroy() {
|
|
@@ -326,16 +342,16 @@ class SiHeaderCollapsibleActionsComponent {
|
|
|
326
342
|
this.toggle().nativeElement.focus();
|
|
327
343
|
}
|
|
328
344
|
}
|
|
329
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
330
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
345
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
346
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: SiHeaderCollapsibleActionsComponent, isStandalone: true, selector: "si-header-collapsible-actions", inputs: { mobileToggleLabel: { classPropertyName: "mobileToggleLabel", publicName: "mobileToggleLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, providers: [
|
|
331
347
|
{ provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
|
|
332
|
-
], viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, isSignal: true }, { propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #toggle\n type=\"button\"\n class=\"header-toggle focus-inside\"\n [class.show]=\"mobileExpanded()\"\n [attr.aria-expanded]=\"mobileExpanded()\"\n [attr.aria-label]=\"mobileToggleLabel() | translate\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggleMobileExpanded()\"\n>\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementOptionsVertical\" [class.badge-dot]=\"badgeCount()\" />\n</button>\n<div\n class=\"header-collapsible-actions\"\n [id]=\"id + '-content'\"\n [class.show]=\"mobileExpanded()\"\n [cdkTrapFocus]=\"mobileExpanded()\"\n (keydown.escape)=\"escapePressed()\"\n>\n <ng-content />\n</div>\n", styles: [".badge-dot:after{inset-inline-end:4px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }]
|
|
348
|
+
], viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, isSignal: true }, { propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #toggle\n type=\"button\"\n class=\"header-toggle focus-inside\"\n [class.show]=\"mobileExpanded()\"\n [attr.aria-expanded]=\"mobileExpanded()\"\n [attr.aria-label]=\"mobileToggleLabel() | translate\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggleMobileExpanded()\"\n>\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementOptionsVertical\" [class.badge-dot]=\"badgeCount()\" />\n</button>\n<div\n class=\"header-collapsible-actions\"\n [id]=\"id + '-content'\"\n [class.show]=\"mobileExpanded()\"\n [cdkTrapFocus]=\"mobileExpanded()\"\n (keydown.escape)=\"escapePressed()\"\n>\n <ng-content />\n</div>\n", styles: [".badge-dot:after{inset-inline-end:4px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
333
349
|
}
|
|
334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, decorators: [{
|
|
335
351
|
type: Component,
|
|
336
352
|
args: [{ selector: 'si-header-collapsible-actions', imports: [SiTranslatePipe, A11yModule, SiIconComponent], providers: [
|
|
337
353
|
{ provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
|
|
338
|
-
],
|
|
354
|
+
], host: { class: 'd-contents' }, template: "<button\n #toggle\n type=\"button\"\n class=\"header-toggle focus-inside\"\n [class.show]=\"mobileExpanded()\"\n [attr.aria-expanded]=\"mobileExpanded()\"\n [attr.aria-label]=\"mobileToggleLabel() | translate\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggleMobileExpanded()\"\n>\n <si-icon class=\"icon-lg\" [icon]=\"icons.elementOptionsVertical\" [class.badge-dot]=\"badgeCount()\" />\n</button>\n<div\n class=\"header-collapsible-actions\"\n [id]=\"id + '-content'\"\n [class.show]=\"mobileExpanded()\"\n [cdkTrapFocus]=\"mobileExpanded()\"\n (keydown.escape)=\"escapePressed()\"\n>\n <ng-content />\n</div>\n", styles: [".badge-dot:after{inset-inline-end:4px}\n"] }]
|
|
339
355
|
}], propDecorators: { mobileToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileToggleLabel", required: false }] }], toggle: [{ type: i0.ViewChild, args: ['toggle', { isSignal: true }] }], focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
|
|
340
356
|
|
|
341
357
|
/**
|
|
@@ -348,7 +364,9 @@ class SiHeaderActionItemBase {
|
|
|
348
364
|
self: true,
|
|
349
365
|
optional: true
|
|
350
366
|
});
|
|
351
|
-
collapsibleActions = inject(SiHeaderCollapsibleActionsComponent, {
|
|
367
|
+
collapsibleActions = inject(SiHeaderCollapsibleActionsComponent, {
|
|
368
|
+
optional: true
|
|
369
|
+
});
|
|
352
370
|
icons = addIcons({ elementDown2 });
|
|
353
371
|
header = inject(SiApplicationHeaderComponent);
|
|
354
372
|
ngOnInit() {
|
|
@@ -366,16 +384,17 @@ class SiHeaderActionItemBase {
|
|
|
366
384
|
queueMicrotask(() => this.header.closeMobileMenus.next());
|
|
367
385
|
}
|
|
368
386
|
}
|
|
369
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
370
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
388
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SiHeaderActionItemBase, isStandalone: true, host: { listeners: { "click": "click()" } }, ngImport: i0 });
|
|
371
389
|
}
|
|
372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionItemBase, decorators: [{
|
|
373
391
|
type: Directive,
|
|
374
|
-
args: [{
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
392
|
+
args: [{
|
|
393
|
+
host: {
|
|
394
|
+
'(click)': 'click()'
|
|
395
|
+
}
|
|
396
|
+
}]
|
|
397
|
+
}] });
|
|
379
398
|
|
|
380
399
|
/**
|
|
381
400
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -392,34 +411,35 @@ class SiHeaderActionIconItemBase extends SiHeaderActionItemBase {
|
|
|
392
411
|
* - =number, the number will be shown and automatically trimmed if \>99
|
|
393
412
|
* - =true, an empty red dot will be shown
|
|
394
413
|
*/
|
|
395
|
-
badge = input(
|
|
414
|
+
badge = input(/* @ts-ignore */
|
|
415
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
396
416
|
tooltipService = inject(SiTooltipService);
|
|
397
417
|
elementRef = inject(ElementRef);
|
|
398
418
|
existingTooltip = inject(SiTooltipDirective, { optional: true, host: true });
|
|
399
|
-
|
|
419
|
+
canShowTooltip = computed(() => this.visuallyHideTitle() &&
|
|
420
|
+
(!this.existingTooltip ||
|
|
421
|
+
this.existingTooltip.isDisabled() ||
|
|
422
|
+
!this.existingTooltip.siTooltip()), /* @ts-ignore */
|
|
423
|
+
...(ngDevMode ? [{ debugName: "canShowTooltip" }] : /* istanbul ignore next */ []));
|
|
424
|
+
badgeDot = computed(() => typeof this.badge() === 'boolean' ? this.badge() : false, /* @ts-ignore */
|
|
425
|
+
...(ngDevMode ? [{ debugName: "badgeDot" }] : /* istanbul ignore next */ []));
|
|
400
426
|
badgeValue = computed(() => {
|
|
401
427
|
const badge = this.badge();
|
|
402
428
|
return typeof badge === 'number'
|
|
403
429
|
? `${badge > 99 ? '+' : ''}${Math.min(99, Math.round(badge))}`
|
|
404
430
|
: undefined;
|
|
405
|
-
},
|
|
431
|
+
}, /* @ts-ignore */
|
|
432
|
+
...(ngDevMode ? [{ debugName: "badgeValue" }] : /* istanbul ignore next */ []));
|
|
406
433
|
constructor() {
|
|
407
434
|
super();
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
element: this.elementRef,
|
|
417
|
-
placement: 'auto',
|
|
418
|
-
tooltip: this.itemTitle,
|
|
419
|
-
tooltipContext: () => undefined
|
|
420
|
-
});
|
|
421
|
-
onCleanup(() => tooltipRef.destroy());
|
|
422
|
-
}
|
|
435
|
+
this.tooltipService.createTooltip({
|
|
436
|
+
element: this.elementRef,
|
|
437
|
+
placement: () => 'auto',
|
|
438
|
+
canShow: this.canShowTooltip,
|
|
439
|
+
// Subclass field initializers run after this base constructor. So we cannot directly pass `this.itemTitle`.
|
|
440
|
+
tooltip: () => this.itemTitle(),
|
|
441
|
+
tooltipContext: () => undefined
|
|
442
|
+
});
|
|
423
443
|
}
|
|
424
444
|
ngOnChanges(changes) {
|
|
425
445
|
if (changes.badge) {
|
|
@@ -431,11 +451,12 @@ class SiHeaderActionIconItemBase extends SiHeaderActionItemBase {
|
|
|
431
451
|
}
|
|
432
452
|
}
|
|
433
453
|
}
|
|
434
|
-
visuallyHideTitle = computed(() => !this.collapsibleActions?.mobileExpanded(),
|
|
435
|
-
|
|
436
|
-
static
|
|
454
|
+
visuallyHideTitle = computed(() => !this.collapsibleActions?.mobileExpanded(), /* @ts-ignore */
|
|
455
|
+
...(ngDevMode ? [{ debugName: "visuallyHideTitle" }] : /* istanbul ignore next */ []));
|
|
456
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionIconItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
457
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: SiHeaderActionIconItemBase, isStandalone: true, inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
437
458
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionIconItemBase, decorators: [{
|
|
439
460
|
type: Directive,
|
|
440
461
|
args: [{}]
|
|
441
462
|
}], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
|
|
@@ -447,14 +468,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
447
468
|
/** Adds an action item to the header. Should be located inside `.header-actions`. */
|
|
448
469
|
class SiHeaderActionItemComponent extends SiHeaderActionIconItemBase {
|
|
449
470
|
/** The icon to be shown. */
|
|
450
|
-
icon = input.required(
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
471
|
+
icon = input.required(/* @ts-ignore */
|
|
472
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
473
|
+
itemTitle = viewChild.required('itemTitle', /* @ts-ignore */
|
|
474
|
+
...(ngDevMode ? [{ debugName: "itemTitle" }] : /* istanbul ignore next */ []));
|
|
475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiHeaderActionItemComponent, isStandalone: true, selector: "button[si-header-action-item], a[si-header-action-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside" }, providers: [SiTooltipService], viewQueries: [{ propertyName: "itemTitle", first: true, predicate: ["itemTitle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<si-icon class=\"icon-lg\" [class.badge-dot]=\"badgeDot()\" [icon]=\"icon()\" />\n@if (badgeValue()) {\n <span class=\"badge-text\">{{ badgeValue() }}</span>\n}\n<ng-content select=\"si-avatar\" />\n<div #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n <ng-content />\n</div>\n@if (dropdownTrigger) {\n <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
|
|
454
477
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionItemComponent, decorators: [{
|
|
456
479
|
type: Component,
|
|
457
|
-
args: [{ selector: 'button[si-header-action-item], a[si-header-action-item]', imports: [SiIconComponent], providers: [SiTooltipService],
|
|
480
|
+
args: [{ selector: 'button[si-header-action-item], a[si-header-action-item]', imports: [SiIconComponent], providers: [SiTooltipService], host: {
|
|
458
481
|
class: 'header-item focus-inside',
|
|
459
482
|
'[class.dropdown-toggle]': '!!dropdownTrigger'
|
|
460
483
|
}, template: "<si-icon class=\"icon-lg\" [class.badge-dot]=\"badgeDot()\" [icon]=\"icon()\" />\n@if (badgeValue()) {\n <span class=\"badge-text\">{{ badgeValue() }}</span>\n}\n<ng-content select=\"si-avatar\" />\n<div #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n <ng-content />\n</div>\n@if (dropdownTrigger) {\n <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n" }]
|
|
@@ -467,18 +490,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
467
490
|
/** Adds an account item to the header. Should be located inside `.header-actions`. */
|
|
468
491
|
class SiHeaderAccountItemComponent extends SiHeaderActionIconItemBase {
|
|
469
492
|
/** Name of the account. */
|
|
470
|
-
name = input.required(
|
|
493
|
+
name = input.required(/* @ts-ignore */
|
|
494
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
471
495
|
/** Initials of the account. If not provided, they will be calculated. */
|
|
472
|
-
initials = input(
|
|
496
|
+
initials = input(/* @ts-ignore */
|
|
497
|
+
...(ngDevMode ? [undefined, { debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
473
498
|
/** URL to an image which should be shown instead of the initials. */
|
|
474
|
-
imageUrl = input(
|
|
499
|
+
imageUrl = input(/* @ts-ignore */
|
|
500
|
+
...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
475
501
|
itemTitle = this.name;
|
|
476
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
502
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderAccountItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
503
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiHeaderAccountItemComponent, isStandalone: true, selector: "button[si-header-account-item]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside px-4 py-0" }, providers: [SiTooltipService], usesInheritance: true, ngImport: i0, template: "<si-avatar\n size=\"small\"\n color=\"0\"\n [altText]=\"name()\"\n [initials]=\"initials()\"\n [imageUrl]=\"imageUrl()\"\n/>\n<div class=\"item-title\" aria-hidden=\"true\" [class.d-none]=\"visuallyHideTitle()\">\n {{ name() }}\n</div>\n@if (badgeValue()) {\n <div class=\"badge-text\">{{ badgeValue() }}</div>\n}\n@if (dropdownTrigger) {\n <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 8px) }\n"], dependencies: [{ kind: "component", type: SiAvatarComponent, selector: "si-avatar", inputs: ["size", "imageUrl", "icon", "initials", "color", "altText", "status", "statusAriaLabel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
|
|
478
504
|
}
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderAccountItemComponent, decorators: [{
|
|
480
506
|
type: Component,
|
|
481
|
-
args: [{ selector: 'button[si-header-account-item]', imports: [SiAvatarComponent, SiIconComponent], providers: [SiTooltipService],
|
|
507
|
+
args: [{ selector: 'button[si-header-account-item]', imports: [SiAvatarComponent, SiIconComponent], providers: [SiTooltipService], host: {
|
|
482
508
|
class: 'header-item focus-inside px-4 py-0',
|
|
483
509
|
'[class.dropdown-toggle]': '!!dropdownTrigger'
|
|
484
510
|
}, template: "<si-avatar\n size=\"small\"\n color=\"0\"\n [altText]=\"name()\"\n [initials]=\"initials()\"\n [imageUrl]=\"imageUrl()\"\n/>\n<div class=\"item-title\" aria-hidden=\"true\" [class.d-none]=\"visuallyHideTitle()\">\n {{ name() }}\n</div>\n@if (badgeValue()) {\n <div class=\"badge-text\">{{ badgeValue() }}</div>\n}\n@if (dropdownTrigger) {\n <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 8px) }\n"] }]
|
|
@@ -494,13 +520,14 @@ class SiHeaderSelectionItemComponent extends SiHeaderActionItemBase {
|
|
|
494
520
|
*
|
|
495
521
|
* @defaultValue false
|
|
496
522
|
*/
|
|
497
|
-
open = input(false,
|
|
498
|
-
|
|
499
|
-
static
|
|
523
|
+
open = input(false, /* @ts-ignore */
|
|
524
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
525
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderSelectionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: SiHeaderSelectionItemComponent, isStandalone: true, selector: "button[si-header-selection-item]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "open()" }, classAttribute: "header-item header-selection-item focus-inside dropdown-toggle" }, usesInheritance: true, ngImport: i0, template: "<div class=\"item-title\">\n <ng-content />\n</div>\n<si-icon class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
|
|
500
527
|
}
|
|
501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
528
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderSelectionItemComponent, decorators: [{
|
|
502
529
|
type: Component,
|
|
503
|
-
args: [{ selector: 'button[si-header-selection-item]', imports: [SiIconComponent],
|
|
530
|
+
args: [{ selector: 'button[si-header-selection-item]', imports: [SiIconComponent], host: {
|
|
504
531
|
class: 'header-item header-selection-item focus-inside dropdown-toggle',
|
|
505
532
|
'[class.show]': 'open()'
|
|
506
533
|
}, template: "<div class=\"item-title\">\n <ng-content />\n</div>\n<si-icon class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n" }]
|
|
@@ -512,7 +539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
512
539
|
*/
|
|
513
540
|
/** The siemens logo. Should be located inside `.header-brand`. */
|
|
514
541
|
class SiHeaderLogoDirective {
|
|
515
|
-
logoText = signal(undefined,
|
|
542
|
+
logoText = signal(undefined, /* @ts-ignore */
|
|
543
|
+
...(ngDevMode ? [{ debugName: "logoText" }] : /* istanbul ignore next */ []));
|
|
516
544
|
elementRef = inject(ElementRef);
|
|
517
545
|
injector = inject(Injector);
|
|
518
546
|
ngOnInit() {
|
|
@@ -526,10 +554,10 @@ class SiHeaderLogoDirective {
|
|
|
526
554
|
.replace(/^["']|["']$/g, ''))
|
|
527
555
|
}, { injector: this.injector });
|
|
528
556
|
}
|
|
529
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
530
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
557
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
558
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SiHeaderLogoDirective, isStandalone: true, selector: "si-header-logo, [siHeaderLogo]", host: { listeners: { "window:theme-switch": "updateLogoText()" }, properties: { "attr.aria-label": "logoText()" }, classAttribute: "header-logo px-6 focus-inside" }, ngImport: i0 });
|
|
531
559
|
}
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderLogoDirective, decorators: [{
|
|
533
561
|
type: Directive,
|
|
534
562
|
args: [{
|
|
535
563
|
selector: 'si-header-logo, [siHeaderLogo]',
|
|
@@ -543,47 +571,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
543
571
|
args: ['window:theme-switch']
|
|
544
572
|
}] } });
|
|
545
573
|
|
|
546
|
-
/**
|
|
547
|
-
* Copyright (c) Siemens 2016 - 2026
|
|
548
|
-
* SPDX-License-Identifier: MIT
|
|
549
|
-
*/
|
|
550
|
-
/**
|
|
551
|
-
* The siemens logo.
|
|
552
|
-
* Should be located inside `.header-brand`.
|
|
553
|
-
*
|
|
554
|
-
* @deprecated Use the {@link SiHeaderLogoDirective} instead.
|
|
555
|
-
* The new component will use the logo provided by the global theme instead
|
|
556
|
-
* of containing a hard coded siemens logo.
|
|
557
|
-
* ```html
|
|
558
|
-
* // previous
|
|
559
|
-
* <a si-header-siemens-logo routerLink="/" aria-label="Siemens" class="d-none d-md-flex"></a>
|
|
560
|
-
* // new
|
|
561
|
-
* <a siHeaderLogo routerLink="/" class="d-none d-md-flex"></a>
|
|
562
|
-
* ```
|
|
563
|
-
*
|
|
564
|
-
*/
|
|
565
|
-
class SiHeaderSiemensLogoComponent extends SiHeaderLogoDirective {
|
|
566
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSiemensLogoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderSiemensLogoComponent, isStandalone: true, selector: "si-header-siemens-logo, [si-header-siemens-logo]", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
568
|
-
}
|
|
569
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSiemensLogoComponent, decorators: [{
|
|
570
|
-
type: Component,
|
|
571
|
-
args: [{
|
|
572
|
-
selector: 'si-header-siemens-logo, [si-header-siemens-logo]',
|
|
573
|
-
template: '',
|
|
574
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
575
|
-
}]
|
|
576
|
-
}] });
|
|
577
|
-
|
|
578
574
|
/**
|
|
579
575
|
* Copyright (c) Siemens 2016 - 2026
|
|
580
576
|
* SPDX-License-Identifier: MIT
|
|
581
577
|
*/
|
|
582
578
|
class SiHeaderActionsDirective {
|
|
583
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
584
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
580
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SiHeaderActionsDirective, isStandalone: true, selector: "si-header-actions", host: { classAttribute: "header-actions" }, ngImport: i0 });
|
|
585
581
|
}
|
|
586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderActionsDirective, decorators: [{
|
|
587
583
|
type: Directive,
|
|
588
584
|
args: [{
|
|
589
585
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -597,10 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
597
593
|
* SPDX-License-Identifier: MIT
|
|
598
594
|
*/
|
|
599
595
|
class SiHeaderBrandDirective {
|
|
600
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
601
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
596
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderBrandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
597
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SiHeaderBrandDirective, isStandalone: true, selector: "si-header-brand", host: { classAttribute: "header-brand" }, ngImport: i0 });
|
|
602
598
|
}
|
|
603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderBrandDirective, decorators: [{
|
|
604
600
|
type: Directive,
|
|
605
601
|
args: [{
|
|
606
602
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -622,12 +618,12 @@ class SiHeaderNavigationComponent {
|
|
|
622
618
|
ngOnDestroy() {
|
|
623
619
|
this.header.hasNavigation.set(false);
|
|
624
620
|
}
|
|
625
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
626
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
621
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiHeaderNavigationComponent, isStandalone: true, selector: "si-header-navigation", host: { attributes: { "role": "navigation" }, classAttribute: "header-navigation" }, ngImport: i0, template: "@if (header.launchpad()) {\n <button\n type=\"button\"\n [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n (click)=\"header.openLaunchpad()\"\n >\n <si-icon class=\"icon-lg pe-5\" [icon]=\"icons.elementThumbnails\" />\n {{ header.launchpadLabel() | translate }}\n </button>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
627
623
|
}
|
|
628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiHeaderNavigationComponent, decorators: [{
|
|
629
625
|
type: Component,
|
|
630
|
-
args: [{ selector: 'si-header-navigation', imports: [SiTranslatePipe, SiIconComponent],
|
|
626
|
+
args: [{ selector: 'si-header-navigation', imports: [SiTranslatePipe, SiIconComponent], host: { class: 'header-navigation', role: 'navigation' }, template: "@if (header.launchpad()) {\n <button\n type=\"button\"\n [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n (click)=\"header.openLaunchpad()\"\n >\n <si-icon class=\"icon-lg pe-5\" [icon]=\"icons.elementThumbnails\" />\n {{ header.launchpadLabel() | translate }}\n </button>\n}\n<ng-content />\n" }]
|
|
631
627
|
}], ctorParameters: () => [] });
|
|
632
628
|
|
|
633
629
|
/**
|
|
@@ -636,26 +632,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
636
632
|
*/
|
|
637
633
|
class SiLaunchpadAppComponent {
|
|
638
634
|
/** @defaultValue false */
|
|
639
|
-
external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
|
|
635
|
+
external = input(false, { ...(ngDevMode ? { debugName: "external" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
640
636
|
/** @defaultValue false */
|
|
641
|
-
active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
|
|
637
|
+
active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
642
638
|
/** @defaultValue false */
|
|
643
|
-
enableFavoriteToggle = input(false, { ...(ngDevMode ? { debugName: "enableFavoriteToggle" } : {}), transform: booleanAttribute });
|
|
639
|
+
enableFavoriteToggle = input(false, { ...(ngDevMode ? { debugName: "enableFavoriteToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
644
640
|
/** @defaultValue false */
|
|
645
|
-
favorite = model(false,
|
|
641
|
+
favorite = model(false, /* @ts-ignore */
|
|
642
|
+
...(ngDevMode ? [{ debugName: "favorite" }] : /* istanbul ignore next */ []));
|
|
646
643
|
/** @defaultValue false */
|
|
647
|
-
action = input(false, { ...(ngDevMode ? { debugName: "action" } : {}), transform: booleanAttribute });
|
|
648
|
-
iconUrl = input(
|
|
649
|
-
|
|
644
|
+
action = input(false, { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
645
|
+
iconUrl = input(/* @ts-ignore */
|
|
646
|
+
...(ngDevMode ? [undefined, { debugName: "iconUrl" }] : /* istanbul ignore next */ []));
|
|
647
|
+
iconClass = input(/* @ts-ignore */
|
|
648
|
+
...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
|
|
650
649
|
/**
|
|
651
650
|
* Aria-label for the external link icon.
|
|
652
651
|
*
|
|
653
652
|
* @defaultValue
|
|
654
653
|
* ```
|
|
655
|
-
* t(() => $localize`:@@SI_LAUNCHPAD.EXTERNAL_LINK:
|
|
654
|
+
* t(() => $localize`:@@SI_LAUNCHPAD.EXTERNAL_LINK:Open in new tab`)
|
|
656
655
|
* ```
|
|
657
656
|
*/
|
|
658
|
-
externalLinkText = input(t(() => $localize `:@@SI_LAUNCHPAD.EXTERNAL_LINK:
|
|
657
|
+
externalLinkText = input(t(() => $localize `:@@SI_LAUNCHPAD.EXTERNAL_LINK:Open in new tab`), /* @ts-ignore */
|
|
658
|
+
...(ngDevMode ? [{ debugName: "externalLinkText" }] : /* istanbul ignore next */ []));
|
|
659
659
|
icons = addIcons({ elementExport, elementFavorites, elementFavoritesFilled });
|
|
660
660
|
header = inject(SiApplicationHeaderComponent);
|
|
661
661
|
favoriteClicked(event) {
|
|
@@ -666,12 +666,12 @@ class SiLaunchpadAppComponent {
|
|
|
666
666
|
click() {
|
|
667
667
|
this.header.closeLaunchpad();
|
|
668
668
|
}
|
|
669
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
670
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
669
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiLaunchpadAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiLaunchpadAppComponent, isStandalone: true, selector: "a[si-launchpad-app]", inputs: { external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, enableFavoriteToggle: { classPropertyName: "enableFavoriteToggle", publicName: "enableFavoriteToggle", isSignal: true, isRequired: false, transformFunction: null }, favorite: { classPropertyName: "favorite", publicName: "favorite", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, iconUrl: { classPropertyName: "iconUrl", publicName: "iconUrl", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, externalLinkText: { classPropertyName: "externalLinkText", publicName: "externalLinkText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favorite: "favoriteChange" }, host: { listeners: { "keydown.space": "favoriteClicked($event)", "click": "click()" }, properties: { "class.active": "active()", "class.action": "action()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@if (iconUrl()) {\n <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n <si-icon class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"app-text\">\n <div class=\"si-h4 d-flex align-items-center mw-100 gap-1\">\n <span class=\"text-truncate\">\n <ng-content select=\"[app-name]\" />\n </span>\n @if (external()) {\n <si-icon\n class=\"icon\"\n [icon]=\"icons.elementExport\"\n [attr.aria-label]=\"externalLinkText() | translate\"\n />\n }\n </div>\n <div class=\"si-body text-secondary mt-2 text-truncate mw-100\">\n <ng-content select=\"[app-systemName]\" />\n </div>\n</div>\n@if (enableFavoriteToggle()) {\n <si-icon\n class=\"icon favorite-icon\"\n [class.is-favorite]=\"favorite()\"\n [icon]=\"favorite() ? icons.elementFavoritesFilled : icons.elementFavorites\"\n (click)=\"favoriteClicked($event)\"\n />\n}\n", styles: [":host{display:flex;align-items:center;flex-flow:column nowrap;position:relative;padding-block:24px;inline-size:calc(7rem + 40px);max-inline-size:calc(7rem + 40px);padding-inline:8px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.action{color:var(--element-action-primary)}:host.active,:host:hover{color:var(--element-text-primary);text-decoration:none}:host.active{background-color:var(--element-base-1-selected)}:host:hover{background-color:var(--element-base-1-hover)}.app-text{display:flex;align-items:center;flex-direction:column;max-inline-size:100%;overflow:hidden}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:3rem;block-size:3rem;margin-block-end:8px;border-radius:var(--element-radius-2)}.app-icon:is(si-icon){background:var(--element-launchpad-app-background);font-size:2.5rem;padding:4px;color:var(--element-launchpad-app-color)}.favorite-icon{position:absolute;inset-inline-end:16px;inset-block-start:16px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}@media(max-width:767.98px){:host{flex-flow:row nowrap;inline-size:100%;max-inline-size:100%;padding:8px}:host:has(.favorite-icon){padding-inline-end:32px}.app-icon{margin-block-end:0;margin-inline-end:8px}.app-text{align-items:start}.favorite-icon{inset-inline-end:8px;inset-block-start:8px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
671
671
|
}
|
|
672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiLaunchpadAppComponent, decorators: [{
|
|
673
673
|
type: Component,
|
|
674
|
-
args: [{ selector: 'a[si-launchpad-app]', imports: [SiIconComponent, SiTranslatePipe],
|
|
674
|
+
args: [{ selector: 'a[si-launchpad-app]', imports: [SiIconComponent, SiTranslatePipe], host: {
|
|
675
675
|
class: 'focus-inside',
|
|
676
676
|
'[class.active]': 'active()',
|
|
677
677
|
'[class.action]': 'action()'
|
|
@@ -697,29 +697,33 @@ class SiLaunchpadFactoryComponent {
|
|
|
697
697
|
* t(() => $localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`)
|
|
698
698
|
* ```
|
|
699
699
|
*/
|
|
700
|
-
closeText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`),
|
|
700
|
+
closeText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), /* @ts-ignore */
|
|
701
|
+
...(ngDevMode ? [{ debugName: "closeText" }] : /* istanbul ignore next */ []));
|
|
701
702
|
/**
|
|
702
703
|
* Title of the launchpad.
|
|
703
704
|
*
|
|
704
705
|
* @defaultValue
|
|
705
706
|
* ```
|
|
706
|
-
* t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch
|
|
707
|
+
* t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch app`)
|
|
707
708
|
* ```
|
|
708
709
|
*/
|
|
709
|
-
titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch
|
|
710
|
+
titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch app`), /* @ts-ignore */
|
|
711
|
+
...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
|
|
710
712
|
/**
|
|
711
713
|
* Subtitle of the launchpad.
|
|
712
714
|
* When not provided, no subtitle is displayed.
|
|
713
715
|
*/
|
|
714
|
-
subtitleText = input(
|
|
716
|
+
subtitleText = input(/* @ts-ignore */
|
|
717
|
+
...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : /* istanbul ignore next */ []));
|
|
715
718
|
/** All app items shown in the launchpad. */
|
|
716
|
-
apps = input.required(
|
|
719
|
+
apps = input.required(/* @ts-ignore */
|
|
720
|
+
...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
|
|
717
721
|
/**
|
|
718
722
|
* Allow the user to select favorite apps which will then be displayed at the top.
|
|
719
723
|
*
|
|
720
724
|
* @defaultValue false
|
|
721
725
|
*/
|
|
722
|
-
enableFavorites = input(false, { ...(ngDevMode ? { debugName: "enableFavorites" } : {}), transform: booleanAttribute });
|
|
726
|
+
enableFavorites = input(false, { ...(ngDevMode ? { debugName: "enableFavorites" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
723
727
|
/**
|
|
724
728
|
* Title of the favorite apps section.
|
|
725
729
|
*
|
|
@@ -728,7 +732,8 @@ class SiLaunchpadFactoryComponent {
|
|
|
728
732
|
* t(() => $localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`)
|
|
729
733
|
* ```
|
|
730
734
|
*/
|
|
731
|
-
favoriteAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`),
|
|
735
|
+
favoriteAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`), /* @ts-ignore */
|
|
736
|
+
...(ngDevMode ? [{ debugName: "favoriteAppsText" }] : /* istanbul ignore next */ []));
|
|
732
737
|
/**
|
|
733
738
|
* Title of the show more apps button.
|
|
734
739
|
*
|
|
@@ -737,7 +742,8 @@ class SiLaunchpadFactoryComponent {
|
|
|
737
742
|
* t(() => $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`)
|
|
738
743
|
* ```
|
|
739
744
|
*/
|
|
740
|
-
showMoreAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`),
|
|
745
|
+
showMoreAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), /* @ts-ignore */
|
|
746
|
+
...(ngDevMode ? [{ debugName: "showMoreAppsText" }] : /* istanbul ignore next */ []));
|
|
741
747
|
/**
|
|
742
748
|
* Title of the show less apps button.
|
|
743
749
|
*
|
|
@@ -746,7 +752,8 @@ class SiLaunchpadFactoryComponent {
|
|
|
746
752
|
* t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`)
|
|
747
753
|
* ```
|
|
748
754
|
*/
|
|
749
|
-
showLessAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`),
|
|
755
|
+
showLessAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`), /* @ts-ignore */
|
|
756
|
+
...(ngDevMode ? [{ debugName: "showLessAppsText" }] : /* istanbul ignore next */ []));
|
|
750
757
|
favoriteChange = output();
|
|
751
758
|
showAllApps = false;
|
|
752
759
|
categories = computed(() => {
|
|
@@ -766,11 +773,14 @@ class SiLaunchpadFactoryComponent {
|
|
|
766
773
|
categories.push({ name: '', apps: [...apps] });
|
|
767
774
|
}
|
|
768
775
|
return categories;
|
|
769
|
-
},
|
|
776
|
+
}, /* @ts-ignore */
|
|
777
|
+
...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
770
778
|
favorites = computed(() => this.apps()
|
|
771
779
|
.flatMap(app => ('apps' in app ? app.apps : app))
|
|
772
|
-
.filter(app => app.favorite),
|
|
773
|
-
|
|
780
|
+
.filter(app => app.favorite), /* @ts-ignore */
|
|
781
|
+
...(ngDevMode ? [{ debugName: "favorites" }] : /* istanbul ignore next */ []));
|
|
782
|
+
hasFavorites = computed(() => this.favorites().length > 0, /* @ts-ignore */
|
|
783
|
+
...(ngDevMode ? [{ debugName: "hasFavorites" }] : /* istanbul ignore next */ []));
|
|
774
784
|
icons = addIcons({ elementDown2, elementCancel });
|
|
775
785
|
activatedRoute = inject(ActivatedRoute, { optional: true });
|
|
776
786
|
header = inject(SiApplicationHeaderComponent);
|
|
@@ -794,10 +804,10 @@ class SiLaunchpadFactoryComponent {
|
|
|
794
804
|
return false;
|
|
795
805
|
}
|
|
796
806
|
}
|
|
797
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
807
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiLaunchpadFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiLaunchpadFactoryComponent, isStandalone: true, selector: "si-launchpad-factory", inputs: { closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, enableFavorites: { classPropertyName: "enableFavorites", publicName: "enableFavorites", isSignal: true, isRequired: false, transformFunction: null }, favoriteAppsText: { classPropertyName: "favoriteAppsText", publicName: "favoriteAppsText", isSignal: true, isRequired: false, transformFunction: null }, showMoreAppsText: { classPropertyName: "showMoreAppsText", publicName: "showMoreAppsText", isSignal: true, isRequired: false, transformFunction: null }, showLessAppsText: { classPropertyName: "showLessAppsText", publicName: "showLessAppsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favoriteChange: "favoriteChange" }, ngImport: i0, template: "<!-- temporary until old primary-navbar is removed -->\n<div\n class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n (keydown.escape)=\"escape()\"\n>\n @if (titleText()) {\n <div class=\"apps-header\">\n <span>\n <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n @if (subtitleText()) {\n <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n }\n </span>\n <button\n type=\"button\"\n class=\"btn btn-circle btn-tertiary-ghost\"\n [attr.aria-label]=\"closeText() | translate\"\n (click)=\"closeLaunchpad()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n }\n <div class=\"apps-scroll ms-n2 ps-2\">\n @for (category of categories(); track category.name; let first = $first) {\n @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n <div>\n @if (category.name) {\n <div\n class=\"si-h4 launchpad-category-title mb-6\"\n [class.mt-4]=\"first\"\n [class.mt-8]=\"!first\"\n >\n {{ category.name | translate }}\n </div>\n }\n <div class=\"d-flex flex-wrap gap-4\">\n @for (app of category.apps; track app) {\n @switch (app.type) {\n @case ('router-link') {\n <a\n si-launchpad-app\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"app.activeMatchOptions ?? { exact: false }\"\n [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n [external]=\"app.external\"\n [iconUrl]=\"app.iconUrl\"\n [iconClass]=\"app.iconClass\"\n [favorite]=\"!!app.favorite\"\n [routerLink]=\"app.routerLink\"\n [queryParams]=\"app.extras?.queryParams\"\n [queryParamsHandling]=\"app.extras?.queryParamsHandling\"\n [fragment]=\"app.extras?.fragment\"\n [state]=\"app.extras?.state\"\n [relativeTo]=\"app.extras?.relativeTo ?? this.activatedRoute\"\n [preserveFragment]=\"app.extras?.preserveFragment\"\n [skipLocationChange]=\"app.extras?.skipLocationChange\"\n [replaceUrl]=\"app.extras?.replaceUrl\"\n (favoriteChange)=\"toggleFavorite(app, $event)\"\n >\n <span app-name>{{ app.name | translate }}</span>\n <span app-systemName>{{ app.systemName | translate }}</span>\n </a>\n }\n @default {\n <!--fallback for existing apps that do not have a type defined -->\n <a\n si-launchpad-app\n [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n [favorite]=\"!!app.favorite\"\n [href]=\"app.href\"\n [target]=\"app.target ?? ''\"\n [active]=\"app.active\"\n [external]=\"app.external\"\n [iconUrl]=\"app.iconUrl\"\n [iconClass]=\"app.iconClass\"\n (favoriteChange)=\"toggleFavorite(app, $event)\"\n >\n <span app-name>{{ app.name | translate }}</span>\n <span app-systemName>{{ app.systemName | translate }}</span>\n </a>\n }\n }\n }\n </div>\n </div>\n }\n\n @if (enableFavorites() && first && hasFavorites()) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n [class.show]=\"showAllApps\"\n (click)=\"showAllApps = !showAllApps\"\n >\n <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n </button>\n }\n }\n </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (1.5rem + 25px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:16px;display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1)}@media(min-width:992px){.app-switcher{padding-block:16px;padding-inline:24px}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:16px;margin-inline-end:-16px}.btn-show-all{margin-block-start:16px;margin-block-end:8px}.btn-show-all.show{margin-block-end:24px}.btn-show-all.show:has(+div .launchpad-category-title){margin-block-end:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "component", type: SiLaunchpadAppComponent, selector: "a[si-launchpad-app]", inputs: ["external", "active", "enableFavoriteToggle", "favorite", "action", "iconUrl", "iconClass", "externalLinkText"], outputs: ["favoriteChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
799
809
|
}
|
|
800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiLaunchpadFactoryComponent, decorators: [{
|
|
801
811
|
type: Component,
|
|
802
812
|
args: [{ selector: 'si-launchpad-factory', imports: [
|
|
803
813
|
A11yModule,
|
|
@@ -807,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
807
817
|
SiIconComponent,
|
|
808
818
|
RouterLinkActive,
|
|
809
819
|
RouterLink
|
|
810
|
-
],
|
|
820
|
+
], template: "<!-- temporary until old primary-navbar is removed -->\n<div\n class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n (keydown.escape)=\"escape()\"\n>\n @if (titleText()) {\n <div class=\"apps-header\">\n <span>\n <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n @if (subtitleText()) {\n <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n }\n </span>\n <button\n type=\"button\"\n class=\"btn btn-circle btn-tertiary-ghost\"\n [attr.aria-label]=\"closeText() | translate\"\n (click)=\"closeLaunchpad()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n }\n <div class=\"apps-scroll ms-n2 ps-2\">\n @for (category of categories(); track category.name; let first = $first) {\n @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n <div>\n @if (category.name) {\n <div\n class=\"si-h4 launchpad-category-title mb-6\"\n [class.mt-4]=\"first\"\n [class.mt-8]=\"!first\"\n >\n {{ category.name | translate }}\n </div>\n }\n <div class=\"d-flex flex-wrap gap-4\">\n @for (app of category.apps; track app) {\n @switch (app.type) {\n @case ('router-link') {\n <a\n si-launchpad-app\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"app.activeMatchOptions ?? { exact: false }\"\n [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n [external]=\"app.external\"\n [iconUrl]=\"app.iconUrl\"\n [iconClass]=\"app.iconClass\"\n [favorite]=\"!!app.favorite\"\n [routerLink]=\"app.routerLink\"\n [queryParams]=\"app.extras?.queryParams\"\n [queryParamsHandling]=\"app.extras?.queryParamsHandling\"\n [fragment]=\"app.extras?.fragment\"\n [state]=\"app.extras?.state\"\n [relativeTo]=\"app.extras?.relativeTo ?? this.activatedRoute\"\n [preserveFragment]=\"app.extras?.preserveFragment\"\n [skipLocationChange]=\"app.extras?.skipLocationChange\"\n [replaceUrl]=\"app.extras?.replaceUrl\"\n (favoriteChange)=\"toggleFavorite(app, $event)\"\n >\n <span app-name>{{ app.name | translate }}</span>\n <span app-systemName>{{ app.systemName | translate }}</span>\n </a>\n }\n @default {\n <!--fallback for existing apps that do not have a type defined -->\n <a\n si-launchpad-app\n [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n [favorite]=\"!!app.favorite\"\n [href]=\"app.href\"\n [target]=\"app.target ?? ''\"\n [active]=\"app.active\"\n [external]=\"app.external\"\n [iconUrl]=\"app.iconUrl\"\n [iconClass]=\"app.iconClass\"\n (favoriteChange)=\"toggleFavorite(app, $event)\"\n >\n <span app-name>{{ app.name | translate }}</span>\n <span app-systemName>{{ app.systemName | translate }}</span>\n </a>\n }\n }\n }\n </div>\n </div>\n }\n\n @if (enableFavorites() && first && hasFavorites()) {\n <button\n type=\"button\"\n class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n [class.show]=\"showAllApps\"\n (click)=\"showAllApps = !showAllApps\"\n >\n <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n </button>\n }\n }\n </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (1.5rem + 25px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:16px;display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1)}@media(min-width:992px){.app-switcher{padding-block:16px;padding-inline:24px}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:16px;margin-inline-end:-16px}.btn-show-all{margin-block-start:16px;margin-block-end:8px}.btn-show-all.show{margin-block-end:24px}.btn-show-all.show:has(+div .launchpad-category-title){margin-block-end:0}\n"] }]
|
|
811
821
|
}], propDecorators: { closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], subtitleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleText", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], enableFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFavorites", required: false }] }], favoriteAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteAppsText", required: false }] }], showMoreAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreAppsText", required: false }] }], showLessAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessAppsText", required: false }] }], favoriteChange: [{ type: i0.Output, args: ["favoriteChange"] }] } });
|
|
812
822
|
|
|
813
823
|
/**
|
|
@@ -819,5 +829,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
819
829
|
* Generated bundle index. Do not edit.
|
|
820
830
|
*/
|
|
821
831
|
|
|
822
|
-
export { SiAccountDetailsComponent, SiApplicationHeaderComponent, SiHeaderAccountItemComponent, SiHeaderActionItemComponent, SiHeaderActionsDirective, SiHeaderBrandDirective, SiHeaderCollapsibleActionsComponent, SiHeaderLogoDirective, SiHeaderNavigationComponent, SiHeaderNavigationItemComponent, SiHeaderSelectionItemComponent,
|
|
832
|
+
export { SiAccountDetailsComponent, SiApplicationHeaderComponent, SiHeaderAccountItemComponent, SiHeaderActionItemComponent, SiHeaderActionsDirective, SiHeaderBrandDirective, SiHeaderCollapsibleActionsComponent, SiHeaderLogoDirective, SiHeaderNavigationComponent, SiHeaderNavigationItemComponent, SiHeaderSelectionItemComponent, SiLaunchpadFactoryComponent };
|
|
823
833
|
//# sourceMappingURL=siemens-element-ng-application-header.mjs.map
|