@ngrdt/tabs 0.0.17 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
- # @ngrdt/tabs
2
-
3
- This library was generated with [Nx](https://nx.dev).
4
-
5
- ## Running unit tests
6
-
7
- Run `nx test @ngrdt/tabs` to execute the unit tests.
1
+ # @ngrdt/tabs
2
+
3
+ This library was generated with [Nx](https://nx.dev).
4
+
5
+ ## Running unit tests
6
+
7
+ Run `nx test @ngrdt/tabs` to execute the unit tests.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, TemplateRef, Directive, Injector, DestroyRef, booleanAttribute, Component, ChangeDetectionStrategy, Input, ViewChild, ContentChild, ContentChildren, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, ViewEncapsulation, Output, ViewChildren, HostBinding, HostListener, NgModule } from '@angular/core';
2
+ import { inject, TemplateRef, Directive, Injector, DestroyRef, booleanAttribute, ContentChild, ViewChild, Input, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, HostListener, HostBinding, ViewChildren, Output, ViewEncapsulation, NgModule } from '@angular/core';
3
3
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
4
  import * as i1 from '@ngrdt/core';
5
5
  import { RdtContainerDirective, RDT_GUARDED_COMPONENT, canTransition$, RdtChildDirective } from '@ngrdt/core';
@@ -11,13 +11,14 @@ import { CommonModule } from '@angular/common';
11
11
 
12
12
  class RdtDestroyInactiveDirective {
13
13
  template = inject(TemplateRef);
14
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtDestroyInactiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
15
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: RdtDestroyInactiveDirective, selector: "[rdtDestroyInactive]", ngImport: i0 });
14
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtDestroyInactiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
15
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: RdtDestroyInactiveDirective, isStandalone: false, selector: "[rdtDestroyInactive]", ngImport: i0 });
16
16
  }
17
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtDestroyInactiveDirective, decorators: [{
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtDestroyInactiveDirective, decorators: [{
18
18
  type: Directive,
19
19
  args: [{
20
20
  selector: '[rdtDestroyInactive]',
21
+ standalone: false,
21
22
  }]
22
23
  }] });
23
24
 
@@ -115,24 +116,24 @@ class RdtTabComponent {
115
116
  });
116
117
  }
117
118
  focusForm() {
118
- //TODO: getRdtAutofocusable(this.forms)?.rdtFocus();
119
+ //TODO: getRdtAutofocusable(this.forms)?.focus();
119
120
  }
120
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
121
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.7", type: RdtTabComponent, selector: "rdt-tab", inputs: { stateId: "stateId", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], label: "label", formAutofocus: ["formAutofocus", "formAutofocus", booleanAttribute], buttonClass: "buttonClass" }, providers: [
121
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
122
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.7", type: RdtTabComponent, isStandalone: false, selector: "rdt-tab", inputs: { stateId: "stateId", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], label: "label", formAutofocus: ["formAutofocus", "formAutofocus", booleanAttribute], buttonClass: "buttonClass" }, providers: [
122
123
  {
123
124
  provide: RDT_GUARDED_COMPONENT,
124
125
  useExisting: RdtTabComponent,
125
126
  },
126
- ], queries: [{ propertyName: "explicitContent", first: true, predicate: RdtDestroyInactiveDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdtContainerDirective }], ngImport: i0, template: "<ng-template>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
127
+ ], queries: [{ propertyName: "explicitContent", first: true, predicate: RdtDestroyInactiveDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdtContainerDirective }], ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
127
128
  }
