@inera/ids-angular 9.2.1 → 9.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/directives/click-outside.directive.d.ts +3 -3
- package/common/public-api.d.ts +1 -1
- package/components/accordion/accordion-header.component.d.ts +1 -1
- package/components/accordion/accordion.component.d.ts +5 -4
- package/components/alert/alert-header.component.d.ts +1 -1
- package/components/alert/alert.component.d.ts +2 -2
- package/components/box-link/box-link-button.component.d.ts +2 -2
- package/components/box-link/box-link.component.d.ts +2 -2
- package/components/breadcrumbs/breadcrumbs.component.d.ts +3 -4
- package/components/breadcrumbs/crumb.component.d.ts +1 -1
- package/components/carousel/carousel-item/carousel-item.component.d.ts +1 -1
- package/components/carousel/carousel.component.d.ts +4 -4
- package/components/control-button/control-button.directive.d.ts +5 -0
- package/components/control-button/index.d.ts +5 -0
- package/components/control-button/public-api.d.ts +1 -0
- package/components/dialog/dialog.component.d.ts +4 -4
- package/components/dialog/dialog.module.d.ts +12 -0
- package/components/dialog/public-api.d.ts +1 -0
- package/components/district-selector/district-selector.component.d.ts +14 -0
- package/components/district-selector/index.d.ts +5 -0
- package/components/district-selector/public-api.d.ts +1 -0
- package/components/dropdown/dropdown.component.d.ts +1 -1
- package/components/footer-1177/footer-1177-col.component.d.ts +4 -4
- package/components/footer-1177/footer-1177.component.d.ts +6 -4
- package/components/footer-1177-admin/footer-1177-admin-col.component.d.ts +4 -4
- package/components/footer-1177-admin/footer-1177-admin.component.d.ts +5 -4
- package/components/footer-1177-pro/footer-1177-pro-col.component.d.ts +4 -4
- package/components/footer-1177-pro/footer-1177-pro.component.d.ts +6 -4
- package/components/footer-inera/footer-inera-col.component.d.ts +4 -4
- package/components/footer-inera/footer-inera.component.d.ts +5 -4
- package/components/footer-inera-admin/footer-inera-admin-col.component.d.ts +4 -4
- package/components/footer-inera-admin/footer-inera-admin.component.d.ts +5 -4
- package/components/footer-inera-general/footer-inera-general-col.component.d.ts +4 -4
- package/components/footer-inera-general/footer-inera-general.component.d.ts +6 -4
- package/components/form/checkbox-group/checkbox-group.component.d.ts +4 -4
- package/components/form/input/input-clear-button.component.d.ts +5 -0
- package/components/form/input/input.component.d.ts +7 -3
- package/components/form/input/public-api.d.ts +1 -0
- package/components/form/label-subtitle/index.d.ts +5 -0
- package/components/form/label-subtitle/label-subtitle.component.d.ts +5 -0
- package/components/form/label-subtitle/public-api.d.ts +1 -0
- package/components/form/radio/radio-group.component.d.ts +4 -4
- package/components/form/radio/radio.component.d.ts +1 -1
- package/components/form/radio-button/radio-button-group.component.d.ts +1 -2
- package/components/form/range/range.component.d.ts +1 -1
- package/components/form/select/select.component.d.ts +1 -1
- package/components/form/select-multiple/select-multiple.component.d.ts +3 -3
- package/components/form/spinner/spinner.component.d.ts +2 -1
- package/components/form/textarea/textarea.component.d.ts +1 -1
- package/components/form/time/time.component.d.ts +1 -1
- package/components/global-alert/global-alert-actions.component.d.ts +1 -1
- package/components/global-alert/global-alert-header.component.d.ts +1 -1
- package/components/global-alert/global-alert.component.d.ts +2 -2
- package/components/header-1177/avatar/header-1177-avatar.component.d.ts +1 -1
- package/components/header-1177/header-1177.component.d.ts +6 -7
- package/components/header-1177/nav/header-1177-nav.component.d.ts +1 -1
- package/components/header-1177/nav-item/header-1177-nav-item.component.d.ts +5 -5
- package/components/header-1177/region-picker/header-1177-region-picker.component.d.ts +4 -4
- package/components/header-1177/region-picker-mobile/header-1177-region-picker-mobile.component.d.ts +3 -3
- package/components/header-1177-admin/avatar/header-1177-admin-avatar.component.d.ts +1 -1
- package/components/header-1177-admin/avatar-mobile/header-1177-admin-avatar-mobile.component.d.ts +1 -1
- package/components/header-1177-admin/header-1177-admin.component.d.ts +3 -3
- package/components/header-1177-admin/nav/header-1177-admin-nav.component.d.ts +6 -4
- package/components/header-1177-admin/nav-item/header-1177-admin-nav-item.component.d.ts +5 -5
- package/components/header-1177-pro/avatar/header-1177-pro-avatar.component.d.ts +1 -1
- package/components/header-1177-pro/avatar-mobile/header-1177-pro-avatar-mobile.component.d.ts +1 -1
- package/components/header-1177-pro/header-1177-pro.component.d.ts +3 -3
- package/components/header-1177-pro/nav/header-1177-pro-nav.component.d.ts +6 -4
- package/components/header-1177-pro/nav-item/header-1177-pro-nav-item.component.d.ts +5 -5
- package/components/header-1177-pro/region-picker/header-1177-pro-region-picker.component.d.ts +4 -4
- package/components/header-1177-pro/region-picker-mobile/header-1177-pro-region-picker-mobile.component.d.ts +1 -1
- package/components/header-inera/header-inera.component.d.ts +5 -6
- package/components/header-inera/nav/header-inera-nav.component.d.ts +3 -5
- package/components/header-inera/nav-item/header-inera-nav-item.component.d.ts +5 -5
- package/components/header-inera-admin/avatar/header-inera-admin-avatar.component.d.ts +1 -1
- package/components/header-inera-admin/avatar-mobile/header-inera-admin-avatar-mobile.component.d.ts +1 -1
- package/components/header-inera-admin/header-inera-admin.component.d.ts +12 -13
- package/components/header-inera-admin/header-inera-admin.module.d.ts +1 -1
- package/components/header-inera-admin/nav/header-inera-admin-nav.component.d.ts +6 -4
- package/components/header-inera-admin/nav-item/header-inera-admin-nav-item.component.d.ts +4 -4
- package/components/header-inera-admin/public-api.d.ts +12 -12
- package/components/header-inera-general/avatar/header-inera-general-avatar.component.d.ts +26 -0
- package/components/header-inera-general/avatar-mobile/header-inera-general-avatar-mobile.component.d.ts +26 -0
- package/components/header-inera-general/header-inera-general.component.d.ts +10 -6
- package/components/header-inera-general/header-inera-general.module.d.ts +11 -8
- package/components/header-inera-general/item/header-inera-general-item.component.d.ts +3 -1
- package/components/header-inera-general/nav/header-inera-general-nav.component.d.ts +1 -1
- package/components/header-inera-general/nav-item/header-inera-general-nav-item.component.d.ts +5 -5
- package/components/header-inera-general/nav-item-mobile/header-inera-general-nav-item-mobile.component.d.ts +8 -0
- package/components/header-inera-general/nav-mobile/header-inera-general-nav-mobile.component.d.ts +7 -0
- package/components/header-inera-general/public-api.d.ts +5 -1
- package/components/message-avatar/index.d.ts +5 -0
- package/components/message-avatar/message-avatar.component.d.ts +10 -0
- package/components/message-avatar/public-api.d.ts +1 -0
- package/components/mobile/menu/item/mobile-menu-item.component.d.ts +3 -3
- package/components/mobile/menu/mobile-menu.component.d.ts +1 -2
- package/components/navigation/content/navigation-content-item.component.d.ts +24 -0
- package/components/navigation/content/navigation-content-link.component.d.ts +1 -1
- package/components/navigation/content/navigation-content.component.d.ts +6 -3
- package/components/navigation/content/public-api.d.ts +1 -0
- package/components/navigation/local/navigation-local-link.component.d.ts +1 -1
- package/components/navigation/local/navigation-local.component.d.ts +1 -2
- package/components/popover/popover.component.d.ts +4 -4
- package/components/puff-list/puff-list-item.component.d.ts +1 -1
- package/components/puff-list/puff-list.component.d.ts +1 -2
- package/components/side-menu/side-menu.component.d.ts +4 -2
- package/components/side-panel/side-panel.component.d.ts +7 -6
- package/components/stepper/step.component.d.ts +2 -0
- package/components/stepper/stepper.component.d.ts +2 -2
- package/components/tabs/tab-group.component.d.ts +3 -2
- package/components/tabs/tab.component.d.ts +2 -2
- package/components/tag/tag.component.d.ts +1 -1
- package/components/tooltip/tooltip.component.d.ts +2 -2
- package/fesm2022/inera-ids-angular-common.mjs +31 -32
- package/fesm2022/inera-ids-angular-common.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-accordion.mjs +23 -32
- package/fesm2022/inera-ids-angular-components-accordion.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-action-link.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-alert.mjs +12 -18
- package/fesm2022/inera-ids-angular-components-alert.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-badge.mjs +4 -4
- package/fesm2022/inera-ids-angular-components-badge.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-box-link.mjs +19 -23
- package/fesm2022/inera-ids-angular-components-box-link.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-breadcrumbs.mjs +19 -30
- package/fesm2022/inera-ids-angular-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-button-group.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-button.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-card.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-carousel.mjs +20 -27
- package/fesm2022/inera-ids-angular-components-carousel.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-control-button.mjs +24 -0
- package/fesm2022/inera-ids-angular-components-control-button.mjs.map +1 -0
- package/fesm2022/inera-ids-angular-components-date-label.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-dialog.mjs +65 -35
- package/fesm2022/inera-ids-angular-components-dialog.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-district-selector.mjs +45 -0
- package/fesm2022/inera-ids-angular-components-district-selector.mjs.map +1 -0
- package/fesm2022/inera-ids-angular-components-dropdown.mjs +16 -19
- package/fesm2022/inera-ids-angular-components-dropdown.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-1177-admin.mjs +48 -55
- package/fesm2022/inera-ids-angular-components-footer-1177-admin.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-1177-pro.mjs +49 -55
- package/fesm2022/inera-ids-angular-components-footer-1177-pro.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-1177.mjs +49 -55
- package/fesm2022/inera-ids-angular-components-footer-1177.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-inera-admin.mjs +51 -58
- package/fesm2022/inera-ids-angular-components-footer-inera-admin.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-inera-general.mjs +53 -58
- package/fesm2022/inera-ids-angular-components-footer-inera-general.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-footer-inera.mjs +51 -58
- package/fesm2022/inera-ids-angular-components-footer-inera.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-check-button.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-form-checkbox-group.mjs +11 -17
- package/fesm2022/inera-ids-angular-components-form-checkbox-group.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-checkbox.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-form-darkmode-toggle.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-form-error-message.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-form-input.mjs +66 -42
- package/fesm2022/inera-ids-angular-components-form-input.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-label-subtitle.mjs +25 -0
- package/fesm2022/inera-ids-angular-components-form-label-subtitle.mjs.map +1 -0
- package/fesm2022/inera-ids-angular-components-form-radio-button.mjs +11 -14
- package/fesm2022/inera-ids-angular-components-form-radio-button.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-radio.mjs +15 -21
- package/fesm2022/inera-ids-angular-components-form-radio.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-range.mjs +4 -4
- package/fesm2022/inera-ids-angular-components-form-range.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-select-multiple.mjs +10 -13
- package/fesm2022/inera-ids-angular-components-form-select-multiple.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-select.mjs +4 -4
- package/fesm2022/inera-ids-angular-components-form-select.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-spinner.mjs +7 -4
- package/fesm2022/inera-ids-angular-components-form-spinner.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-textarea.mjs +7 -7
- package/fesm2022/inera-ids-angular-components-form-textarea.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-time.mjs +4 -4
- package/fesm2022/inera-ids-angular-components-form-time.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-form-toggle.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-global-alert.mjs +17 -29
- package/fesm2022/inera-ids-angular-components-global-alert.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-grid-column.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid-container.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid-layout-grid-column.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid-layout-grid-container.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid-layout-grid-row.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid-layout.mjs +9 -9
- package/fesm2022/inera-ids-angular-components-grid-row.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-grid.mjs +9 -9
- package/fesm2022/inera-ids-angular-components-header-1177-admin.mjs +86 -108
- package/fesm2022/inera-ids-angular-components-header-1177-admin.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-1177-pro.mjs +123 -138
- package/fesm2022/inera-ids-angular-components-header-1177-pro.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-1177.mjs +142 -180
- package/fesm2022/inera-ids-angular-components-header-1177.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-inera-admin.mjs +101 -133
- package/fesm2022/inera-ids-angular-components-header-inera-admin.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-inera-general.mjs +391 -80
- package/fesm2022/inera-ids-angular-components-header-inera-general.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-inera.mjs +57 -86
- package/fesm2022/inera-ids-angular-components-header-inera.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-header-patient.mjs +6 -6
- package/fesm2022/inera-ids-angular-components-link.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-message-avatar.mjs +35 -0
- package/fesm2022/inera-ids-angular-components-message-avatar.mjs.map +1 -0
- package/fesm2022/inera-ids-angular-components-mobile-menu-item.mjs +8 -14
- package/fesm2022/inera-ids-angular-components-mobile-menu-item.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-mobile-menu.mjs +17 -26
- package/fesm2022/inera-ids-angular-components-mobile-menu.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-navigation-content.mjs +79 -18
- package/fesm2022/inera-ids-angular-components-navigation-content.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-navigation-local.mjs +11 -17
- package/fesm2022/inera-ids-angular-components-navigation-local.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-notification-badge.mjs +5 -5
- package/fesm2022/inera-ids-angular-components-notification-badge.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-pagination-data-pagination.mjs +6 -6
- package/fesm2022/inera-ids-angular-components-pagination-list-pagination.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-popover.mjs +124 -79
- package/fesm2022/inera-ids-angular-components-popover.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-progressbar.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-puff-list.mjs +39 -45
- package/fesm2022/inera-ids-angular-components-puff-list.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-region-icon.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-side-menu.mjs +38 -28
- package/fesm2022/inera-ids-angular-components-side-menu.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-side-panel.mjs +103 -91
- package/fesm2022/inera-ids-angular-components-side-panel.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-stepper.mjs +24 -20
- package/fesm2022/inera-ids-angular-components-stepper.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-tabs.mjs +18 -26
- package/fesm2022/inera-ids-angular-components-tabs.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-tag.mjs +10 -10
- package/fesm2022/inera-ids-angular-components-tag.mjs.map +1 -1
- package/fesm2022/inera-ids-angular-components-toolbar.mjs +3 -3
- package/fesm2022/inera-ids-angular-components-tooltip.mjs +27 -33
- package/fesm2022/inera-ids-angular-components-tooltip.mjs.map +1 -1
- package/package.json +58 -42
- /package/common/services/{use-id.service.ts.d.ts → use-id.service.d.ts} +0 -0
- /package/components/header-inera-admin/nav-item-mobile/{header-inera-admin-nav-item-mobile.d.ts → header-inera-admin-nav-item-mobile.component.d.ts} +0 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, booleanAttribute, Output, Input, Component,
|
|
2
|
+
import { EventEmitter, inject, booleanAttribute, Output, Input, Component, contentChildren, NgModule } from '@angular/core';
|
|
3
|
+
import { IDUseIdService } from '@inera/ids-angular/common';
|
|
3
4
|
|
|
4
5
|
class IDStepComponent {
|
|
5
6
|
state = '';
|
|
@@ -11,6 +12,8 @@ class IDStepComponent {
|
|
|
11
12
|
closed = new EventEmitter();
|
|
12
13
|
opened = new EventEmitter();
|
|
13
14
|
expandedChange = new EventEmitter();
|
|
15
|
+
idService = inject(IDUseIdService);
|
|
16
|
+
contentId = this.idService.generateId('step');
|
|
14
17
|
toggleExpansion() {
|
|
15
18
|
if (this.expanded) {
|
|
16
19
|
this.hasClosed();
|
|
@@ -29,12 +32,13 @@ class IDStepComponent {
|
|
|
29
32
|
this.expandedChange.emit(true);
|
|
30
33
|
this.opened.emit();
|
|
31
34
|
}
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDStepComponent, isStandalone: true, selector: "id-step", inputs: { state: "state", step: "step", srIndicatorText: "srIndicatorText", subtitle: "subtitle", disabled: ["disabled", "disabled", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { classAttribute: "ids-step" }, ngImport: i0, template: `
|
|
34
37
|
<button
|
|
35
38
|
class="ids-step__button focusable"
|
|
36
39
|
[class.ids-step__button--disabled]="disabled"
|
|
37
40
|
[disabled]="disabled"
|
|
41
|
+
[attr.aria-controls]="contentId"
|
|
38
42
|
(click)="toggleExpansion()"
|
|
39
43
|
>
|
|
40
44
|
<div class="ids-step__button-inner">
|
|
@@ -65,6 +69,7 @@ class IDStepComponent {
|
|
|
65
69
|
</div>
|
|
66
70
|
</button>
|
|
67
71
|
<div
|
|
72
|
+
[id]="contentId"
|
|
68
73
|
class="ids-step__content"
|
|
69
74
|
[class.ids-step__content--expanded]="expanded"
|
|
70
75
|
>
|
|
@@ -72,7 +77,7 @@ class IDStepComponent {
|
|
|
72
77
|
</div>
|
|
73
78
|
`, isInline: true });
|
|
74
79
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepComponent, decorators: [{
|
|
76
81
|
type: Component,
|
|
77
82
|
args: [{
|
|
78
83
|
selector: 'id-step',
|
|
@@ -81,6 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
81
86
|
class="ids-step__button focusable"
|
|
82
87
|
[class.ids-step__button--disabled]="disabled"
|
|
83
88
|
[disabled]="disabled"
|
|
89
|
+
[attr.aria-controls]="contentId"
|
|
84
90
|
(click)="toggleExpansion()"
|
|
85
91
|
>
|
|
86
92
|
<div class="ids-step__button-inner">
|
|
@@ -111,6 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
111
117
|
</div>
|
|
112
118
|
</button>
|
|
113
119
|
<div
|
|
120
|
+
[id]="contentId"
|
|
114
121
|
class="ids-step__content"
|
|
115
122
|
[class.ids-step__content--expanded]="expanded"
|
|
116
123
|
>
|
|
@@ -145,18 +152,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
145
152
|
}] } });
|
|
146
153
|
|
|
147
154
|
class IDStepperComponent {
|
|
148
|
-
steps;
|
|
155
|
+
steps = contentChildren(IDStepComponent);
|
|
149
156
|
ngAfterContentInit() {
|
|
150
|
-
this.steps
|
|
157
|
+
this.steps().forEach((step, index) => {
|
|
151
158
|
if (!step.step) {
|
|
152
159
|
step.step = "" + (index + 1);
|
|
153
160
|
}
|
|
154
161
|
});
|
|
155
162
|
}
|
|
156
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: IDStepperComponent, isStandalone: true, selector: "id-stepper", host: { classAttribute: "ids-stepper" }, queries: [{ propertyName: "steps", predicate: IDStepComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
|
|
158
165
|
}
|
|
159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepperComponent, decorators: [{
|
|
160
167
|
type: Component,
|
|
161
168
|
args: [{
|
|
162
169
|
selector: "id-stepper",
|
|
@@ -166,16 +173,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
166
173
|
class: 'ids-stepper'
|
|
167
174
|
}
|
|
168
175
|
}]
|
|
169
|
-
}]
|
|
170
|
-
type: ContentChildren,
|
|
171
|
-
args: [IDStepComponent]
|
|
172
|
-
}] } });
|
|
176
|
+
}] });
|
|
173
177
|
|
|
174
178
|
class IDStepHeaderComponent {
|
|
175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: IDStepHeaderComponent, isStandalone: true, selector: "id-step-header", host: { classAttribute: "ids-step__headline" }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
|
|
177
181
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepHeaderComponent, decorators: [{
|
|
179
183
|
type: Component,
|
|
180
184
|
args: [{
|
|
181
185
|
selector: "id-step-header",
|
|
@@ -188,15 +192,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
188
192
|
}] });
|
|
189
193
|
|
|
190
194
|
class IDStepperModule {
|
|
191
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
192
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
195
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
196
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: IDStepperModule, imports: [IDStepComponent,
|
|
193
197
|
IDStepperComponent,
|
|
194
198
|
IDStepHeaderComponent], exports: [IDStepComponent,
|
|
195
199
|
IDStepperComponent,
|
|
196
200
|
IDStepHeaderComponent] });
|
|
197
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
201
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepperModule });
|
|
198
202
|
}
|
|
199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDStepperModule, decorators: [{
|
|
200
204
|
type: NgModule,
|
|
201
205
|
args: [{
|
|
202
206
|
imports: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inera-ids-angular-components-stepper.mjs","sources":["../../../projects/ids-angular/components/stepper/step.component.ts","../../../projects/ids-angular/components/stepper/stepper.component.ts","../../../projects/ids-angular/components/stepper/step-header.component.ts","../../../projects/ids-angular/components/stepper/stepper.module.ts","../../../projects/ids-angular/components/stepper/inera-ids-angular-components-stepper.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';\n
|
|
1
|
+
{"version":3,"file":"inera-ids-angular-components-stepper.mjs","sources":["../../../projects/ids-angular/components/stepper/step.component.ts","../../../projects/ids-angular/components/stepper/stepper.component.ts","../../../projects/ids-angular/components/stepper/step-header.component.ts","../../../projects/ids-angular/components/stepper/stepper.module.ts","../../../projects/ids-angular/components/stepper/inera-ids-angular-components-stepper.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output, booleanAttribute, inject } from '@angular/core';\nimport { IDUseIdService } from '@inera/ids-angular/common';\n@Component({\n selector: 'id-step',\n template: `\n <button\n class=\"ids-step__button focusable\"\n [class.ids-step__button--disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggleExpansion()\"\n >\n <div class=\"ids-step__button-inner\">\n <div class=\"ids-step__indicator-wrapper\">\n <div\n [attr.aria-label]=\"this.srIndicatorText || this.step\"\n [attr.role-img-alt]=\"this.srIndicatorText || this.step\"\n role=\"img\"\n class=\"ids-step__indicator ids-step__indicator--{{ this.state }}\"\n >\n @if (this.state !== 'valid' && this.state !== 'invalid') {\n {{ step }}\n }\n </div>\n </div>\n <div class=\"ids-step__button-text\">\n <div class=\"ids-step__headline-label\">\n <ng-content select=\"id-step-header\"></ng-content>\n @if (subtitle) {\n <div class=\"ids-step__subtitle\">{{ subtitle }}</div>\n }\n </div>\n <div\n class=\"ids-step__chevron\"\n [class.ids-step__chevron--expanded]=\"expanded\"\n ></div>\n </div>\n </div>\n </button>\n <div\n [id]=\"contentId\"\n class=\"ids-step__content\"\n [class.ids-step__content--expanded]=\"expanded\"\n >\n <ng-content></ng-content>\n </div>\n `,\n host: {\n class: 'ids-step',\n },\n standalone: true,\n})\nexport class IDStepComponent {\n @Input() state: '' | 'valid' | 'invalid' | 'selected' = '';\n @Input() step = '';\n @Input() srIndicatorText = '';\n @Input() subtitle = '';\n @Input({ transform: booleanAttribute }) disabled = false;\n @Input({ transform: booleanAttribute }) expanded = false;\n\n @Output() closed: EventEmitter<Event> = new EventEmitter();\n @Output() opened: EventEmitter<Event> = new EventEmitter();\n @Output() expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n private idService = inject(IDUseIdService);\n contentId = this.idService.generateId('step');\n\n toggleExpansion() {\n if (this.expanded) {\n this.hasClosed();\n } else {\n this.hasExpanded();\n }\n }\n\n hasClosed() {\n this.expanded = false;\n this.expandedChange.emit(false);\n this.closed.emit();\n }\n hasExpanded() {\n this.expanded = true;\n this.expandedChange.emit(true);\n this.opened.emit();\n }\n}\n","import { AfterContentInit, Component, contentChildren } from '@angular/core';\nimport { IDStepComponent } from \"./step.component\";\n\n@Component({\n selector: \"id-stepper\",\n template: \"<ng-content></ng-content>\",\n standalone: true,\n host: {\n class: 'ids-stepper'\n }\n})\nexport class IDStepperComponent implements AfterContentInit {\n\n steps = contentChildren(IDStepComponent);\n\n ngAfterContentInit(): void {\n this.steps().forEach((step, index) => {\n if(!step.step) {\n step.step = \"\"+(index+1);\n }\n })\n }\n}\n","import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"id-step-header\",\n template: \"<ng-content></ng-content>\",\n standalone: true,\n host: {\n class: 'ids-step__headline'\n }\n})\nexport class IDStepHeaderComponent {}\n","import { NgModule } from '@angular/core';\n\nimport { IDStepComponent } from './step.component';\nimport { IDStepperComponent } from './stepper.component';\nimport { IDStepHeaderComponent } from './step-header.component';\n\n@NgModule({\n imports: [\n IDStepComponent,\n IDStepperComponent,\n IDStepHeaderComponent\n ],\n exports: [\n IDStepComponent,\n IDStepperComponent,\n IDStepHeaderComponent\n ],\n})\nexport class IDStepperModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { contentChild, viewChild, TemplateRef, inject, Input, Component, contentChildren, ElementRef, booleanAttribute } from '@angular/core';
|
|
3
3
|
import { IDUseIdService } from '@inera/ids-angular/common';
|
|
4
4
|
import { NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { IDNotificationBadgeComponent } from '@inera/ids-angular/components/notification-badge';
|
|
@@ -12,20 +12,20 @@ class IDTabComponent {
|
|
|
12
12
|
selected;
|
|
13
13
|
noTabindex;
|
|
14
14
|
compact;
|
|
15
|
-
labelTemplate;
|
|
16
|
-
content;
|
|
15
|
+
labelTemplate = contentChild('idTabLabel');
|
|
16
|
+
content = viewChild.required(TemplateRef);
|
|
17
17
|
idService = inject(IDUseIdService);
|
|
18
18
|
ngOnInit() {
|
|
19
19
|
if (!this.tabId) {
|
|
20
20
|
this.tabId = this.idService.generateId('tab-id');
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: IDTabComponent, isStandalone: true, selector: "id-tab", inputs: { tabId: "tabId", label: "label", notices: "notices", icon: "icon", selected: "selected", noTabindex: "noTabindex", compact: "compact" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["idTabLabel"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
25
25
|
<ng-template><ng-content></ng-content></ng-template>
|
|
26
26
|
`, isInline: true });
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTabComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{
|
|
31
31
|
selector: 'id-tab',
|
|
@@ -48,20 +48,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
48
48
|
type: Input
|
|
49
49
|
}], compact: [{
|
|
50
50
|
type: Input
|
|
51
|
-
}], labelTemplate: [{
|
|
52
|
-
type: ContentChild,
|
|
53
|
-
args: ['idTabLabel', { read: TemplateRef }]
|
|
54
|
-
}], content: [{
|
|
55
|
-
type: ViewChild,
|
|
56
|
-
args: [TemplateRef, { static: true }]
|
|
57
51
|
}] } });
|
|
58
52
|
|
|
59
53
|
class IDTabGroupComponent {
|
|
60
|
-
tabs;
|
|
54
|
+
tabs = contentChildren(IDTabComponent);
|
|
61
55
|
selectedIndex = 0;
|
|
62
56
|
focusedIndex = 0;
|
|
63
57
|
ngAfterContentInit() {
|
|
64
|
-
const tabsArray = this.tabs
|
|
58
|
+
const tabsArray = this.tabs();
|
|
65
59
|
const selectedTabIndex = tabsArray.findIndex((tab) => tab.selected);
|
|
66
60
|
this.selectedIndex = selectedTabIndex >= 0 ? selectedTabIndex : 0;
|
|
67
61
|
this.focusedIndex = this.selectedIndex;
|
|
@@ -72,18 +66,19 @@ class IDTabGroupComponent {
|
|
|
72
66
|
light = false;
|
|
73
67
|
compact = false;
|
|
74
68
|
selectLabel;
|
|
69
|
+
ref = inject(ElementRef);
|
|
75
70
|
idService = inject(IDUseIdService);
|
|
76
71
|
selectId = this.idService.generateId('tab-group');
|
|
77
72
|
selectTab(i) {
|
|
78
73
|
this.selectedIndex = i;
|
|
79
74
|
this.focusedIndex = i;
|
|
80
|
-
this.tabs.forEach((tab, index) => {
|
|
75
|
+
this.tabs().forEach((tab, index) => {
|
|
81
76
|
tab.selected = index === i;
|
|
82
77
|
});
|
|
83
78
|
}
|
|
84
79
|
onKeydown(event) {
|
|
85
80
|
const key = event.key;
|
|
86
|
-
const lastIndex = this.tabs.length - 1;
|
|
81
|
+
const lastIndex = this.tabs().length - 1;
|
|
87
82
|
let newIndex = this.focusedIndex;
|
|
88
83
|
if (key === 'ArrowRight') {
|
|
89
84
|
event.preventDefault();
|
|
@@ -110,13 +105,13 @@ class IDTabGroupComponent {
|
|
|
110
105
|
if (newIndex !== this.focusedIndex) {
|
|
111
106
|
this.focusedIndex = newIndex;
|
|
112
107
|
queueMicrotask(() => {
|
|
113
|
-
const tabs =
|
|
108
|
+
const tabs = this.ref.nativeElement.querySelectorAll('.ids-tab[role="tab"]');
|
|
114
109
|
tabs[newIndex]?.focus();
|
|
115
110
|
});
|
|
116
111
|
}
|
|
117
112
|
}
|
|
118
113
|
getTabPanelTabIndex(tabIndex) {
|
|
119
|
-
const tab = this.tabs
|
|
114
|
+
const tab = this.tabs()[tabIndex];
|
|
120
115
|
if (!tab)
|
|
121
116
|
return 0;
|
|
122
117
|
if (tab.noTabindex)
|
|
@@ -135,20 +130,17 @@ class IDTabGroupComponent {
|
|
|
135
130
|
const hasFocusable = panelEl.querySelector(focusableSelectors) !== null;
|
|
136
131
|
return hasFocusable ? -1 : 0;
|
|
137
132
|
}
|
|
138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
133
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDTabGroupComponent, isStandalone: true, selector: "id-tab-group", inputs: { responsive: "responsive", unresponsive: ["unresponsive", "unresponsive", booleanAttribute], light: ["light", "light", booleanAttribute], compact: ["compact", "compact", booleanAttribute], selectLabel: "selectLabel" }, host: { properties: { "class.ids-tabs--responsive-on-s": "responsive === 's'", "class.ids-tabs--unresponsive": "unresponsive" }, classAttribute: "ids-tabs" }, queries: [{ propertyName: "tabs", predicate: IDTabComponent, isSignal: true }], ngImport: i0, template: "<div class=\"ids-tabs__select\">\n <label\n [htmlFor]=\"selectId\"\n class=\"ids-label\"\n >\n {{ selectLabel || \"V\u00E4lj flik\" }}\n </label>\n <div class=\"ids-select__wrapper\">\n <select\n [id]=\"selectId\"\n (change)=\"selectTab(+$any($event.target).value)\"\n class=\"ids-select__select\"\n [class.ids-input--light]=\"light\"\n >\n @for (tab of tabs(); track tab; let i = $index) {\n <option\n [value]=\"i\"\n [selected]=\"i === selectedIndex\"\n >\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n ({{ tab.notices }})\n }\n </option>\n }\n </select>\n </div>\n</div>\n\n<div\n class=\"ids-tabs__tabs\"\n role=\"tablist\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n role=\"tab\"\n (click)=\"selectTab(i)\"\n class=\"ids-tab\"\n [class.ids-tab--selected]=\"i === selectedIndex\"\n [attr.tabindex]=\"i === focusedIndex ? 0 : -1\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.id]=\"tab.tabId\"\n >\n <div class=\"ids-tab__label\">\n @if (tab.labelTemplate()) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate() ?? null\"></ng-container>\n } @else {\n @if (tab.icon) {\n <span class=\"ids-tab-icon ids-icon-{{ tab.icon }}\"></span>\n }\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n <id-notification-badge class=\"ids-ml-2\">{{ tab.notices }}</id-notification-badge>\n }\n }\n </div>\n </button>\n }\n</div>\n\n<div class=\"ids-tabs__panels\">\n <div\n role=\"tabpanel\"\n [attr.tabindex]=\"getTabPanelTabIndex(selectedIndex)\"\n [attr.aria-labelledby]=\"tabs()[selectedIndex]?.tabId\"\n [class.ids-tab-panel--compact]=\"compact || tabs()[selectedIndex]?.compact\"\n class=\"ids-tab-panel ids-tab-panel--selected\"\n >\n <ng-container [ngTemplateOutlet]=\"tabs()[selectedIndex]?.content() ?? null\"></ng-container>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IDNotificationBadgeComponent, selector: "id-notification-badge", inputs: ["type", "icon"] }] });
|
|
140
135
|
}
|
|
141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTabGroupComponent, decorators: [{
|
|
142
137
|
type: Component,
|
|
143
138
|
args: [{ selector: 'id-tab-group', standalone: true, imports: [NgTemplateOutlet, IDNotificationBadgeComponent], host: {
|
|
144
139
|
class: 'ids-tabs',
|
|
145
140
|
'[class.ids-tabs--responsive-on-s]': "responsive === 's'",
|
|
146
141
|
'[class.ids-tabs--unresponsive]': 'unresponsive',
|
|
147
|
-
}, template: "<div class=\"ids-tabs__select\">\n <label\n [htmlFor]=\"selectId\"\n class=\"ids-label\"\n >\n {{ selectLabel || \"V\u00E4lj flik\" }}\n </label>\n <div class=\"ids-select__wrapper\">\n <select\n [id]=\"selectId\"\n (change)=\"selectTab(+$any($event.target).value)\"\n class=\"ids-select__select\"\n [class.ids-input--light]=\"light\"\n >\n @for (tab of tabs; track tab; let i = $index) {\n <option\n [value]=\"i\"\n [selected]=\"i === selectedIndex\"\n >\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n ({{ tab.notices }})\n }\n </option>\n }\n </select>\n </div>\n</div>\n\n<div\n class=\"ids-tabs__tabs\"\n role=\"tablist\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs; track tab; let i = $index) {\n <button\n role=\"tab\"\n (click)=\"selectTab(i)\"\n class=\"ids-tab\"\n [class.ids-tab--selected]=\"i === selectedIndex\"\n [attr.tabindex]=\"i === focusedIndex ? 0 : -1\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.id]=\"tab.tabId\"\n >\n <div class=\"ids-tab__label\">\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\"></ng-container>\n } @else {\n @if (tab.icon) {\n <span class=\"ids-tab-icon ids-icon-{{ tab.icon }}\"></span>\n }\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n <id-notification-badge class=\"ids-ml-2\">{{ tab.notices }}</id-notification-badge>\n }\n }\n </div>\n </button>\n }\n</div>\n\n<div class=\"ids-tabs__panels\">\n <div\n role=\"tabpanel\"\n [attr.tabindex]=\"getTabPanelTabIndex(selectedIndex)\"\n [attr.aria-labelledby]=\"tabs
|
|
148
|
-
}], propDecorators: {
|
|
149
|
-
type: ContentChildren,
|
|
150
|
-
args: [IDTabComponent]
|
|
151
|
-
}], responsive: [{
|
|
142
|
+
}, template: "<div class=\"ids-tabs__select\">\n <label\n [htmlFor]=\"selectId\"\n class=\"ids-label\"\n >\n {{ selectLabel || \"V\u00E4lj flik\" }}\n </label>\n <div class=\"ids-select__wrapper\">\n <select\n [id]=\"selectId\"\n (change)=\"selectTab(+$any($event.target).value)\"\n class=\"ids-select__select\"\n [class.ids-input--light]=\"light\"\n >\n @for (tab of tabs(); track tab; let i = $index) {\n <option\n [value]=\"i\"\n [selected]=\"i === selectedIndex\"\n >\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n ({{ tab.notices }})\n }\n </option>\n }\n </select>\n </div>\n</div>\n\n<div\n class=\"ids-tabs__tabs\"\n role=\"tablist\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n role=\"tab\"\n (click)=\"selectTab(i)\"\n class=\"ids-tab\"\n [class.ids-tab--selected]=\"i === selectedIndex\"\n [attr.tabindex]=\"i === focusedIndex ? 0 : -1\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.id]=\"tab.tabId\"\n >\n <div class=\"ids-tab__label\">\n @if (tab.labelTemplate()) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate() ?? null\"></ng-container>\n } @else {\n @if (tab.icon) {\n <span class=\"ids-tab-icon ids-icon-{{ tab.icon }}\"></span>\n }\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n <id-notification-badge class=\"ids-ml-2\">{{ tab.notices }}</id-notification-badge>\n }\n }\n </div>\n </button>\n }\n</div>\n\n<div class=\"ids-tabs__panels\">\n <div\n role=\"tabpanel\"\n [attr.tabindex]=\"getTabPanelTabIndex(selectedIndex)\"\n [attr.aria-labelledby]=\"tabs()[selectedIndex]?.tabId\"\n [class.ids-tab-panel--compact]=\"compact || tabs()[selectedIndex]?.compact\"\n class=\"ids-tab-panel ids-tab-panel--selected\"\n >\n <ng-container [ngTemplateOutlet]=\"tabs()[selectedIndex]?.content() ?? null\"></ng-container>\n </div>\n</div>\n" }]
|
|
143
|
+
}], propDecorators: { responsive: [{
|
|
152
144
|
type: Input
|
|
153
145
|
}], unresponsive: [{
|
|
154
146
|
type: Input,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inera-ids-angular-components-tabs.mjs","sources":["../../../projects/ids-angular/components/tabs/tab.component.ts","../../../projects/ids-angular/components/tabs/tab-group.component.ts","../../../projects/ids-angular/components/tabs/tab-group.component.html","../../../projects/ids-angular/components/tabs/inera-ids-angular-components-tabs.ts"],"sourcesContent":["import { Component, ContentChild, Input, TemplateRef, ViewChild, inject } from '@angular/core';\nimport { IDUseIdService } from '@inera/ids-angular/common';\n\n@Component({\n selector: 'id-tab',\n template: `\n <ng-template><ng-content></ng-content></ng-template>\n `,\n standalone: true,\n})\nexport class IDTabComponent {\n @Input() tabId: string;\n @Input() label: string;\n @Input() notices: string = '';\n @Input() icon: string;\n @Input() selected: boolean;\n @Input() noTabindex: boolean;\n @Input() compact: boolean;\n\n @ContentChild('idTabLabel', { read: TemplateRef }) labelTemplate?: TemplateRef<any>;\n\n @ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;\n\n private idService = inject(IDUseIdService);\n\n ngOnInit(): void {\n if (!this.tabId) {\n this.tabId = this.idService.generateId('tab-id');\n }\n }\n}\n","import {\n AfterContentInit,\n Component,\n ContentChildren,\n Input,\n QueryList,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { IDTabComponent } from './tab.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IDUseIdService } from '@inera/ids-angular/common';\nimport { IDNotificationBadgeComponent } from '@inera/ids-angular/components/notification-badge';\n\n@Component({\n selector: 'id-tab-group',\n templateUrl: './tab-group.component.html',\n standalone: true,\n imports: [NgTemplateOutlet, IDNotificationBadgeComponent],\n host: {\n class: 'ids-tabs',\n '[class.ids-tabs--responsive-on-s]': \"responsive === 's'\",\n '[class.ids-tabs--unresponsive]': 'unresponsive',\n },\n})\nexport class IDTabGroupComponent implements AfterContentInit {\n @ContentChildren(IDTabComponent) tabs!: QueryList<IDTabComponent>;\n selectedIndex = 0;\n focusedIndex = 0;\n\n ngAfterContentInit(): void {\n const tabsArray = this.tabs.toArray();\n const selectedTabIndex = tabsArray.findIndex((tab) => tab.selected);\n this.selectedIndex = selectedTabIndex >= 0 ? selectedTabIndex : 0;\n this.focusedIndex = this.selectedIndex;\n this.selectTab(this.selectedIndex);\n }\n\n @Input() responsive: 'm' | 's' = 'm';\n @Input({ transform: booleanAttribute }) unresponsive: boolean = false;\n @Input({ transform: booleanAttribute }) light: boolean = false;\n @Input({ transform: booleanAttribute }) compact: boolean = false;\n @Input() selectLabel?: string;\n\n private idService = inject(IDUseIdService);\n selectId = this.idService.generateId('tab-group');\n\n selectTab(i: number) {\n this.selectedIndex = i;\n this.focusedIndex = i;\n\n this.tabs.forEach((tab, index) => {\n tab.selected = index === i;\n });\n }\n\n onKeydown(event: KeyboardEvent) {\n const key = event.key;\n const lastIndex = this.tabs.length - 1;\n\n let newIndex = this.focusedIndex;\n\n if (key === 'ArrowRight') {\n event.preventDefault();\n newIndex = this.focusedIndex < lastIndex ? this.focusedIndex + 1 : 0;\n }\n\n if (key === 'ArrowLeft') {\n event.preventDefault();\n newIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : lastIndex;\n }\n\n if (key === 'Home') {\n event.preventDefault();\n newIndex = 0;\n }\n\n if (key === 'End') {\n event.preventDefault();\n newIndex = lastIndex;\n }\n\n if (key === 'Enter' || key === ' ') {\n event.preventDefault();\n this.selectTab(this.focusedIndex);\n return;\n }\n\n // Only move focus (NOT selection)\n if (newIndex !== this.focusedIndex) {\n this.focusedIndex = newIndex;\n\n queueMicrotask(() => {\n const tabs = document.querySelectorAll<HTMLElement>('.ids-tab[role=\"tab\"]');\n tabs[newIndex]?.focus();\n });\n }\n }\n\n getTabPanelTabIndex(tabIndex: number): number | null {\n const tab = this.tabs.toArray()[tabIndex];\n if (!tab) return 0;\n\n if (tab.noTabindex) return null;\n\n const panelEl = document.querySelectorAll<HTMLElement>('.ids-tab-panel')[tabIndex];\n if (!panelEl) return 0;\n\n const focusableSelectors = [\n 'a[href]',\n 'button:not([disabled])',\n 'textarea:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(', ');\n\n const hasFocusable = panelEl.querySelector(focusableSelectors) !== null;\n return hasFocusable ? -1 : 0;\n }\n}\n","<div class=\"ids-tabs__select\">\n <label\n [htmlFor]=\"selectId\"\n class=\"ids-label\"\n >\n {{ selectLabel || \"Välj flik\" }}\n </label>\n <div class=\"ids-select__wrapper\">\n <select\n [id]=\"selectId\"\n (change)=\"selectTab(+$any($event.target).value)\"\n class=\"ids-select__select\"\n [class.ids-input--light]=\"light\"\n >\n @for (tab of tabs; track tab; let i = $index) {\n <option\n [value]=\"i\"\n [selected]=\"i === selectedIndex\"\n >\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n ({{ tab.notices }})\n }\n </option>\n }\n </select>\n </div>\n</div>\n\n<div\n class=\"ids-tabs__tabs\"\n role=\"tablist\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs; track tab; let i = $index) {\n <button\n role=\"tab\"\n (click)=\"selectTab(i)\"\n class=\"ids-tab\"\n [class.ids-tab--selected]=\"i === selectedIndex\"\n [attr.tabindex]=\"i === focusedIndex ? 0 : -1\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.id]=\"tab.tabId\"\n >\n <div class=\"ids-tab__label\">\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\"></ng-container>\n } @else {\n @if (tab.icon) {\n <span class=\"ids-tab-icon ids-icon-{{ tab.icon }}\"></span>\n }\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n <id-notification-badge class=\"ids-ml-2\">{{ tab.notices }}</id-notification-badge>\n }\n }\n </div>\n </button>\n }\n</div>\n\n<div class=\"ids-tabs__panels\">\n <div\n role=\"tabpanel\"\n [attr.tabindex]=\"getTabPanelTabIndex(selectedIndex)\"\n [attr.aria-labelledby]=\"tabs.get(selectedIndex)?.tabId\"\n [class.ids-tab-panel--compact]=\"compact || tabs.get(selectedIndex)?.compact\"\n class=\"ids-tab-panel ids-tab-panel--selected\"\n >\n <ng-container [ngTemplateOutlet]=\"tabs.get(selectedIndex)?.content ?? null\"></ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"inera-ids-angular-components-tabs.mjs","sources":["../../../projects/ids-angular/components/tabs/tab.component.ts","../../../projects/ids-angular/components/tabs/tab-group.component.ts","../../../projects/ids-angular/components/tabs/tab-group.component.html","../../../projects/ids-angular/components/tabs/inera-ids-angular-components-tabs.ts"],"sourcesContent":["import { Component, Input, TemplateRef, viewChild, inject, contentChild } from '@angular/core';\nimport { IDUseIdService } from '@inera/ids-angular/common';\n\n@Component({\n selector: 'id-tab',\n template: `\n <ng-template><ng-content></ng-content></ng-template>\n `,\n standalone: true,\n})\nexport class IDTabComponent {\n @Input() tabId: string;\n @Input() label: string;\n @Input() notices: string = '';\n @Input() icon: string;\n @Input() selected: boolean;\n @Input() noTabindex: boolean;\n @Input() compact: boolean;\n\n labelTemplate = contentChild<TemplateRef<any>>('idTabLabel');\n\n content = viewChild.required(TemplateRef);\n\n private idService = inject(IDUseIdService);\n\n ngOnInit(): void {\n if (!this.tabId) {\n this.tabId = this.idService.generateId('tab-id');\n }\n }\n}\n","import { AfterContentInit, Component, ElementRef, Input, booleanAttribute, inject, contentChildren } from '@angular/core';\nimport { IDTabComponent } from './tab.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IDUseIdService } from '@inera/ids-angular/common';\nimport { IDNotificationBadgeComponent } from '@inera/ids-angular/components/notification-badge';\n\n@Component({\n selector: 'id-tab-group',\n templateUrl: './tab-group.component.html',\n standalone: true,\n imports: [NgTemplateOutlet, IDNotificationBadgeComponent],\n host: {\n class: 'ids-tabs',\n '[class.ids-tabs--responsive-on-s]': \"responsive === 's'\",\n '[class.ids-tabs--unresponsive]': 'unresponsive',\n },\n})\nexport class IDTabGroupComponent implements AfterContentInit {\n tabs = contentChildren(IDTabComponent);\n selectedIndex = 0;\n focusedIndex = 0;\n\n ngAfterContentInit(): void {\n const tabsArray = this.tabs();\n const selectedTabIndex = tabsArray.findIndex((tab) => tab.selected);\n this.selectedIndex = selectedTabIndex >= 0 ? selectedTabIndex : 0;\n this.focusedIndex = this.selectedIndex;\n this.selectTab(this.selectedIndex);\n }\n\n @Input() responsive: 'm' | 's' = 'm';\n @Input({ transform: booleanAttribute }) unresponsive: boolean = false;\n @Input({ transform: booleanAttribute }) light: boolean = false;\n @Input({ transform: booleanAttribute }) compact: boolean = false;\n @Input() selectLabel?: string;\n private ref = inject(ElementRef);\n\n private idService = inject(IDUseIdService);\n selectId = this.idService.generateId('tab-group');\n\n selectTab(i: number) {\n this.selectedIndex = i;\n this.focusedIndex = i;\n\n this.tabs().forEach((tab, index) => {\n tab.selected = index === i;\n });\n }\n\n onKeydown(event: KeyboardEvent) {\n const key = event.key;\n const lastIndex = this.tabs().length - 1;\n\n let newIndex = this.focusedIndex;\n\n if (key === 'ArrowRight') {\n event.preventDefault();\n newIndex = this.focusedIndex < lastIndex ? this.focusedIndex + 1 : 0;\n }\n\n if (key === 'ArrowLeft') {\n event.preventDefault();\n newIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : lastIndex;\n }\n\n if (key === 'Home') {\n event.preventDefault();\n newIndex = 0;\n }\n\n if (key === 'End') {\n event.preventDefault();\n newIndex = lastIndex;\n }\n\n if (key === 'Enter' || key === ' ') {\n event.preventDefault();\n this.selectTab(this.focusedIndex);\n return;\n }\n\n // Only move focus (NOT selection)\n if (newIndex !== this.focusedIndex) {\n this.focusedIndex = newIndex;\n\n queueMicrotask(() => {\n const tabs = this.ref.nativeElement.querySelectorAll('.ids-tab[role=\"tab\"]') as NodeListOf<HTMLElement>;\n tabs[newIndex]?.focus();\n });\n }\n }\n\n getTabPanelTabIndex(tabIndex: number): number | null {\n const tab = this.tabs()[tabIndex];\n if (!tab) return 0;\n\n if (tab.noTabindex) return null;\n\n const panelEl = document.querySelectorAll<HTMLElement>('.ids-tab-panel')[tabIndex];\n if (!panelEl) return 0;\n\n const focusableSelectors = [\n 'a[href]',\n 'button:not([disabled])',\n 'textarea:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(', ');\n\n const hasFocusable = panelEl.querySelector(focusableSelectors) !== null;\n return hasFocusable ? -1 : 0;\n }\n}\n","<div class=\"ids-tabs__select\">\n <label\n [htmlFor]=\"selectId\"\n class=\"ids-label\"\n >\n {{ selectLabel || \"Välj flik\" }}\n </label>\n <div class=\"ids-select__wrapper\">\n <select\n [id]=\"selectId\"\n (change)=\"selectTab(+$any($event.target).value)\"\n class=\"ids-select__select\"\n [class.ids-input--light]=\"light\"\n >\n @for (tab of tabs(); track tab; let i = $index) {\n <option\n [value]=\"i\"\n [selected]=\"i === selectedIndex\"\n >\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n ({{ tab.notices }})\n }\n </option>\n }\n </select>\n </div>\n</div>\n\n<div\n class=\"ids-tabs__tabs\"\n role=\"tablist\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n role=\"tab\"\n (click)=\"selectTab(i)\"\n class=\"ids-tab\"\n [class.ids-tab--selected]=\"i === selectedIndex\"\n [attr.tabindex]=\"i === focusedIndex ? 0 : -1\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.id]=\"tab.tabId\"\n >\n <div class=\"ids-tab__label\">\n @if (tab.labelTemplate()) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate() ?? null\"></ng-container>\n } @else {\n @if (tab.icon) {\n <span class=\"ids-tab-icon ids-icon-{{ tab.icon }}\"></span>\n }\n {{ tab.label }}\n @if (tab.notices !== \"\") {\n <id-notification-badge class=\"ids-ml-2\">{{ tab.notices }}</id-notification-badge>\n }\n }\n </div>\n </button>\n }\n</div>\n\n<div class=\"ids-tabs__panels\">\n <div\n role=\"tabpanel\"\n [attr.tabindex]=\"getTabPanelTabIndex(selectedIndex)\"\n [attr.aria-labelledby]=\"tabs()[selectedIndex]?.tabId\"\n [class.ids-tab-panel--compact]=\"compact || tabs()[selectedIndex]?.compact\"\n class=\"ids-tab-panel ids-tab-panel--selected\"\n >\n <ng-container [ngTemplateOutlet]=\"tabs()[selectedIndex]?.content() ?? null\"></ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,16 +3,16 @@ import { EventEmitter, booleanAttribute, Output, Input, Component, Directive } f
|
|
|
3
3
|
|
|
4
4
|
class IDTagComponent {
|
|
5
5
|
closeable = false;
|
|
6
|
-
srCloseLabel =
|
|
6
|
+
srCloseLabel = 'Stäng';
|
|
7
7
|
closed = new EventEmitter();
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
9
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDTagComponent, isStandalone: true, selector: "id-tag", inputs: { closeable: ["closeable", "closeable", booleanAttribute], srCloseLabel: "srCloseLabel" }, outputs: { closed: "closed" }, host: { classAttribute: "ids-tag" }, ngImport: i0, template: "<div class=\"ids-tag__content\">\n <ng-content></ng-content>\n @if (closeable) {\n <button\n class=\"ids-tag__close-btn\"\n (closed)=\"closed.emit(true)\"\n [attr.aria-label]=\"srCloseLabel\"\n >\n <span\n class=\"ids-icon-close\"\n aria-hidden\n ></span>\n </button>\n }\n</div>\n" });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTagComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ selector:
|
|
14
|
-
class: 'ids-tag'
|
|
15
|
-
}, template: "<div class=\"ids-tag__content\">\n <ng-content></ng-content>\n @if(closeable) {
|
|
13
|
+
args: [{ selector: 'id-tag', standalone: true, host: {
|
|
14
|
+
class: 'ids-tag',
|
|
15
|
+
}, template: "<div class=\"ids-tag__content\">\n <ng-content></ng-content>\n @if (closeable) {\n <button\n class=\"ids-tag__close-btn\"\n (closed)=\"closed.emit(true)\"\n [attr.aria-label]=\"srCloseLabel\"\n >\n <span\n class=\"ids-icon-close\"\n aria-hidden\n ></span>\n </button>\n }\n</div>\n" }]
|
|
16
16
|
}], propDecorators: { closeable: [{
|
|
17
17
|
type: Input,
|
|
18
18
|
args: [{ transform: booleanAttribute }]
|
|
@@ -23,10 +23,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
23
23
|
}] } });
|
|
24
24
|
|
|
25
25
|
class IDTagDirective {
|
|
26
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
27
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: IDTagDirective, isStandalone: true, selector: "*[idTag]", host: { classAttribute: "ids-tag ids-tag--clickable" }, ngImport: i0 });
|
|
28
28
|
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDTagDirective, decorators: [{
|
|
30
30
|
type: Directive,
|
|
31
31
|
args: [{
|
|
32
32
|
selector: "*[idTag]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inera-ids-angular-components-tag.mjs","sources":["../../../projects/ids-angular/components/tag/tag.component.ts","../../../projects/ids-angular/components/tag/tag.component.html","../../../projects/ids-angular/components/tag/tag.directive.ts","../../../projects/ids-angular/components/tag/inera-ids-angular-components-tag.ts"],"sourcesContent":["import { booleanAttribute, Component, EventEmitter, Input, Output } from
|
|
1
|
+
{"version":3,"file":"inera-ids-angular-components-tag.mjs","sources":["../../../projects/ids-angular/components/tag/tag.component.ts","../../../projects/ids-angular/components/tag/tag.component.html","../../../projects/ids-angular/components/tag/tag.directive.ts","../../../projects/ids-angular/components/tag/inera-ids-angular-components-tag.ts"],"sourcesContent":["import { booleanAttribute, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n selector: 'id-tag',\n templateUrl: './tag.component.html',\n standalone: true,\n host: {\n class: 'ids-tag',\n },\n})\nexport class IDTagComponent {\n @Input({ transform: booleanAttribute }) closeable: boolean = false;\n @Input() srCloseLabel: string = 'Stäng';\n\n @Output() closed: EventEmitter<boolean> = new EventEmitter();\n}\n","<div class=\"ids-tag__content\">\n <ng-content></ng-content>\n @if (closeable) {\n <button\n class=\"ids-tag__close-btn\"\n (closed)=\"closed.emit(true)\"\n [attr.aria-label]=\"srCloseLabel\"\n >\n <span\n class=\"ids-icon-close\"\n aria-hidden\n ></span>\n </button>\n }\n</div>\n","import { Directive } from \"@angular/core\";\n\n@Directive({\n selector: \"*[idTag]\",\n standalone: true,\n host: {\n class: 'ids-tag ids-tag--clickable'\n }\n})\nexport class IDTagDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAUa,cAAc,CAAA;IACe,SAAS,GAAY,KAAK;IACzD,YAAY,GAAW,OAAO;AAE7B,IAAA,MAAM,GAA0B,IAAI,YAAY,EAAE;wGAJjD,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EACL,gBAAgB,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXtC,8UAeA,EAAA,CAAA;;4FDLa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;+BACE,QAAQ,EAAA,UAAA,EAEN,IAAI,EAAA,IAAA,EACV;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA,EAAA,QAAA,EAAA,8UAAA,EAAA;8BAGuC,SAAS,EAAA,CAAA;sBAAhD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAC7B,YAAY,EAAA,CAAA;sBAApB;gBAES,MAAM,EAAA,CAAA;sBAAf;;;MELU,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE;AACR;AACF,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Component } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class IDToolbarComponent {
|
|
5
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
6
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
5
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: IDToolbarComponent, isStandalone: true, selector: "id-toolbar", ngImport: i0, template: "<div class=\"ids-toolbar\">\n <div class=\"ids-toolbar__content\">\n <ng-content></ng-content>\n </div>\n</div>\n" });
|
|
7
7
|
}
|
|
8
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
8
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDToolbarComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
10
|
args: [{ selector: 'id-toolbar', standalone: true, template: "<div class=\"ids-toolbar\">\n <div class=\"ids-toolbar__content\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
11
11
|
}] });
|