@daffodil/design 0.81.1 → 0.83.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/accordion/README.md +44 -29
- package/accordion/accordion/accordion/accordion.component.d.ts +3 -0
- package/accordion/accordion/accordion-item/accordion-item.component.d.ts +23 -12
- package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts +3 -0
- package/accordion/accordion.d.ts +5 -0
- package/accordion/examples/disabled-accordion/disabled-accordion.component.d.ts +5 -0
- package/accordion/examples/initially-expanded-accordion/initially-expanded-accordion.component.d.ts +5 -0
- package/accordion/examples/public_api.d.ts +2 -0
- package/accordion/src/accordion-theme.scss +28 -6
- package/article/README.md +4 -3
- package/article/article.d.ts +3 -0
- package/article/src/article-theme.scss +128 -51
- package/breadcrumb/README.md +38 -28
- package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
- package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
- package/breadcrumb/breadcrumb.d.ts +3 -0
- package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
- package/breadcrumb/public_api.d.ts +2 -2
- package/button/README.md +43 -23
- package/button/button/basic/button.component.d.ts +5 -1
- package/button/button/button-base.directive.d.ts +11 -3
- package/button/button/button-sizable.directive.d.ts +1 -1
- package/button/button/raised/raised.component.d.ts +2 -0
- package/button/button/stroked/stroked.component.d.ts +5 -1
- package/button/button.d.ts +4 -2
- package/button/button.module.d.ts +1 -2
- package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
- package/button/examples/examples.d.ts +2 -1
- package/button/examples/public_api.d.ts +1 -0
- package/button/public_api.d.ts +0 -1
- package/button/src/button/basic/button-theme.scss +185 -80
- package/button/src/button/button-base.scss +41 -16
- package/button/src/button/flat/flat-theme.scss +144 -85
- package/button/src/button/icon/icon-theme.scss +183 -79
- package/button/src/button/raised/raised-theme.scss +2 -7
- package/button/src/button/stroked/stroked-theme.scss +128 -94
- package/button/src/button/underline/underline-theme.scss +112 -44
- package/callout/README.md +4 -3
- package/callout/callout.d.ts +3 -0
- package/card/README.md +6 -3
- package/card/card/basic/basic.component.d.ts +7 -0
- package/card/card/raised/raised.component.d.ts +7 -0
- package/card/card/stroked/stroked.component.d.ts +7 -0
- package/card/card-base.directive.d.ts +25 -0
- package/card/card.d.ts +18 -1
- package/card/card.module.d.ts +10 -8
- package/card/examples/card-theming/card-theming.component.d.ts +2 -1
- package/card/examples/public_api.d.ts +1 -1
- package/card/public_api.d.ts +6 -1
- package/card/src/card/raised/raised-theme.scss +30 -0
- package/card/src/card/stroked/stroked-theme.scss +135 -0
- package/card/src/card-base-theme.scss +197 -0
- package/card/src/card-base.scss +134 -0
- package/container/README.md +5 -3
- package/container/container.d.ts +3 -0
- package/core/colorable/colorable.d.ts +20 -14
- package/core/colorable/colorable.directive.d.ts +9 -6
- package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
- package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-accordion.mjs +56 -29
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-article-examples.mjs +30 -30
- package/fesm2022/daffodil-design-article.mjs +14 -11
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
- package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
- package/fesm2022/daffodil-design-button-examples.mjs +55 -33
- package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +79 -69
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
- package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout.mjs +25 -22
- package/fesm2022/daffodil-design-callout.mjs.map +1 -1
- package/fesm2022/daffodil-design-card-examples.mjs +35 -31
- package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-card.mjs +140 -86
- package/fesm2022/daffodil-design-card.mjs.map +1 -1
- package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
- package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-container-examples.mjs +3 -3
- package/fesm2022/daffodil-design-container.mjs +10 -7
- package/fesm2022/daffodil-design-container.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
- package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero.mjs +25 -22
- package/fesm2022/daffodil-design-hero.mjs.map +1 -1
- package/fesm2022/daffodil-design-image-examples.mjs +9 -9
- package/fesm2022/daffodil-design-image.mjs +36 -19
- package/fesm2022/daffodil-design-image.mjs.map +1 -1
- package/fesm2022/daffodil-design-input-examples.mjs +12 -12
- package/fesm2022/daffodil-design-link-set.mjs +19 -16
- package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
- package/fesm2022/daffodil-design-list-examples.mjs +12 -12
- package/fesm2022/daffodil-design-list.mjs +13 -10
- package/fesm2022/daffodil-design-list.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
- package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
- package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
- package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery.mjs +204 -250
- package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
- package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu.mjs +16 -16
- package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
- package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +28 -25
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
- package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar.mjs +10 -7
- package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +17 -16
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +23 -20
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
- package/fesm2022/daffodil-design-paginator.mjs +13 -7
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +10 -10
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs +13 -13
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
- package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
- package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
- package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +150 -61
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
- package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch.mjs +38 -10
- package/fesm2022/daffodil-design-switch.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
- package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs.mjs +67 -35
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
- package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
- package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
- package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
- package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +296 -239
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
- package/fesm2022/daffodil-design-tree.mjs +15 -12
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
- package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
- package/fesm2022/daffodil-design.mjs +167 -155
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/hero/README.md +4 -3
- package/hero/hero.d.ts +3 -0
- package/image/README.md +4 -3
- package/image/image/image.component.d.ts +22 -1
- package/image/image.d.ts +3 -0
- package/link-set/README.md +4 -3
- package/link-set/link-set.d.ts +3 -0
- package/list/README.md +4 -3
- package/list/list.d.ts +3 -0
- package/loading-icon/README.md +10 -7
- package/loading-icon/loading-icon.d.ts +3 -0
- package/loading-icon/src/loading-icon-theme.scss +66 -38
- package/media-gallery/README.md +19 -10
- package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
- package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
- package/media-gallery/examples/public_api.d.ts +2 -0
- package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
- package/media-gallery/media-gallery/media-gallery.component.d.ts +89 -11
- package/media-gallery/media-gallery.d.ts +4 -2
- package/media-gallery/media-gallery.module.d.ts +1 -2
- package/media-gallery/public_api.d.ts +3 -4
- package/media-gallery/src/media-gallery-theme.scss +30 -4
- package/media-gallery/thumbnail/thumbnail.directive.d.ts +45 -22
- package/menu/README.md +1 -2
- package/modal/README.md +3 -2
- package/modal/modal.d.ts +3 -0
- package/navbar/README.md +3 -2
- package/navbar/navbar.d.ts +3 -0
- package/notification/README.md +5 -4
- package/notification/notification.d.ts +3 -0
- package/notification/src/notification-theme.scss +62 -23
- package/package.json +1 -1
- package/paginator/README.md +3 -2
- package/paginator/paginator/paginator.component.d.ts +3 -0
- package/paginator/paginator.d.ts +3 -0
- package/progress-bar/README.md +5 -6
- package/progress-bar/progress-bar.component.d.ts +0 -3
- package/progress-bar/progress-bar.d.ts +3 -0
- package/progress-bar/src/progress-bar-theme.scss +17 -8
- package/scss/theme.scss +36 -17
- package/scss/theming/_configure-theme.scss +2 -0
- package/scss/theming/_index.scss +1 -0
- package/scss/theming/_light-dark.scss +45 -0
- package/sidebar/README.md +20 -21
- package/sidebar/helper/sidebar-mode.d.ts +9 -15
- package/sidebar/public_api.d.ts +10 -11
- package/sidebar/sidebar/sidebar.component.d.ts +22 -7
- package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
- package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
- package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
- package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
- package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
- package/sidebar/sidebar.d.ts +4 -2
- package/sidebar/sidebar.module.d.ts +1 -2
- package/switch/README.md +3 -2
- package/switch/src/switch-theme.scss +29 -10
- package/switch/switch/switch.component.d.ts +31 -6
- package/switch/switch.d.ts +3 -0
- package/tabs/README.md +33 -3
- package/tabs/src/tabs-theme.scss +31 -13
- package/tabs/tabs/tab/tab.component.d.ts +1 -1
- package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
- package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
- package/tabs/tabs/tabs.component.d.ts +21 -4
- package/tabs/tabs.d.ts +8 -2
- package/text-snippet/README.md +19 -1
- package/toast/README.md +21 -151
- package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
- package/toast/examples/public_api.d.ts +2 -1
- package/toast/interfaces/toast-action.d.ts +22 -11
- package/toast/interfaces/toast-action.type.d.ts +10 -0
- package/toast/interfaces/toast.d.ts +11 -5
- package/toast/options/daff-toast-options.d.ts +2 -1
- package/toast/public_api.d.ts +2 -6
- package/toast/service/position.service.d.ts +9 -1
- package/toast/service/toast.service.d.ts +63 -0
- package/toast/src/toast-theme.scss +80 -33
- package/toast/toast/toast-config.d.ts +24 -1
- package/toast/toast/toast-provider.d.ts +16 -0
- package/toast/toast/toast.component.d.ts +20 -1
- package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
- package/toast/toast-message/toast-message.directive.d.ts +3 -0
- package/toast/toast-title/toast-title.directive.d.ts +3 -0
- package/tree/README.md +6 -10
- package/tree/src/tree-theme.scss +39 -13
- package/tree/tree.d.ts +3 -0
- package/youtube-player/index.d.ts +1 -0
- package/youtube-player/public_api.d.ts +3 -0
- package/youtube-player/safe-url.pipe.d.ts +10 -0
- package/youtube-player/youtube-player.component.d.ts +23 -0
- package/youtube-player/youtube-player.d.ts +6 -0
- package/card/card/card.component.d.ts +0 -48
- package/card/src/card-theme-variants/basic-card.scss +0 -6
- package/card/src/card-theme-variants/linkable-card.scss +0 -16
- package/card/src/card-theme-variants/stroked-card.scss +0 -3
- package/card/src/card-theme.scss +0 -170
- package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
- package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
- package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
- package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
- package/scss/theming/prebuilt/internal-theme.scss +0 -13
- package/toast/toast.module.d.ts +0 -19
@@ -1,16 +1,16 @@
|
|
1
|
-
import * as i1 from '@daffodil/design';
|
2
|
-
import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixSuffixModule, DaffSelectableDirective } from '@daffodil/design';
|
3
1
|
import * as i0 from '@angular/core';
|
4
2
|
import { TemplateRef, Component, ChangeDetectionStrategy, Input, ViewChild, ContentChild, HostBinding, ViewEncapsulation, EventEmitter, Output, ContentChildren, ViewChildren } from '@angular/core';
|
5
3
|
import * as i1$1 from '@angular/common';
|
6
4
|
import { NgIf, NgTemplateOutlet } from '@angular/common';
|
5
|
+
import * as i1 from '@daffodil/design';
|
6
|
+
import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixSuffixModule, DaffSelectableDirective } from '@daffodil/design';
|
7
7
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
8
8
|
|
9
9
|
let tabId = 1;
|
10
10
|
/**
|
11
11
|
* `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
|
12
12
|
*
|
13
|
-
* A `<daff-tab>` should include the
|
13
|
+
* A `<daff-tab>` should include the DaffTabLabelComponent and DaffTabPanelComponent components in order to properly structure the UI.
|
14
14
|
*
|
15
15
|
* @example Basic structure of tab
|
16
16
|
* ```html
|
@@ -54,8 +54,8 @@ class DaffTabComponent {
|
|
54
54
|
this.panelId = 'daff-tab-panel-' + tabId;
|
55
55
|
tabId++;
|
56
56
|
}
|
57
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
58
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
57
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
58
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffTabComponent, isStandalone: true, selector: "daff-tab", inputs: { disabled: "disabled", id: "id" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef, static: true }, { propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
|
59
59
|
<ng-template #label>
|
60
60
|
<ng-content select="daff-tab-label"></ng-content>
|
61
61
|
</ng-template>
|
@@ -64,10 +64,9 @@ class DaffTabComponent {
|
|
64
64
|
</ng-template>
|
65
65
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
66
66
|
}
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabComponent, decorators: [{
|
68
68
|
type: Component,
|
69
69
|
args: [{
|
70
|
-
standalone: true,
|
71
70
|
selector: 'daff-tab',
|
72
71
|
template: `
|
73
72
|
<ng-template #label>
|
@@ -104,10 +103,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
104
103
|
* ```
|
105
104
|
*/
|
106
105
|
class DaffTabLabelComponent {
|
107
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
108
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
106
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
107
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffTabLabelComponent, isStandalone: true, selector: "daff-tab-label", queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [":host{display:flex;justify-content:center;align-items:center;gap:.5rem}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DaffPrefixSuffixModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
109
108
|
}
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabLabelComponent, decorators: [{
|
111
110
|
type: Component,
|
112
111
|
args: [{ selector: 'daff-tab-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
113
112
|
NgIf,
|
@@ -133,6 +132,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
133
132
|
*/
|
134
133
|
class DaffTabPanelComponent {
|
135
134
|
/**
|
135
|
+
* @docs-private
|
136
|
+
*
|
136
137
|
* Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.
|
137
138
|
*/
|
138
139
|
get tabPanelId() {
|
@@ -145,14 +146,20 @@ class DaffTabPanelComponent {
|
|
145
146
|
*/
|
146
147
|
this.class = true;
|
147
148
|
/**
|
149
|
+
* @docs-private
|
150
|
+
*
|
148
151
|
* Sets the `role` to tabpanel.
|
149
152
|
*/
|
150
153
|
this.role = 'tabpanel';
|
151
154
|
/**
|
155
|
+
* @docs-private
|
156
|
+
*
|
152
157
|
* `aria-labelledby` for the tab.
|
153
158
|
*/
|
154
159
|
this.ariaLabelledBy = '';
|
155
160
|
/**
|
161
|
+
* @docs-private
|
162
|
+
*
|
156
163
|
* Sets the `tabindex` to 0.
|
157
164
|
*/
|
158
165
|
this.tabIndex = '0';
|
@@ -163,12 +170,12 @@ class DaffTabPanelComponent {
|
|
163
170
|
this.ariaLabelledBy = this.tab.id;
|
164
171
|
this._id = this.tab.panelId;
|
165
172
|
}
|
166
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
167
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
173
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabPanelComponent, deps: [{ token: DaffTabComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
174
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffTabPanelComponent, isStandalone: true, selector: "daff-tab-panel", host: { properties: { "class.daff-tab-panel": "this.class", "attr.role": "this.role", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.tabindex": "this.tabIndex", "attr.id": "this.tabPanelId" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host(.daff-tab-panel){display:block;padding:1rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
168
175
|
}
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabPanelComponent, decorators: [{
|
170
177
|
type: Component,
|
171
|
-
args: [{
|
178
|
+
args: [{ selector: 'daff-tab-panel', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.daff-tab-panel){display:block;padding:1rem 0}\n"] }]
|
172
179
|
}], ctorParameters: () => [{ type: DaffTabComponent }], propDecorators: { class: [{
|
173
180
|
type: HostBinding,
|
174
181
|
args: ['class.daff-tab-panel']
|
@@ -229,19 +236,19 @@ class DaffTabActivatorComponent {
|
|
229
236
|
focus() {
|
230
237
|
this.el.nativeElement.focus();
|
231
238
|
}
|
232
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
233
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
239
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabActivatorComponent, deps: [{ token: i0.ElementRef }, { token: i1.DaffSelectableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
240
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffTabActivatorComponent, isStandalone: true, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: { tabActivatorId: "tabActivatorId", panelId: "panelId" }, host: { properties: { "class.daff-tab-activator": "this.class", "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.tabindex": "this.tabIndex", "attr.aria-controls": "this.ariaControls", "attr.id": "this.tabActivatorId" } }, hostDirectives: [{ directive: i1.DaffSelectableDirective, inputs: ["selected", "selected"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;font-size:1rem;line-height:1.5rem;font-weight:500;height:3rem;margin:0;min-width:8rem;padding:.5rem 1.5rem;text-decoration:none;z-index:2}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
234
241
|
}
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabActivatorComponent, decorators: [{
|
236
243
|
type: Component,
|
237
|
-
args: [{
|
244
|
+
args: [{ selector: '' +
|
238
245
|
'button[daff-tab-activator]' + ',' +
|
239
246
|
'a[daff-tab-activator]', template: `<ng-content></ng-content>`, hostDirectives: [
|
240
247
|
{
|
241
248
|
directive: DaffSelectableDirective,
|
242
249
|
inputs: ['selected'],
|
243
250
|
},
|
244
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;
|
251
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;font-size:1rem;line-height:1.5rem;font-weight:500;height:3rem;margin:0;min-width:8rem;padding:.5rem 1.5rem;text-decoration:none;z-index:2}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"] }]
|
245
252
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DaffSelectableDirective }], propDecorators: { class: [{
|
246
253
|
type: HostBinding,
|
247
254
|
args: ['class.daff-tab-activator']
|
@@ -294,6 +301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
294
301
|
* ```
|
295
302
|
*/
|
296
303
|
class DaffTabsComponent {
|
304
|
+
/**
|
305
|
+
* @docs-private
|
306
|
+
*/
|
297
307
|
get currentPath() {
|
298
308
|
return this.location.path();
|
299
309
|
}
|
@@ -305,19 +315,20 @@ class DaffTabsComponent {
|
|
305
315
|
*/
|
306
316
|
this.class = true;
|
307
317
|
/**
|
308
|
-
* The tab that is
|
318
|
+
* The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
|
309
319
|
*/
|
310
320
|
this.initiallySelected = null;
|
311
321
|
/**
|
312
|
-
*
|
322
|
+
* aria-label for the tab.
|
313
323
|
*/
|
314
324
|
this.externalAriaLabel = null;
|
315
325
|
/**
|
316
|
-
*
|
326
|
+
* @docs-private
|
327
|
+
*
|
317
328
|
*/
|
318
329
|
this.ariaLabel = '';
|
319
330
|
/**
|
320
|
-
* Replace the tab buttons
|
331
|
+
* Replace the tab buttons as links.
|
321
332
|
*/
|
322
333
|
this.linkMode = false;
|
323
334
|
/**
|
@@ -329,14 +340,24 @@ class DaffTabsComponent {
|
|
329
340
|
*/
|
330
341
|
this.tabChange = new EventEmitter();
|
331
342
|
}
|
343
|
+
reset() {
|
344
|
+
if (this.initiallySelected) {
|
345
|
+
this.selectedTab = this.initiallySelected;
|
346
|
+
}
|
347
|
+
if (!this.selectedTab) {
|
348
|
+
this.selectedTab = this._tabs.first.id;
|
349
|
+
}
|
350
|
+
}
|
332
351
|
/**
|
333
352
|
* @docs-private
|
334
353
|
*/
|
335
354
|
ngOnInit() {
|
336
355
|
this.location.onUrlChange(() => {
|
337
|
-
if
|
356
|
+
// if the app is navigated away from the current page, reset the state
|
357
|
+
if (this.linkMode && !this.location.isCurrentPathEqualTo(this.url, `${this.queryParam}=${this.selectedTab}`)) {
|
338
358
|
this.selectedTab = null;
|
339
|
-
this.
|
359
|
+
this.reset();
|
360
|
+
this.tabChange.emit(this.selectedTab);
|
340
361
|
}
|
341
362
|
});
|
342
363
|
}
|
@@ -344,14 +365,11 @@ class DaffTabsComponent {
|
|
344
365
|
* @docs-private
|
345
366
|
*/
|
346
367
|
ngAfterContentInit() {
|
347
|
-
|
348
|
-
this.selectedTab = this.initiallySelected;
|
349
|
-
}
|
350
|
-
if (!this.selectedTab) {
|
351
|
-
this.selectedTab = this._tabs.first.id;
|
352
|
-
}
|
368
|
+
this.reset();
|
353
369
|
}
|
354
370
|
/**
|
371
|
+
* @docs-private
|
372
|
+
*
|
355
373
|
* Selects a tab and sets focus on the selected tab.
|
356
374
|
*/
|
357
375
|
select(tabId) {
|
@@ -389,18 +407,24 @@ class DaffTabsComponent {
|
|
389
407
|
};
|
390
408
|
}
|
391
409
|
/**
|
410
|
+
* @docs-private
|
411
|
+
*
|
392
412
|
* Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
|
393
413
|
*/
|
394
414
|
previous() {
|
395
415
|
this.navigateTabs(-1);
|
396
416
|
}
|
397
417
|
/**
|
418
|
+
* @docs-private
|
419
|
+
*
|
398
420
|
* Selects the next tab and wraps around to the first tab if the last tab is currently selected.
|
399
421
|
*/
|
400
422
|
next() {
|
401
423
|
this.navigateTabs(1);
|
402
424
|
}
|
403
425
|
/**
|
426
|
+
* @docs-private
|
427
|
+
*
|
404
428
|
* Selects the first tab.
|
405
429
|
*/
|
406
430
|
selectFirst(event) {
|
@@ -408,6 +432,8 @@ class DaffTabsComponent {
|
|
408
432
|
this.select(this._tabs.toArray()[0].id);
|
409
433
|
}
|
410
434
|
/**
|
435
|
+
* @docs-private
|
436
|
+
*
|
411
437
|
* Selects the last tab.
|
412
438
|
*/
|
413
439
|
selectLast(event) {
|
@@ -415,10 +441,10 @@ class DaffTabsComponent {
|
|
415
441
|
const array = this._tabs.toArray();
|
416
442
|
this.select(array[array.length - 1].id);
|
417
443
|
}
|
418
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
419
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
444
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
445
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffTabsComponent, isStandalone: true, selector: "daff-tabs", inputs: { initiallySelected: "initiallySelected", ariaLabel: ["aria-label", "ariaLabel"], linkMode: "linkMode", url: "url", queryParam: "queryParam" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.daff-tabs": "this.class", "attr.aria-label": "this.externalAriaLabel" } }, queries: [{ propertyName: "_labels", predicate: DaffTabLabelComponent, descendants: true }, { propertyName: "_tabs", predicate: DaffTabComponent }], viewQueries: [{ propertyName: "_tabActivators", predicate: DaffTabActivatorComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t@if (linkMode && tab.disabled) {\n\t\t\t<button daff-tab-activator routerLinkActive\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t} @else if (linkMode) {\n\t\t\t<a daff-tab-activator routerLinkActive\n\t\t\t\tclass=\"daff-ae daff_tabs__link\"\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[routerLink]=\"url || currentPath\"\n\t\t\t\tqueryParamsHandling=\"merge\"\n\t\t\t\t[queryParams]=\"_buildQueryParams(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\"\n\t\t\t\t(isActiveChange)=\"$event && select(tab.id)\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</a>\n\t\t} @else {\n\t\t\t<button daff-tab-activator\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t(click)=\"select(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}", styles: [":host(.daff-tabs){max-width:100%}.daff-tabs{display:block}.daff-tabs .daff-tabs__tab-list{display:flex;overflow-x:auto;scrollbar-width:thin;position:relative}.daff-tabs .daff-tabs__tab-list:after{content:\"\";position:absolute;height:.125rem;width:100%;bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DaffTabActivatorComponent, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: ["tabActivatorId", "panelId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
420
446
|
}
|
421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTabsComponent, decorators: [{
|
422
448
|
type: Component,
|
423
449
|
args: [{ selector: 'daff-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
424
450
|
NgTemplateOutlet,
|
@@ -456,11 +482,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
456
482
|
args: [DaffTabActivatorComponent]
|
457
483
|
}] } });
|
458
484
|
|
485
|
+
/**
|
486
|
+
* @docs-private
|
487
|
+
*
|
488
|
+
* ```ts
|
489
|
+
* import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
|
490
|
+
* ```
|
491
|
+
*/
|
459
492
|
const DAFF_TABS_COMPONENTS = [
|
460
493
|
DaffTabsComponent,
|
461
494
|
DaffTabLabelComponent,
|
462
495
|
DaffTabPanelComponent,
|
463
|
-
DaffPrefixSuffixModule,
|
464
496
|
DaffTabComponent,
|
465
497
|
];
|
466
498
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"daffodil-design-tabs.mjs","sources":["../../../libs/design/tabs/src/tabs/tab/tab.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.html","../../../libs/design/tabs/src/tabs/tab-panel/tab-panel.component.ts","../../../libs/design/tabs/src/tabs/tab-activator/tab-activator.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.html","../../../libs/design/tabs/src/tabs.ts","../../../libs/design/tabs/src/daffodil-design-tabs.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n TemplateRef,\n ViewChild,\n Input,\n} from '@angular/core';\n\nlet tabId = 1;\n\n/**\n * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.\n *\n * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.\n *\n * @example Basic structure of tab\n * ```html\n * <daff-tab>\n * \t<daff-tab-label>\n * \t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\tTab 1\n * \t</daff-tab-label>\n * \t<daff-tab-panel>\n * \t\tTab 1 Panel\n * \t</daff-tab-panel>\n * </daff-tab>\n * ```\n */\n@Component({\n standalone: true,\n selector: 'daff-tab',\n template: `\n <ng-template #label>\n <ng-content select=\"daff-tab-label\"></ng-content>\n </ng-template>\n <ng-template #content>\n <ng-content select=\"daff-tab-panel\"></ng-content>\n </ng-template>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabComponent {\n /**\n * Whether the tab is disabled.\n *\n * @example Using the `disabled` property\n * ```html\n * <daff-tab [disabled]=\"true\">\n * </daff-tab>\n * ```\n */\n @Input() disabled = false;\n\n /**\n * @docs-private\n */\n @ViewChild('content', { read: TemplateRef, static: true }) contentRef: TemplateRef<any>;\n\n /**\n * @docs-private\n */\n @ViewChild('label', { read: TemplateRef, static: true }) labelRef: TemplateRef<any>;\n\n /**\n * A unique id for the tab component.\n *\n * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.\n *\n * @example Using the `id` property\n * ```html\n * <daff-tab [id]=\"'custom-id'\"></daff-tab>\n * ```\n */\n @Input() id = 'daff-tab-' + tabId;\n\n /**\n * @docs-private\n */\n panelId = 'daff-tab-panel-' + tabId;\n\n constructor() {\n tabId++;\n }\n}\n","import { NgIf } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n} from '@angular/core';\n\nimport {\n DaffPrefixDirective,\n DaffSuffixDirective,\n DaffPrefixable,\n DaffSuffixable,\n DaffPrefixSuffixModule,\n} from '@daffodil/design';\n\n/**\n * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.\n *\n * @example Basic structure of tab label\n * ```html\n * <daff-tab-label>\n * <div daffPrefix></div>\n * Label\n * <div daffSuffix></div\n * </daff-tab-Label>\n * ```\n */\n@Component({\n selector: 'daff-tab-label',\n templateUrl: './tab-label.component.html',\n styleUrl: './tab-label.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgIf,\n DaffPrefixSuffixModule,\n ],\n})\nexport class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {\n @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;\n @ContentChild(DaffSuffixDirective) _suffix: DaffSuffixDirective;\n}\n","<ng-container *ngIf=\"_prefix\">\n <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { DaffTabComponent } from '../tab/tab.component';\n\n/**\n * DaffTabPanelComponent is used to display the content panel of a tab.\n *\n * @example Basic structure of tab panel\n * ```html\n * <daff-tab-panel>\n * <!-- Tab panel content goes here -->\n * </daff-tab-panel>\n * ```\n */\n@Component({\n standalone: true,\n selector: 'daff-tab-panel',\n template: `<ng-content></ng-content>`,\n styleUrl: './tab-panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabPanelComponent {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tab-panel') private class = true;\n\n /**\n * Sets the `role` to tabpanel.\n */\n @HostBinding('attr.role') role = 'tabpanel';\n\n /**\n * `aria-labelledby` for the tab.\n */\n @HostBinding('attr.aria-labelledby') ariaLabelledBy = '';\n\n /**\n * Sets the `tabindex` to 0.\n */\n @HostBinding('attr.tabindex') tabIndex = '0';\n\n private _id = '';\n\n /**\n * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.\n */\n @HostBinding('attr.id') get tabPanelId() {\n return this._id;\n }\n\n constructor(private tab: DaffTabComponent) {\n /**\n * Sets the value of `ariaLabelledBy` to the id of the tab component.\n */\n this.ariaLabelledBy = this.tab.id;\n\n this._id = this.tab.panelId;\n }\n}\n","import {\n HostBinding,\n Input,\n OnInit,\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n ElementRef,\n} from '@angular/core';\n\nimport { DaffSelectableDirective } from '@daffodil/design';\n\n@Component({\n standalone: true,\n selector: '' +\n 'button[daff-tab-activator]' + ',' +\n 'a[daff-tab-activator]',\n template: `<ng-content></ng-content>`,\n styleUrl: './tab-activator.component.scss',\n hostDirectives: [\n {\n directive: DaffSelectableDirective,\n inputs: ['selected'],\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class DaffTabActivatorComponent implements OnInit {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tab-activator') class = true;\n\n /**\n * Sets the `role` to tab.\n */\n @HostBinding('attr.role') role = 'tab';\n\n /**\n * Sets `aria-selected` to true if the component is selected and false if it's not selected.\n */\n @HostBinding('attr.aria-selected') get ariaSelected() {\n return this.selectableDirective.selected ? true : false;\n }\n\n /**\n * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.\n */\n @HostBinding('attr.tabindex') get tabIndex() {\n return this.selectableDirective.selected ? '0' : '-1';\n }\n\n @HostBinding('attr.aria-controls') ariaControls = '';\n\n constructor(\n private el: ElementRef,\n private selectableDirective: DaffSelectableDirective,\n ) {\n }\n\n /**\n * The html id of the tab activator component\n */\n @Input() @HostBinding('attr.id') tabActivatorId = '';\n\n @Input() panelId = '';\n\n ngOnInit() {\n /**\n * Sets the value of `panelId` to the `ariaControls` property\n */\n this.ariaControls = this.panelId;\n }\n\n /**\n * Sets focus to the native element of the component\n */\n focus() {\n this.el.nativeElement.focus();\n }\n}\n","import {\n Location,\n NgTemplateOutlet,\n} from '@angular/common';\nimport {\n Component,\n HostBinding,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ContentChildren,\n QueryList,\n AfterContentInit,\n Input,\n Output,\n EventEmitter,\n ViewChildren,\n ChangeDetectorRef,\n OnInit,\n} from '@angular/core';\nimport {\n Params,\n RouterLink,\n RouterLinkActive,\n} from '@angular/router';\n\nimport { DaffTabComponent } from './tab/tab.component';\nimport { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';\nimport { DaffTabLabelComponent } from './tab-label/tab-label.component';\n\n/**\n * Tabs provide a way to navigate between panels that display related content.\n *\n * @example Basic use of the tabs component\n * ```html\n * <daff-tabs aria-label=\"List of tabs\">\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\t\tTab 1\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 1 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\tTab 2\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffSuffix></fa-icon>\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 2 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * </daff-tabs>\n * ```\n */\n@Component({\n selector: 'daff-tabs',\n templateUrl: './tabs.component.html',\n styleUrl: './tabs.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n RouterLink,\n RouterLinkActive,\n DaffTabActivatorComponent,\n ],\n})\n\nexport class DaffTabsComponent implements AfterContentInit, OnInit {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tabs') private class = true;\n\n /**\n * The currently selected tab. This property is dynamically updated when a user selects a tab.\n */\n selectedTab: string;\n\n /**\n * The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.\n */\n @Input() initiallySelected: string = null;\n\n /**\n * @docs-private\n */\n @HostBinding('attr.aria-label') private externalAriaLabel = null;\n\n /**\n * aria-label for the tab.\n */\n @Input('aria-label') ariaLabel = '';\n\n /**\n * Replace the tab buttons with links.\n */\n @Input() linkMode = false;\n\n /**\n * The URL to navigate to when the component is in link mode.\n * This component will set the specified query param.\n */\n @Input() url?: string;\n\n /**\n * The query parameter that the tabs component will use to set the tab value in link mode.\n */\n @Input() queryParam = 'tab';\n\n /**\n * Event emitted when tab selection changes.\n */\n @Output() tabChange = new EventEmitter<string>();\n\n /**\n * @docs-private\n */\n @ContentChildren(DaffTabLabelComponent, { descendants: true }) _labels: QueryList<DaffTabLabelComponent>;\n\n /**\n * @docs-private\n */\n @ContentChildren(DaffTabComponent) _tabs: QueryList<DaffTabComponent>;\n\n /**\n * @docs-private\n */\n @ViewChildren(DaffTabActivatorComponent) _tabActivators: QueryList<DaffTabActivatorComponent>;\n\n get currentPath(): string {\n return this.location.path();\n }\n\n constructor(\n private cdRef: ChangeDetectorRef,\n private location: Location,\n ) {}\n\n /**\n * @docs-private\n */\n ngOnInit(): void {\n this.location.onUrlChange(() => {\n if (this.linkMode) {\n this.selectedTab = null;\n this.ngAfterContentInit();\n }\n });\n }\n\n /**\n * @docs-private\n */\n ngAfterContentInit() {\n if(this.initiallySelected) {\n this.selectedTab = this.initiallySelected;\n }\n\n if (!this.selectedTab) {\n this.selectedTab = this._tabs.first.id;\n }\n }\n\n /**\n * Selects a tab and sets focus on the selected tab.\n */\n select(tabId: string) {\n const tabActivator = this._tabActivators.find(el => el.tabActivatorId === tabId);\n\n if (!tabActivator) {\n console.warn(`The tab '${tabId}' was not able to be selected because it does not exist. Check the id on your <daff-tab>s.`);\n return;\n }\n\n this.tabChange.emit(tabId);\n this.selectedTab = tabId;\n this.cdRef.markForCheck();\n\n tabActivator.focus();\n }\n\n /**\n * Navigates through the tabs based on the given offset.\n * Moves forward or backward in the tab array, wrapping around when necessary.\n */\n private navigateTabs(offset: number) {\n const array = this._tabs.toArray();\n let selectedIndex = array.findIndex(el => el.id === this.selectedTab);\n const startingIndex = selectedIndex;\n let newIndex;\n\n do {\n newIndex = (selectedIndex + offset + array.length) % array.length;\n selectedIndex = newIndex;\n } while (array[newIndex].disabled && selectedIndex !== startingIndex); // Skip disabled tabs\n\n this.select(array[newIndex].id);\n }\n\n /**\n * @docs-private\n */\n _buildQueryParams(tab: string): Params {\n return {\n [this.queryParam]: tab,\n };\n }\n\n /**\n * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.\n */\n previous() {\n this.navigateTabs(-1);\n }\n\n /**\n * Selects the next tab and wraps around to the first tab if the last tab is currently selected.\n */\n next() {\n this.navigateTabs(1);\n }\n\n /**\n * Selects the first tab.\n */\n selectFirst(event: KeyboardEvent | null) {\n event.preventDefault();\n this.select(this._tabs.toArray()[0].id);\n }\n\n /**\n * Selects the last tab.\n */\n selectLast(event: KeyboardEvent | null) {\n event.preventDefault();\n const array = this._tabs.toArray();\n this.select(array[array.length - 1].id);\n }\n}\n","<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t@if (linkMode && tab.disabled) {\n\t\t\t<button daff-tab-activator routerLinkActive\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t} @else if (linkMode) {\n\t\t\t<a daff-tab-activator routerLinkActive\n\t\t\t\tclass=\"daff-ae daff_tabs__link\"\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[routerLink]=\"url || currentPath\"\n\t\t\t\tqueryParamsHandling=\"merge\"\n\t\t\t\t[queryParams]=\"_buildQueryParams(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\"\n\t\t\t\t(isActiveChange)=\"$event && select(tab.id)\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</a>\n\t\t} @else {\n\t\t\t<button daff-tab-activator\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t(click)=\"select(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}","import { DaffPrefixSuffixModule } from '@daffodil/design';\n\nimport { DaffTabComponent } from './tabs/tab/tab.component';\nimport { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';\nimport { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';\nimport { DaffTabsComponent } from './tabs/tabs.component';\n\nexport const DAFF_TABS_COMPONENTS = <const>[\n DaffTabsComponent,\n DaffTabLabelComponent,\n DaffTabPanelComponent,\n DaffPrefixSuffixModule,\n DaffTabComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DaffTabComponent","i1"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"daffodil-design-tabs.mjs","sources":["../../../libs/design/tabs/src/tabs/tab/tab.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.ts","../../../libs/design/tabs/src/tabs/tab-label/tab-label.component.html","../../../libs/design/tabs/src/tabs/tab-panel/tab-panel.component.ts","../../../libs/design/tabs/src/tabs/tab-activator/tab-activator.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.ts","../../../libs/design/tabs/src/tabs/tabs.component.html","../../../libs/design/tabs/src/tabs.ts","../../../libs/design/tabs/src/daffodil-design-tabs.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n TemplateRef,\n ViewChild,\n Input,\n} from '@angular/core';\n\nlet tabId = 1;\n\n/**\n * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.\n *\n * A `<daff-tab>` should include the DaffTabLabelComponent and DaffTabPanelComponent components in order to properly structure the UI.\n *\n * @example Basic structure of tab\n * ```html\n * <daff-tab>\n * \t<daff-tab-label>\n * \t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\tTab 1\n * \t</daff-tab-label>\n * \t<daff-tab-panel>\n * \t\tTab 1 Panel\n * \t</daff-tab-panel>\n * </daff-tab>\n * ```\n */\n@Component({\n selector: 'daff-tab',\n template: `\n <ng-template #label>\n <ng-content select=\"daff-tab-label\"></ng-content>\n </ng-template>\n <ng-template #content>\n <ng-content select=\"daff-tab-panel\"></ng-content>\n </ng-template>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabComponent {\n /**\n * Whether the tab is disabled.\n *\n * @example Using the `disabled` property\n * ```html\n * <daff-tab [disabled]=\"true\">\n * </daff-tab>\n * ```\n */\n @Input() disabled = false;\n\n /**\n * @docs-private\n */\n @ViewChild('content', { read: TemplateRef, static: true }) contentRef: TemplateRef<any>;\n\n /**\n * @docs-private\n */\n @ViewChild('label', { read: TemplateRef, static: true }) labelRef: TemplateRef<any>;\n\n /**\n * A unique id for the tab component.\n *\n * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.\n *\n * @example Using the `id` property\n * ```html\n * <daff-tab [id]=\"'custom-id'\"></daff-tab>\n * ```\n */\n @Input() id = 'daff-tab-' + tabId;\n\n /**\n * @docs-private\n */\n panelId = 'daff-tab-panel-' + tabId;\n\n constructor() {\n tabId++;\n }\n}\n","import { NgIf } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n} from '@angular/core';\n\nimport {\n DaffPrefixDirective,\n DaffSuffixDirective,\n DaffPrefixable,\n DaffSuffixable,\n DaffPrefixSuffixModule,\n} from '@daffodil/design';\n\n/**\n * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.\n *\n * @example Basic structure of tab label\n * ```html\n * <daff-tab-label>\n * <div daffPrefix></div>\n * Label\n * <div daffSuffix></div\n * </daff-tab-Label>\n * ```\n */\n@Component({\n selector: 'daff-tab-label',\n templateUrl: './tab-label.component.html',\n styleUrl: './tab-label.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgIf,\n DaffPrefixSuffixModule,\n ],\n})\nexport class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {\n /**\n * @docs-private\n */\n @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;\n\n /**\n * @docs-private\n */\n @ContentChild(DaffSuffixDirective) _suffix: DaffSuffixDirective;\n}\n","<ng-container *ngIf=\"_prefix\">\n <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-tab-label__content\">\n <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { DaffTabComponent } from '../tab/tab.component';\n\n/**\n * DaffTabPanelComponent is used to display the content panel of a tab.\n *\n * @example Basic structure of tab panel\n * ```html\n * <daff-tab-panel>\n * <!-- Tab panel content goes here -->\n * </daff-tab-panel>\n * ```\n */\n@Component({\n selector: 'daff-tab-panel',\n template: `<ng-content></ng-content>`,\n styleUrl: './tab-panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffTabPanelComponent {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tab-panel') private class = true;\n\n /**\n * @docs-private\n *\n * Sets the `role` to tabpanel.\n */\n @HostBinding('attr.role') role = 'tabpanel';\n\n /**\n * @docs-private\n *\n * `aria-labelledby` for the tab.\n */\n @HostBinding('attr.aria-labelledby') ariaLabelledBy = '';\n\n /**\n * @docs-private\n *\n * Sets the `tabindex` to 0.\n */\n @HostBinding('attr.tabindex') tabIndex = '0';\n\n private _id = '';\n\n /**\n * @docs-private\n *\n * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.\n */\n @HostBinding('attr.id') get tabPanelId() {\n return this._id;\n }\n\n constructor(private tab: DaffTabComponent) {\n /**\n * Sets the value of `ariaLabelledBy` to the id of the tab component.\n */\n this.ariaLabelledBy = this.tab.id;\n\n this._id = this.tab.panelId;\n }\n}\n","import {\n HostBinding,\n Input,\n OnInit,\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n ElementRef,\n} from '@angular/core';\n\nimport { DaffSelectableDirective } from '@daffodil/design';\n\n@Component({\n selector: '' +\n 'button[daff-tab-activator]' + ',' +\n 'a[daff-tab-activator]',\n template: `<ng-content></ng-content>`,\n styleUrl: './tab-activator.component.scss',\n hostDirectives: [\n {\n directive: DaffSelectableDirective,\n inputs: ['selected'],\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class DaffTabActivatorComponent implements OnInit {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tab-activator') class = true;\n\n /**\n * Sets the `role` to tab.\n */\n @HostBinding('attr.role') role = 'tab';\n\n /**\n * Sets `aria-selected` to true if the component is selected and false if it's not selected.\n */\n @HostBinding('attr.aria-selected') get ariaSelected() {\n return this.selectableDirective.selected ? true : false;\n }\n\n /**\n * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.\n */\n @HostBinding('attr.tabindex') get tabIndex() {\n return this.selectableDirective.selected ? '0' : '-1';\n }\n\n @HostBinding('attr.aria-controls') ariaControls = '';\n\n constructor(\n private el: ElementRef,\n private selectableDirective: DaffSelectableDirective,\n ) {\n }\n\n /**\n * The html id of the tab activator component\n */\n @Input() @HostBinding('attr.id') tabActivatorId = '';\n\n @Input() panelId = '';\n\n ngOnInit() {\n /**\n * Sets the value of `panelId` to the `ariaControls` property\n */\n this.ariaControls = this.panelId;\n }\n\n /**\n * Sets focus to the native element of the component\n */\n focus() {\n this.el.nativeElement.focus();\n }\n}\n","import {\n Location,\n NgTemplateOutlet,\n} from '@angular/common';\nimport {\n Component,\n HostBinding,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ContentChildren,\n QueryList,\n AfterContentInit,\n Input,\n Output,\n EventEmitter,\n ViewChildren,\n ChangeDetectorRef,\n OnInit,\n} from '@angular/core';\nimport {\n Params,\n RouterLink,\n RouterLinkActive,\n} from '@angular/router';\n\nimport { DaffTabComponent } from './tab/tab.component';\nimport { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';\nimport { DaffTabLabelComponent } from './tab-label/tab-label.component';\n\n/**\n * Tabs provide a way to navigate between panels that display related content.\n *\n * @example Basic use of the tabs component\n * ```html\n * <daff-tabs aria-label=\"List of tabs\">\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffPrefix></fa-icon>\n * \t\t\tTab 1\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 1 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * \t<daff-tab>\n * \t\t<daff-tab-label>\n * \t\t\tTab 2\n * \t\t\t<fa-icon [icon]=\"faInfoCircle\" daffSuffix></fa-icon>\n * \t\t</daff-tab-label>\n * \t\t<daff-tab-panel>\n * \t\t\tTab 2 Panel\n * \t\t</daff-tab-panel>\n * \t</daff-tab>\n * </daff-tabs>\n * ```\n */\n@Component({\n selector: 'daff-tabs',\n templateUrl: './tabs.component.html',\n styleUrl: './tabs.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n RouterLink,\n RouterLinkActive,\n DaffTabActivatorComponent,\n ],\n})\n\nexport class DaffTabsComponent implements AfterContentInit, OnInit {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-tabs') private class = true;\n\n /**\n * @docs-private\n *\n * The currently selected tab. This property is dynamically updated when a user selects a tab.\n */\n selectedTab: string;\n\n /**\n * The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.\n */\n @Input() initiallySelected: string = null;\n\n /**\n * aria-label for the tab.\n */\n @HostBinding('attr.aria-label') private externalAriaLabel = null;\n\n /**\n * @docs-private\n *\n */\n @Input('aria-label') ariaLabel = '';\n\n /**\n * Replace the tab buttons as links.\n */\n @Input() linkMode = false;\n\n /**\n * The URL to navigate to when the component is in link mode.\n * This component will set the specified query param.\n */\n @Input() url?: string;\n\n /**\n * The query parameter that the tabs component will use to set the tab value in link mode.\n */\n @Input() queryParam = 'tab';\n\n /**\n * Event emitted when tab selection changes.\n */\n @Output() tabChange = new EventEmitter<string>();\n\n /**\n * @docs-private\n */\n @ContentChildren(DaffTabLabelComponent, { descendants: true }) _labels: QueryList<DaffTabLabelComponent>;\n\n /**\n * @docs-private\n */\n @ContentChildren(DaffTabComponent) _tabs: QueryList<DaffTabComponent>;\n\n /**\n * @docs-private\n */\n @ViewChildren(DaffTabActivatorComponent) _tabActivators: QueryList<DaffTabActivatorComponent>;\n\n /**\n * @docs-private\n */\n get currentPath(): string {\n return this.location.path();\n }\n\n constructor(\n private cdRef: ChangeDetectorRef,\n private location: Location,\n ) {}\n\n private reset() {\n if(this.initiallySelected) {\n this.selectedTab = this.initiallySelected;\n }\n\n if (!this.selectedTab) {\n this.selectedTab = this._tabs.first.id;\n }\n }\n\n /**\n * @docs-private\n */\n ngOnInit(): void {\n this.location.onUrlChange(() => {\n // if the app is navigated away from the current page, reset the state\n if (this.linkMode && !this.location.isCurrentPathEqualTo(this.url, `${this.queryParam}=${this.selectedTab}`)) {\n this.selectedTab = null;\n this.reset();\n this.tabChange.emit(this.selectedTab);\n }\n });\n }\n\n /**\n * @docs-private\n */\n ngAfterContentInit() {\n this.reset();\n }\n\n /**\n * @docs-private\n *\n * Selects a tab and sets focus on the selected tab.\n */\n select(tabId: string) {\n const tabActivator = this._tabActivators.find(el => el.tabActivatorId === tabId);\n\n if (!tabActivator) {\n console.warn(`The tab '${tabId}' was not able to be selected because it does not exist. Check the id on your <daff-tab>s.`);\n return;\n }\n\n this.tabChange.emit(tabId);\n this.selectedTab = tabId;\n this.cdRef.markForCheck();\n\n tabActivator.focus();\n }\n\n /**\n * Navigates through the tabs based on the given offset.\n * Moves forward or backward in the tab array, wrapping around when necessary.\n */\n private navigateTabs(offset: number) {\n const array = this._tabs.toArray();\n let selectedIndex = array.findIndex(el => el.id === this.selectedTab);\n const startingIndex = selectedIndex;\n let newIndex;\n\n do {\n newIndex = (selectedIndex + offset + array.length) % array.length;\n selectedIndex = newIndex;\n } while (array[newIndex].disabled && selectedIndex !== startingIndex); // Skip disabled tabs\n\n this.select(array[newIndex].id);\n }\n\n /**\n * @docs-private\n */\n _buildQueryParams(tab: string): Params {\n return {\n [this.queryParam]: tab,\n };\n }\n\n /**\n * @docs-private\n *\n * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.\n */\n previous() {\n this.navigateTabs(-1);\n }\n\n /**\n * @docs-private\n *\n * Selects the next tab and wraps around to the first tab if the last tab is currently selected.\n */\n next() {\n this.navigateTabs(1);\n }\n\n /**\n * @docs-private\n *\n * Selects the first tab.\n */\n selectFirst(event: KeyboardEvent | null) {\n event.preventDefault();\n this.select(this._tabs.toArray()[0].id);\n }\n\n /**\n * @docs-private\n *\n * Selects the last tab.\n */\n selectLast(event: KeyboardEvent | null) {\n event.preventDefault();\n const array = this._tabs.toArray();\n this.select(array[array.length - 1].id);\n }\n}\n","<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t@if (linkMode && tab.disabled) {\n\t\t\t<button daff-tab-activator routerLinkActive\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t} @else if (linkMode) {\n\t\t\t<a daff-tab-activator routerLinkActive\n\t\t\t\tclass=\"daff-ae daff_tabs__link\"\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[routerLink]=\"url || currentPath\"\n\t\t\t\tqueryParamsHandling=\"merge\"\n\t\t\t\t[queryParams]=\"_buildQueryParams(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\"\n\t\t\t\t(isActiveChange)=\"$event && select(tab.id)\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</a>\n\t\t} @else {\n\t\t\t<button daff-tab-activator\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t(click)=\"select(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}","import { DaffTabComponent } from './tabs/tab/tab.component';\nimport { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';\nimport { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';\nimport { DaffTabsComponent } from './tabs/tabs.component';\n\n/**\n * @docs-private\n *\n * ```ts\n * import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';\n * ```\n */\nexport const DAFF_TABS_COMPONENTS = <const> [\n DaffTabsComponent,\n DaffTabLabelComponent,\n DaffTabPanelComponent,\n DaffTabComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DaffTabComponent","i1"],"mappings":"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"}
|
@@ -3,10 +3,10 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
|
4
4
|
|
5
5
|
class BasicTextSnippetComponent {
|
6
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
7
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicTextSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: BasicTextSnippetComponent, isStandalone: true, selector: "basic-text-snippet", ngImport: i0, template: "<daff-text-snippet>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</daff-text-snippet>", dependencies: [{ kind: "component", type: DaffTextSnippetComponent, selector: "daff-text-snippet", inputs: ["condensed", "html"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
8
8
|
}
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicTextSnippetComponent, decorators: [{
|
10
10
|
type: Component,
|
11
11
|
args: [{ selector: 'basic-text-snippet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
12
12
|
DaffTextSnippetComponent,
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import { NgIf } from '@angular/common';
|
2
2
|
import * as i0 from '@angular/core';
|
3
3
|
import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Input, ViewChild, Output } from '@angular/core';
|
4
|
-
import * as
|
4
|
+
import * as i1 from '@daffodil/design/button';
|
5
5
|
import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
|
6
|
-
import * as i1 from '@daffodil/design';
|
7
6
|
|
8
7
|
class DaffTextSnippetComponent {
|
9
8
|
constructor() {
|
@@ -23,10 +22,10 @@ class DaffTextSnippetComponent {
|
|
23
22
|
this.condensed = !this.condensed;
|
24
23
|
this.toggle.emit(this.condensed);
|
25
24
|
}
|
26
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
27
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
25
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTextSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
26
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffTextSnippetComponent, isStandalone: true, selector: "daff-text-snippet", inputs: { condensed: "condensed", html: "html" }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentEl"], descendants: true, read: ElementRef }, { propertyName: "htmlRef", first: true, predicate: ["htmlEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n <ng-container *ngIf=\"condensed\">Show More</ng-container>\n <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DaffUnderlineButtonComponent, selector: "button[daff-underline-button],a[daff-underline-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
28
27
|
}
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTextSnippetComponent, decorators: [{
|
30
29
|
type: Component,
|
31
30
|
args: [{ selector: 'daff-text-snippet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
32
31
|
NgIf,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"daffodil-design-text-snippet.mjs","sources":["../../../libs/design/text-snippet/src/text-snippet.component.ts","../../../libs/design/text-snippet/src/text-snippet.component.html","../../../libs/design/text-snippet/src/daffodil-design-text-snippet.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport {\n Component,\n Input,\n ChangeDetectionStrategy,\n EventEmitter,\n Output,\n ElementRef,\n ViewChild,\n} from '@angular/core';\n\nimport { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';\n\n@Component({\n selector: 'daff-text-snippet',\n templateUrl: './text-snippet.component.html',\n styleUrls: ['./text-snippet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgIf,\n DAFF_BUTTON_COMPONENTS,\n ],\n})\nexport class DaffTextSnippetComponent {\n\n /**\n * A property to track whether or not the component\n * should render a condensed version of the content.\n */\n @Input() condensed = true;\n\n @Input() html = '';\n\n @ViewChild('contentEl', { read: ElementRef }) contentRef: ElementRef;\n @ViewChild('htmlEl', { read: ElementRef }) htmlRef: ElementRef;\n\n /**\n * An output event that can be used to track the state of the component externally.\n */\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n toggleSnippet() {\n this.condensed = !this.condensed;\n this.toggle.emit(this.condensed);\n }\n}\n","<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n <ng-container *ngIf=\"condensed\">Show More</ng-container>\n <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"daffodil-design-text-snippet.mjs","sources":["../../../libs/design/text-snippet/src/text-snippet.component.ts","../../../libs/design/text-snippet/src/text-snippet.component.html","../../../libs/design/text-snippet/src/daffodil-design-text-snippet.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport {\n Component,\n Input,\n ChangeDetectionStrategy,\n EventEmitter,\n Output,\n ElementRef,\n ViewChild,\n} from '@angular/core';\n\nimport { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';\n\n@Component({\n selector: 'daff-text-snippet',\n templateUrl: './text-snippet.component.html',\n styleUrls: ['./text-snippet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgIf,\n DAFF_BUTTON_COMPONENTS,\n ],\n})\nexport class DaffTextSnippetComponent {\n\n /**\n * A property to track whether or not the component\n * should render a condensed version of the content.\n */\n @Input() condensed = true;\n\n @Input() html = '';\n\n @ViewChild('contentEl', { read: ElementRef }) contentRef: ElementRef;\n @ViewChild('htmlEl', { read: ElementRef }) htmlRef: ElementRef;\n\n /**\n * An output event that can be used to track the state of the component externally.\n */\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n toggleSnippet() {\n this.condensed = !this.condensed;\n this.toggle.emit(this.condensed);\n }\n}\n","<div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\" *ngIf=\"html\"></div>\n<div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\" *ngIf=\"!html\">\n <ng-content></ng-content>\n</div>\n<button daff-underline-button color=\"theme-contrast\" [attr.aria-expanded]=\"!condensed ? true : false\" (click)=\"toggleSnippet()\">\n <ng-container *ngIf=\"condensed\">Show More</ng-container>\n <ng-container *ngIf=\"!condensed\">Show Less</ng-container>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAuBa,wBAAwB,CAAA;AAVrC,IAAA,WAAA,GAAA;AAYE;;;AAGG;QACM,IAAS,CAAA,SAAA,GAAG,IAAI;QAEhB,IAAI,CAAA,IAAA,GAAG,EAAE;AAKlB;;AAEG;;AAEO,QAAA,IAAA,CAAA,MAAM,GAA0B,IAAI,YAAY,EAAE;AAM7D;IAJC,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAChC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;;iIArBvB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,kPAUH,UAAU,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EACb,UAAU,EClCzC,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,ilBAQA,6dDWI,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIK,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAVpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAGZ,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,IAAI;wBACJ,sBAAsB;AACvB,qBAAA,EAAA,QAAA,EAAA,ilBAAA,EAAA,MAAA,EAAA,CAAA,qaAAA,CAAA,EAAA;8BAQQ,SAAS,EAAA,CAAA;sBAAjB;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBAE6C,UAAU,EAAA,CAAA;sBAAvD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;gBACD,OAAO,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;gBAM/B,MAAM,EAAA,CAAA;sBAAf;;;AExCH;;AAEG;;;;"}
|