128
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabComponent, decorators: [{
129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabComponent, decorators: [{
129
130
  type: Component,
130
131
  args: [{ selector: 'rdt-tab', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
131
132
  {
132
133
  provide: RDT_GUARDED_COMPONENT,
133
134
  useExisting: RdtTabComponent,
134
135
  },
135
- ], hostDirectives: [RdtContainerDirective], template: "<ng-template>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n" }]
136
+ ], hostDirectives: [RdtContainerDirective], standalone: false, template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n" }]
136
137
  }], propDecorators: { stateId: [{
137
138
  type: Input
138
139
  }], disabled: [{
@@ -554,15 +555,15 @@ class RdtTabControllerDirective {
554
555
  unbindAll() {
555
556
  this.shortcutSub.unsubscribe();
556
557
  }
557
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
558
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: RdtTabControllerDirective, selector: "[rdtTabController]", inputs: { rdtTabController: "rdtTabController" }, providers: [
558
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
559
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: RdtTabControllerDirective, isStandalone: false, selector: "[rdtTabController]", inputs: { rdtTabController: "rdtTabController" }, providers: [
559
560
  {
560
561
  provide: RDT_GUARDED_COMPONENT,
561
562
  useExisting: RdtTabControllerDirective,
562
563
  },
563
564
  ], queries: [{ propertyName: "childControllers", predicate: RdtTabControllerDirective, descendants: true }], hostDirectives: [{ directive: i1.RdtContainerDirective }], ngImport: i0 });
564
565
  }
565
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabControllerDirective, decorators: [{
566
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabControllerDirective, decorators: [{
566
567
  type: Directive,
567
568
  args: [{
568
569
  selector: '[rdtTabController]',
@@ -573,6 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
573
574
  },
574
575
  ],
575
576
  hostDirectives: [RdtContainerDirective],
577
+ standalone: false,
576
578
  }]
577
579
  }], propDecorators: { rdtTabController: [{
578
580
  type: Input
@@ -784,22 +786,22 @@ class RdtTabContainerComponent {
784
786
  getFirstEnabledTab() {
785
787
  return this.tabsList.find((t) => !t.disabled);
786
788
  }
787
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
788
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtTabContainerComponent, selector: "rdt-tab-container", inputs: { stateId: "stateId", value: "value", disabled: "disabled", formAutofocus: "formAutofocus", panelPosition: "panelPosition" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.active": "this._active", "class": "this.classes", "class.panel-horizontal": "this.isHorizontal", "class.panel-vertical": "this.isVertical", "attr.role": "this.attrRole" } }, providers: [
789
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
790
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: RdtTabContainerComponent, isStandalone: false, selector: "rdt-tab-container", inputs: { stateId: "stateId", value: "value", disabled: "disabled", formAutofocus: "formAutofocus", panelPosition: "panelPosition" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.active": "this._active", "class": "this.classes", "class.panel-horizontal": "this.isHorizontal", "class.panel-vertical": "this.isVertical", "attr.role": "this.attrRole" } }, providers: [
789
791
  {
790
792
  provide: RDT_GUARDED_COMPONENT,
791
793
  useExisting: RdtTabContainerComponent,
792
794
  },
793
- ], queries: [{ propertyName: "tabsList", predicate: RdtTabComponent }], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "tabHeaderButtons", predicate: ["headerButton"], descendants: true }], hostDirectives: [{ directive: i1.RdtChildDirective }], ngImport: i0, template: "<div class=\"tab-header-panel\" *ngIf=\"tabsList\">\r\n <button\r\n *ngFor=\"let tab of tabsList\"\r\n #headerButton\r\n class=\"px-2 py-1 tab-header-button\"\r\n (click)=\"activateTab(tab.stateId)\"\r\n [class.active]=\"value === tab.stateId\"\r\n [disabled]=\"tab.disabled\"\r\n [hidden]=\"!tab.visible\"\r\n role=\"tab\"\r\n [attr.aria-selected]=\"value === tab.stateId\"\r\n [attr.aria-controls]=\"'panel-' + tab.stateId\"\r\n [attr.tabindex]=\"value === tab.stateId ? 0 : -1\"\r\n [id]=\"'tab-' + tab.stateId\"\r\n [class]=\"tab.buttonClass\"\r\n type=\"button\"\r\n >\r\n {{ tab.label }}\r\n </button>\r\n</div>\r\n<div\r\n class=\"tab-content\"\r\n role=\"tabpanel\"\r\n [id]=\"'panel-' + value\"\r\n [attr.aria-labelledby]=\"'tab-' + value\"\r\n #tabContent\r\n>\r\n <ng-template [ngTemplateOutlet]=\"currentTemplate\"></ng-template>\r\n</div>\r\n", styles: ["dp3-tab-container{--tab-header-border-height: 2px;--tab-header-border-color: #e2e8f0;--tab-text-color: rgb(100, 116, 139);--active-tab-text-color: var(--primary-blue);--active-tab-border-color: var(--primary-blue);--disabled-tab-text-color: #b1b9c5;--tab-vertical-button-width: 200px;display:block;position:relative}dp3-tab-container.active>.tab-header-panel{background-color:var(--hover-blue)}dp3-tab-container.panel-vertical{display:flex}dp3-tab-container.panel-vertical>.tab-header-panel{position:absolute;top:0;height:100%;width:var(--tab-vertical-button-width);overflow-y:auto}dp3-tab-container.panel-vertical>.tab-header-panel>button{text-align:left;width:100%;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}dp3-tab-container.panel-vertical>.tab-content{width:calc(100% - var(--tab-vertical-button-width))}dp3-tab-container.panel-right{flex-direction:row-reverse}dp3-tab-container.panel-right>.tab-header-panel{right:0}dp3-tab-container.panel-left>.tab-header-panel{left:0}dp3-tab-container.panel-left>.tab-content{margin-left:var(--tab-vertical-button-width)}dp3-tab-container.panel-horizontal>.tab-header-panel{width:100%;white-space:nowrap;overflow-x:auto}dp3-tab-container.panel-bottom{display:flex;flex-direction:column-reverse}dp3-tab-container .tab-header-panel{position:relative;background-color:rgba(var(--primary-blue-rgb),.045)}dp3-tab-container .tab-header-panel:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--tab-header-border-color);margin-top:var(--tab-header-border-height);bottom:0;left:0;z-index:-1}dp3-tab-container .dot{position:absolute;width:.85rem;height:.85rem;padding:0 .1rem;background-color:var(--primary-blue);color:var(--white);font-size:x-small;border-radius:100%;top:.25rem;right:0rem}dp3-tab-container .tab-header-button{position:relative;background:none;font:inherit;outline:inherit;border:none;color:var(--tab-text-color);font-weight:700;font-size:1.1rem}dp3-tab-container .tab-header-button.active{position:relative;color:var(--active-tab-text-color)}dp3-tab-container .tab-header-button.active:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--active-tab-text-color);margin-top:var(--tab-header-border-height);bottom:0;left:0}dp3-tab-container .tab-header-button:disabled{color:var(--disabled-tab-text-color)}dp3-tab-container .tab-header-button.padding-small{padding-right:1.1rem!important}dp3-tab-container .tab-header-button.padding-large{padding-right:1.3rem!important}dp3-tab-container>.tab-content{min-width:0;width:100%;padding:.5rem}dp3-tab-container>.tab-content:has(>.dp3-tab-container){padding:0}dp3-tab-container>.tab-content>.dp3-tab-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
795
+ ], queries: [{ propertyName: "tabsList", predicate: RdtTabComponent }], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "tabHeaderButtons", predicate: ["headerButton"], descendants: true }], hostDirectives: [{ directive: i1.RdtChildDirective }], ngImport: i0, template: "<div class=\"tab-header-panel\" *ngIf=\"tabsList\">\n <button\n *ngFor=\"let tab of tabsList\"\n #headerButton\n class=\"px-2 py-1 tab-header-button\"\n (click)=\"activateTab(tab.stateId)\"\n [class.active]=\"value === tab.stateId\"\n [disabled]=\"tab.disabled\"\n [hidden]=\"!tab.visible\"\n role=\"tab\"\n [attr.aria-selected]=\"value === tab.stateId\"\n [attr.aria-controls]=\"'panel-' + tab.stateId\"\n [attr.tabindex]=\"value === tab.stateId ? 0 : -1\"\n [id]=\"'tab-' + tab.stateId\"\n [class]=\"tab.buttonClass\"\n type=\"button\"\n >\n {{ tab.label }}\n </button>\n</div>\n<div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'panel-' + value\"\n [attr.aria-labelledby]=\"'tab-' + value\"\n #tabContent\n>\n <ng-template [ngTemplateOutlet]=\"currentTemplate\"></ng-template>\n</div>\n", styles: ["dp3-tab-container{--tab-header-border-height: 2px;--tab-header-border-color: #e2e8f0;--tab-text-color: rgb(100, 116, 139);--active-tab-text-color: var(--primary-blue);--active-tab-border-color: var(--primary-blue);--disabled-tab-text-color: #b1b9c5;--tab-vertical-button-width: 200px;display:block;position:relative}dp3-tab-container.active>.tab-header-panel{background-color:var(--hover-blue)}dp3-tab-container.panel-vertical{display:flex}dp3-tab-container.panel-vertical>.tab-header-panel{position:absolute;top:0;height:100%;width:var(--tab-vertical-button-width);overflow-y:auto}dp3-tab-container.panel-vertical>.tab-header-panel>button{text-align:left;width:100%;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}dp3-tab-container.panel-vertical>.tab-content{width:calc(100% - var(--tab-vertical-button-width))}dp3-tab-container.panel-right{flex-direction:row-reverse}dp3-tab-container.panel-right>.tab-header-panel{right:0}dp3-tab-container.panel-left>.tab-header-panel{left:0}dp3-tab-container.panel-left>.tab-content{margin-left:var(--tab-vertical-button-width)}dp3-tab-container.panel-horizontal>.tab-header-panel{width:100%;white-space:nowrap;overflow-x:auto}dp3-tab-container.panel-bottom{display:flex;flex-direction:column-reverse}dp3-tab-container .tab-header-panel{position:relative;background-color:rgba(var(--primary-blue-rgb),.045)}dp3-tab-container .tab-header-panel:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--tab-header-border-color);margin-top:var(--tab-header-border-height);bottom:0;left:0;z-index:-1}dp3-tab-container .dot{position:absolute;width:.85rem;height:.85rem;padding:0 .1rem;background-color:var(--primary-blue);color:var(--white);font-size:x-small;border-radius:100%;top:.25rem;right:0rem}dp3-tab-container .tab-header-button{position:relative;background:none;font:inherit;outline:inherit;border:none;color:var(--tab-text-color);font-weight:700;font-size:1.1rem}dp3-tab-container .tab-header-button.active{position:relative;color:var(--active-tab-text-color)}dp3-tab-container .tab-header-button.active:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--active-tab-text-color);margin-top:var(--tab-header-border-height);bottom:0;left:0}dp3-tab-container .tab-header-button:disabled{color:var(--disabled-tab-text-color)}dp3-tab-container .tab-header-button.padding-small{padding-right:1.1rem!important}dp3-tab-container .tab-header-button.padding-large{padding-right:1.3rem!important}dp3-tab-container>.tab-content{min-width:0;width:100%;padding:.5rem}dp3-tab-container>.tab-content:has(>.dp3-tab-container){padding:0}dp3-tab-container>.tab-content>.dp3-tab-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
794
796
  }
795
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabContainerComponent, decorators: [{
797
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabContainerComponent, decorators: [{
796
798
  type: Component,
797
799
  args: [{ selector: 'rdt-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
798
800
  {
799
801
  provide: RDT_GUARDED_COMPONENT,
800
802
  useExisting: RdtTabContainerComponent,
801
803
  },
802
- ], hostDirectives: [RdtChildDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-header-panel\" *ngIf=\"tabsList\">\r\n <button\r\n *ngFor=\"let tab of tabsList\"\r\n #headerButton\r\n class=\"px-2 py-1 tab-header-button\"\r\n (click)=\"activateTab(tab.stateId)\"\r\n [class.active]=\"value === tab.stateId\"\r\n [disabled]=\"tab.disabled\"\r\n [hidden]=\"!tab.visible\"\r\n role=\"tab\"\r\n [attr.aria-selected]=\"value === tab.stateId\"\r\n [attr.aria-controls]=\"'panel-' + tab.stateId\"\r\n [attr.tabindex]=\"value === tab.stateId ? 0 : -1\"\r\n [id]=\"'tab-' + tab.stateId\"\r\n [class]=\"tab.buttonClass\"\r\n type=\"button\"\r\n >\r\n {{ tab.label }}\r\n </button>\r\n</div>\r\n<div\r\n class=\"tab-content\"\r\n role=\"tabpanel\"\r\n [id]=\"'panel-' + value\"\r\n [attr.aria-labelledby]=\"'tab-' + value\"\r\n #tabContent\r\n>\r\n <ng-template [ngTemplateOutlet]=\"currentTemplate\"></ng-template>\r\n</div>\r\n", styles: ["dp3-tab-container{--tab-header-border-height: 2px;--tab-header-border-color: #e2e8f0;--tab-text-color: rgb(100, 116, 139);--active-tab-text-color: var(--primary-blue);--active-tab-border-color: var(--primary-blue);--disabled-tab-text-color: #b1b9c5;--tab-vertical-button-width: 200px;display:block;position:relative}dp3-tab-container.active>.tab-header-panel{background-color:var(--hover-blue)}dp3-tab-container.panel-vertical{display:flex}dp3-tab-container.panel-vertical>.tab-header-panel{position:absolute;top:0;height:100%;width:var(--tab-vertical-button-width);overflow-y:auto}dp3-tab-container.panel-vertical>.tab-header-panel>button{text-align:left;width:100%;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}dp3-tab-container.panel-vertical>.tab-content{width:calc(100% - var(--tab-vertical-button-width))}dp3-tab-container.panel-right{flex-direction:row-reverse}dp3-tab-container.panel-right>.tab-header-panel{right:0}dp3-tab-container.panel-left>.tab-header-panel{left:0}dp3-tab-container.panel-left>.tab-content{margin-left:var(--tab-vertical-button-width)}dp3-tab-container.panel-horizontal>.tab-header-panel{width:100%;white-space:nowrap;overflow-x:auto}dp3-tab-container.panel-bottom{display:flex;flex-direction:column-reverse}dp3-tab-container .tab-header-panel{position:relative;background-color:rgba(var(--primary-blue-rgb),.045)}dp3-tab-container .tab-header-panel:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--tab-header-border-color);margin-top:var(--tab-header-border-height);bottom:0;left:0;z-index:-1}dp3-tab-container .dot{position:absolute;width:.85rem;height:.85rem;padding:0 .1rem;background-color:var(--primary-blue);color:var(--white);font-size:x-small;border-radius:100%;top:.25rem;right:0rem}dp3-tab-container .tab-header-button{position:relative;background:none;font:inherit;outline:inherit;border:none;color:var(--tab-text-color);font-weight:700;font-size:1.1rem}dp3-tab-container .tab-header-button.active{position:relative;color:var(--active-tab-text-color)}dp3-tab-container .tab-header-button.active:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--active-tab-text-color);margin-top:var(--tab-header-border-height);bottom:0;left:0}dp3-tab-container .tab-header-button:disabled{color:var(--disabled-tab-text-color)}dp3-tab-container .tab-header-button.padding-small{padding-right:1.1rem!important}dp3-tab-container .tab-header-button.padding-large{padding-right:1.3rem!important}dp3-tab-container>.tab-content{min-width:0;width:100%;padding:.5rem}dp3-tab-container>.tab-content:has(>.dp3-tab-container){padding:0}dp3-tab-container>.tab-content>.dp3-tab-container{width:100%;height:100%}\n"] }]
804
+ ], hostDirectives: [RdtChildDirective], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"tab-header-panel\" *ngIf=\"tabsList\">\n <button\n *ngFor=\"let tab of tabsList\"\n #headerButton\n class=\"px-2 py-1 tab-header-button\"\n (click)=\"activateTab(tab.stateId)\"\n [class.active]=\"value === tab.stateId\"\n [disabled]=\"tab.disabled\"\n [hidden]=\"!tab.visible\"\n role=\"tab\"\n [attr.aria-selected]=\"value === tab.stateId\"\n [attr.aria-controls]=\"'panel-' + tab.stateId\"\n [attr.tabindex]=\"value === tab.stateId ? 0 : -1\"\n [id]=\"'tab-' + tab.stateId\"\n [class]=\"tab.buttonClass\"\n type=\"button\"\n >\n {{ tab.label }}\n </button>\n</div>\n<div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'panel-' + value\"\n [attr.aria-labelledby]=\"'tab-' + value\"\n #tabContent\n>\n <ng-template [ngTemplateOutlet]=\"currentTemplate\"></ng-template>\n</div>\n", styles: ["dp3-tab-container{--tab-header-border-height: 2px;--tab-header-border-color: #e2e8f0;--tab-text-color: rgb(100, 116, 139);--active-tab-text-color: var(--primary-blue);--active-tab-border-color: var(--primary-blue);--disabled-tab-text-color: #b1b9c5;--tab-vertical-button-width: 200px;display:block;position:relative}dp3-tab-container.active>.tab-header-panel{background-color:var(--hover-blue)}dp3-tab-container.panel-vertical{display:flex}dp3-tab-container.panel-vertical>.tab-header-panel{position:absolute;top:0;height:100%;width:var(--tab-vertical-button-width);overflow-y:auto}dp3-tab-container.panel-vertical>.tab-header-panel>button{text-align:left;width:100%;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}dp3-tab-container.panel-vertical>.tab-content{width:calc(100% - var(--tab-vertical-button-width))}dp3-tab-container.panel-right{flex-direction:row-reverse}dp3-tab-container.panel-right>.tab-header-panel{right:0}dp3-tab-container.panel-left>.tab-header-panel{left:0}dp3-tab-container.panel-left>.tab-content{margin-left:var(--tab-vertical-button-width)}dp3-tab-container.panel-horizontal>.tab-header-panel{width:100%;white-space:nowrap;overflow-x:auto}dp3-tab-container.panel-bottom{display:flex;flex-direction:column-reverse}dp3-tab-container .tab-header-panel{position:relative;background-color:rgba(var(--primary-blue-rgb),.045)}dp3-tab-container .tab-header-panel:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--tab-header-border-color);margin-top:var(--tab-header-border-height);bottom:0;left:0;z-index:-1}dp3-tab-container .dot{position:absolute;width:.85rem;height:.85rem;padding:0 .1rem;background-color:var(--primary-blue);color:var(--white);font-size:x-small;border-radius:100%;top:.25rem;right:0rem}dp3-tab-container .tab-header-button{position:relative;background:none;font:inherit;outline:inherit;border:none;color:var(--tab-text-color);font-weight:700;font-size:1.1rem}dp3-tab-container .tab-header-button.active{position:relative;color:var(--active-tab-text-color)}dp3-tab-container .tab-header-button.active:after{content:\"\";position:absolute;width:100%;height:var(--tab-header-border-height);background-color:var(--active-tab-text-color);margin-top:var(--tab-header-border-height);bottom:0;left:0}dp3-tab-container .tab-header-button:disabled{color:var(--disabled-tab-text-color)}dp3-tab-container .tab-header-button.padding-small{padding-right:1.1rem!important}dp3-tab-container .tab-header-button.padding-large{padding-right:1.3rem!important}dp3-tab-container>.tab-content{min-width:0;width:100%;padding:.5rem}dp3-tab-container>.tab-content:has(>.dp3-tab-container){padding:0}dp3-tab-container>.tab-content>.dp3-tab-container{width:100%;height:100%}\n"] }]
803
805
  }], propDecorators: { stateId: [{
804
806
  type: Input
805
807
  }], value: [{
@@ -846,17 +848,17 @@ var RdtTabMode;
846
848
  })(RdtTabMode || (RdtTabMode = {}));
847
849
 
848
850
  class RdtTabsModule {
849
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
850
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: RdtTabsModule, declarations: [RdtTabComponent,
851
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
852
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: RdtTabsModule, declarations: [RdtTabComponent,
851
853
  RdtTabContainerComponent,
852
854
  RdtTabControllerDirective,
853
855
  RdtDestroyInactiveDirective], imports: [CommonModule], exports: [RdtTabComponent,
854
856
  RdtTabContainerComponent,
855
857
  RdtTabControllerDirective,
856
858
  RdtDestroyInactiveDirective] });
857
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabsModule, imports: [CommonModule] });
859
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabsModule, imports: [CommonModule] });
858
860
  }
859
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtTabsModule, decorators: [{
861
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtTabsModule, decorators: [{
860
862
  type: NgModule,
861
863
  args: [{
862
864
  declarations: [
@@ -891,8 +893,8 @@ class StaticRdtTabsShortcutStrategy {
891
893
  ctrl.activateTabContainer(tab.tabContainer);
892
894
  }
893
895
  else {
894
- console.warn(`Registered shortcut has been detected,
895
- but there is no tab with appropriate value.
896
+ console.warn(`Registered shortcut has been detected,
897
+ but there is no tab with appropriate value.
896
898
  Shortcut: ${shortcut}, value: ${value}`);
897
899
  }
898
900
  }