@datarailsshared/datarailsshared 1.5.462 → 1.5.463
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/datarailsshared-datarailsshared-1.5.463.tgz +0 -0
- package/esm2022/lib/dr-tabs/dr-tab.component.mjs +4 -2
- package/esm2022/lib/dr-tabs/dr-tabs.component.mjs +88 -39
- package/fesm2022/datarailsshared-datarailsshared.mjs +90 -39
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-tabs/dr-tab.component.d.ts +2 -1
- package/lib/dr-tabs/dr-tabs.component.d.ts +4 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.5.462.tgz +0 -0
|
@@ -8646,7 +8646,7 @@ class DrTabComponent {
|
|
|
8646
8646
|
} if (rf & 2) {
|
|
8647
8647
|
let _t;
|
|
8648
8648
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
|
|
8649
|
-
} }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip" }, ngContentSelectors: _c0$d, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8649
|
+
} }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip", customLabelTemplate: "customLabelTemplate" }, ngContentSelectors: _c0$d, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8650
8650
|
i0.ɵɵprojectionDef();
|
|
8651
8651
|
i0.ɵɵtemplate(0, DrTabComponent_ng_template_0_Template, 1, 0, "ng-template");
|
|
8652
8652
|
} }, encapsulation: 2 }); }
|
|
@@ -8671,82 +8671,124 @@ class DrTabComponent {
|
|
|
8671
8671
|
type: Input
|
|
8672
8672
|
}], tooltip: [{
|
|
8673
8673
|
type: Input
|
|
8674
|
+
}], customLabelTemplate: [{
|
|
8675
|
+
type: Input
|
|
8674
8676
|
}], contentTemplate: [{
|
|
8675
8677
|
type: ViewChild,
|
|
8676
8678
|
args: [TemplateRef]
|
|
8677
8679
|
}] }); })();
|
|
8678
8680
|
|
|
8679
|
-
function
|
|
8680
|
-
const
|
|
8681
|
-
i0.ɵɵelementStart(0, "dr-radio-button",
|
|
8682
|
-
i0.ɵɵlistener("ngModelChange", function
|
|
8681
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
|
|
8682
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
8683
|
+
i0.ɵɵelementStart(0, "dr-radio-button", 8);
|
|
8684
|
+
i0.ɵɵlistener("ngModelChange", function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_1_ng_template_1_Template_dr_radio_button_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r12._selectedIndex = $event); });
|
|
8683
8685
|
i0.ɵɵelementEnd();
|
|
8684
8686
|
i0.ɵɵtext(1);
|
|
8685
8687
|
} if (rf & 2) {
|
|
8686
|
-
const
|
|
8687
|
-
const index_r2 =
|
|
8688
|
-
const tab_r1 =
|
|
8689
|
-
const
|
|
8690
|
-
i0.ɵɵproperty("value", index_r2)("ngModel",
|
|
8688
|
+
const ctx_r14 = i0.ɵɵnextContext(3);
|
|
8689
|
+
const index_r2 = ctx_r14.index;
|
|
8690
|
+
const tab_r1 = ctx_r14.$implicit;
|
|
8691
|
+
const ctx_r11 = i0.ɵɵnextContext();
|
|
8692
|
+
i0.ɵɵproperty("value", index_r2)("ngModel", ctx_r11._selectedIndex);
|
|
8691
8693
|
i0.ɵɵadvance(1);
|
|
8692
8694
|
i0.ɵɵtextInterpolate1(" ", tab_r1.label, " ");
|
|
8693
8695
|
} }
|
|
8694
|
-
function
|
|
8696
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
8695
8697
|
i0.ɵɵelementContainerStart(0);
|
|
8696
|
-
i0.ɵɵtemplate(1,
|
|
8698
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_1_ng_template_1_Template, 2, 3, "ng-template", 7);
|
|
8697
8699
|
i0.ɵɵelementContainerEnd();
|
|
8698
8700
|
} }
|
|
8699
|
-
function
|
|
8700
|
-
i0.ɵɵelementStart(0, "label",
|
|
8701
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
|
|
8702
|
+
i0.ɵɵelementStart(0, "label", 9);
|
|
8701
8703
|
i0.ɵɵtext(1);
|
|
8702
8704
|
i0.ɵɵelementEnd();
|
|
8703
8705
|
} if (rf & 2) {
|
|
8704
|
-
const tab_r1 = i0.ɵɵnextContext(
|
|
8706
|
+
const tab_r1 = i0.ɵɵnextContext(3).$implicit;
|
|
8705
8707
|
i0.ɵɵproperty("drTooltip", tab_r1.tooltip);
|
|
8706
8708
|
i0.ɵɵadvance(1);
|
|
8707
8709
|
i0.ɵɵtextInterpolate(tab_r1.label);
|
|
8708
8710
|
} }
|
|
8709
|
-
function
|
|
8711
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
8710
8712
|
i0.ɵɵelementContainerStart(0);
|
|
8711
|
-
i0.ɵɵtemplate(1,
|
|
8713
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_2_ng_template_1_Template, 2, 2, "ng-template", 7);
|
|
8712
8714
|
i0.ɵɵelementContainerEnd();
|
|
8713
8715
|
} }
|
|
8714
|
-
function
|
|
8715
|
-
i0.ɵɵelementStart(0, "span",
|
|
8716
|
-
i0.ɵɵelement(1, "i",
|
|
8716
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
|
|
8717
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
8718
|
+
i0.ɵɵelement(1, "i", 11);
|
|
8717
8719
|
i0.ɵɵelementEnd();
|
|
8718
8720
|
} if (rf & 2) {
|
|
8719
|
-
const tab_r1 = i0.ɵɵnextContext(
|
|
8721
|
+
const tab_r1 = i0.ɵɵnextContext(3).$implicit;
|
|
8720
8722
|
i0.ɵɵadvance(1);
|
|
8721
8723
|
i0.ɵɵproperty("ngClass", tab_r1.icon);
|
|
8722
8724
|
} }
|
|
8723
|
-
function
|
|
8725
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
8724
8726
|
i0.ɵɵelementContainerStart(0);
|
|
8725
|
-
i0.ɵɵtemplate(1,
|
|
8727
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_3_ng_template_1_Template, 2, 1, "ng-template", 7);
|
|
8726
8728
|
i0.ɵɵelementContainerEnd();
|
|
8727
8729
|
} }
|
|
8730
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
|
|
8731
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
8732
|
+
i0.ɵɵelement(1, "i", 11);
|
|
8733
|
+
i0.ɵɵelementEnd();
|
|
8734
|
+
} if (rf & 2) {
|
|
8735
|
+
const tab_r1 = i0.ɵɵnextContext(3).$implicit;
|
|
8736
|
+
i0.ɵɵadvance(1);
|
|
8737
|
+
i0.ɵɵproperty("ngClass", tab_r1.icon);
|
|
8738
|
+
} }
|
|
8739
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
8740
|
+
i0.ɵɵelementContainerStart(0);
|
|
8741
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_4_ng_template_1_Template, 2, 1, "ng-template", 7);
|
|
8742
|
+
i0.ɵɵelementContainerEnd();
|
|
8743
|
+
} }
|
|
8744
|
+
function DrTabsComponent_mat_tab_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
8745
|
+
i0.ɵɵelementContainerStart(0);
|
|
8746
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_1_Template, 2, 0, "ng-container", 6);
|
|
8747
|
+
i0.ɵɵtemplate(2, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_2_Template, 2, 0, "ng-container", 6);
|
|
8748
|
+
i0.ɵɵtemplate(3, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_3_Template, 2, 0, "ng-container", 6);
|
|
8749
|
+
i0.ɵɵtemplate(4, DrTabsComponent_mat_tab_1_ng_container_1_ng_container_4_Template, 2, 0, "ng-container", 6);
|
|
8750
|
+
i0.ɵɵelementContainerEnd();
|
|
8751
|
+
} if (rf & 2) {
|
|
8752
|
+
const tab_r1 = i0.ɵɵnextContext().$implicit;
|
|
8753
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
8754
|
+
i0.ɵɵadvance(1);
|
|
8755
|
+
i0.ɵɵproperty("ngIf", ctx_r3.withRadio);
|
|
8756
|
+
i0.ɵɵadvance(1);
|
|
8757
|
+
i0.ɵɵproperty("ngIf", tab_r1.tooltip && !ctx_r3.withRadio && !ctx_r3.withIcon);
|
|
8758
|
+
i0.ɵɵadvance(1);
|
|
8759
|
+
i0.ɵɵproperty("ngIf", ctx_r3.withIcon);
|
|
8760
|
+
i0.ɵɵadvance(1);
|
|
8761
|
+
i0.ɵɵproperty("ngIf", ctx_r3.withIcon);
|
|
8762
|
+
} }
|
|
8763
|
+
function DrTabsComponent_mat_tab_1_ng_template_2_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
8764
|
+
i0.ɵɵelementContainer(0);
|
|
8765
|
+
} }
|
|
8766
|
+
function DrTabsComponent_mat_tab_1_ng_template_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
|
|
8767
|
+
i0.ɵɵtemplate(0, DrTabsComponent_mat_tab_1_ng_template_2_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 5);
|
|
8768
|
+
} if (rf & 2) {
|
|
8769
|
+
const tab_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
8770
|
+
i0.ɵɵproperty("ngTemplateOutlet", tab_r1.customLabelTemplate);
|
|
8771
|
+
} }
|
|
8772
|
+
function DrTabsComponent_mat_tab_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
8773
|
+
i0.ɵɵtemplate(0, DrTabsComponent_mat_tab_1_ng_template_2_ng_template_0_Template, 1, 1, "ng-template", 7);
|
|
8774
|
+
} }
|
|
8728
8775
|
function DrTabsComponent_mat_tab_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
8729
8776
|
i0.ɵɵelementContainer(0);
|
|
8730
8777
|
} }
|
|
8731
8778
|
function DrTabsComponent_mat_tab_1_Template(rf, ctx) { if (rf & 1) {
|
|
8732
8779
|
i0.ɵɵelementStart(0, "mat-tab", 2);
|
|
8733
|
-
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_Template,
|
|
8734
|
-
i0.ɵɵtemplate(2,
|
|
8735
|
-
i0.ɵɵtemplate(
|
|
8736
|
-
i0.ɵɵtemplate(4, DrTabsComponent_mat_tab_1_ng_container_4_Template, 1, 0, "ng-container", 4);
|
|
8780
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_ng_container_1_Template, 5, 4, "ng-container", 3);
|
|
8781
|
+
i0.ɵɵtemplate(2, DrTabsComponent_mat_tab_1_ng_template_2_Template, 1, 0, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
|
|
8782
|
+
i0.ɵɵtemplate(4, DrTabsComponent_mat_tab_1_ng_container_4_Template, 1, 0, "ng-container", 5);
|
|
8737
8783
|
i0.ɵɵelementEnd();
|
|
8738
8784
|
} if (rf & 2) {
|
|
8739
8785
|
const tab_r1 = ctx.$implicit;
|
|
8740
|
-
const
|
|
8786
|
+
const _r4 = i0.ɵɵreference(3);
|
|
8741
8787
|
i0.ɵɵpropertyInterpolate("label", tab_r1.label);
|
|
8742
8788
|
i0.ɵɵproperty("disabled", tab_r1.disabled);
|
|
8743
8789
|
i0.ɵɵadvance(1);
|
|
8744
|
-
i0.ɵɵproperty("ngIf",
|
|
8745
|
-
i0.ɵɵadvance(
|
|
8746
|
-
i0.ɵɵproperty("ngIf", tab_r1.tooltip && !ctx_r0.withRadio && !ctx_r0.withIcon);
|
|
8747
|
-
i0.ɵɵadvance(1);
|
|
8748
|
-
i0.ɵɵproperty("ngIf", ctx_r0.withIcon);
|
|
8749
|
-
i0.ɵɵadvance(1);
|
|
8790
|
+
i0.ɵɵproperty("ngIf", !tab_r1.customLabelTemplate)("ngIfElse", _r4);
|
|
8791
|
+
i0.ɵɵadvance(3);
|
|
8750
8792
|
i0.ɵɵproperty("ngTemplateOutlet", tab_r1.contentTemplate);
|
|
8751
8793
|
} }
|
|
8752
8794
|
class DrTabsComponent {
|
|
@@ -8789,7 +8831,10 @@ class DrTabsComponent {
|
|
|
8789
8831
|
this.noBodyPadding = false;
|
|
8790
8832
|
this.hideTabs = false;
|
|
8791
8833
|
this.noHeaderBorder = false;
|
|
8834
|
+
this.noLabelBorders = false;
|
|
8792
8835
|
this.noTabLabelsPadding = false;
|
|
8836
|
+
this.noLabelPadding = false;
|
|
8837
|
+
this.noFixedTabHeight = false;
|
|
8793
8838
|
this.selectedTabChange = new EventEmitter();
|
|
8794
8839
|
this.selectedTabIdChange = new EventEmitter();
|
|
8795
8840
|
}
|
|
@@ -8824,21 +8869,21 @@ class DrTabsComponent {
|
|
|
8824
8869
|
} if (rf & 2) {
|
|
8825
8870
|
let _t;
|
|
8826
8871
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabsContentList = _t);
|
|
8827
|
-
} }, inputs: { theme: "theme", disableAnimation: "disableAnimation", selectedTab: "selectedTab", selectedTabId: "selectedTabId", withRadio: "withRadio", withIcon: "withIcon", vertical: "vertical", noBodyPadding: "noBodyPadding", hideTabs: "hideTabs", noHeaderBorder: "noHeaderBorder", noTabLabelsPadding: "noTabLabelsPadding" }, outputs: { selectedTabChange: "selectedTabChange", selectedTabIdChange: "selectedTabIdChange" }, decls: 2, vars:
|
|
8872
|
+
} }, inputs: { theme: "theme", disableAnimation: "disableAnimation", selectedTab: "selectedTab", selectedTabId: "selectedTabId", withRadio: "withRadio", withIcon: "withIcon", vertical: "vertical", noBodyPadding: "noBodyPadding", hideTabs: "hideTabs", noHeaderBorder: "noHeaderBorder", noLabelBorders: "noLabelBorders", noTabLabelsPadding: "noTabLabelsPadding", noLabelPadding: "noLabelPadding", noFixedTabHeight: "noFixedTabHeight" }, outputs: { selectedTabChange: "selectedTabChange", selectedTabIdChange: "selectedTabIdChange" }, decls: 2, vars: 22, consts: [["disableRipple", "", 3, "ngClass", "selectedIndex", "animationDuration", "selectedIndexChange"], [3, "label", "disabled", 4, "ngFor", "ngForOf"], [3, "label", "disabled"], [4, "ngIf", "ngIfElse"], ["customLabel", ""], [4, "ngTemplateOutlet"], [4, "ngIf"], ["mat-tab-label", ""], [3, "value", "ngModel", "ngModelChange"], [1, "cursor-pointer", 3, "drTooltip"], [1, "icon-tab__wrapper"], [1, "cursor-pointer", 3, "ngClass"]], template: function DrTabsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8828
8873
|
i0.ɵɵelementStart(0, "mat-tab-group", 0);
|
|
8829
8874
|
i0.ɵɵlistener("selectedIndexChange", function DrTabsComponent_Template_mat_tab_group_selectedIndexChange_0_listener($event) { return ctx.selectedIndexChange($event); });
|
|
8830
|
-
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_Template, 5,
|
|
8875
|
+
i0.ɵɵtemplate(1, DrTabsComponent_mat_tab_1_Template, 5, 5, "mat-tab", 1);
|
|
8831
8876
|
i0.ɵɵelementEnd();
|
|
8832
8877
|
} if (rf & 2) {
|
|
8833
|
-
i0.ɵɵclassProp("with-radio", ctx.withRadio)("vertical", ctx.vertical)("no-tab-labels-padding", ctx.noTabLabelsPadding)("no-body-padding", ctx.noBodyPadding)("no-tabs", ctx.hideTabs)("no-header-border", ctx.noHeaderBorder);
|
|
8878
|
+
i0.ɵɵclassProp("with-radio", ctx.withRadio)("vertical", ctx.vertical)("no-tab-labels-padding", ctx.noTabLabelsPadding)("no-label-padding", ctx.noLabelPadding)("no-body-padding", ctx.noBodyPadding)("no-tabs", ctx.hideTabs)("no-header-border", ctx.noHeaderBorder)("no-label-borders", ctx.noLabelBorders)("no-fixed-tab-height", ctx.noFixedTabHeight);
|
|
8834
8879
|
i0.ɵɵproperty("ngClass", ctx.theme)("selectedIndex", ctx._selectedIndex)("animationDuration", ctx.disableAnimation || ctx.vertical || ctx._disableAnimationTemp ? "0ms" : "500ms");
|
|
8835
8880
|
i0.ɵɵadvance(1);
|
|
8836
8881
|
i0.ɵɵproperty("ngForOf", ctx.tabsContentList);
|
|
8837
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2.MatTabLabel, i2.MatTab, i2.MatTabGroup, i1$2.NgControlStatus, i1$2.NgModel, RadioButtonComponent, DrTooltipDirective], styles: ["[_nghost-%COMP%]{width:100%}[_nghost-%COMP%] .cursor-pointer[_ngcontent-%COMP%]{cursor:pointer}[_nghost-%COMP%] .mat-mdc-tab-group, [_nghost-%COMP%] .mat-mdc-tab-body-wrapper{height:100%}[_nghost-%COMP%] .mat-mdc-tab-group{font-family:Poppins,sans-serif}[_nghost-%COMP%] .mat-mdc-tab-nav-bar, [_nghost-%COMP%] .mat-mdc-tab-header{border-bottom:1px solid #d5dae5}[_nghost-%COMP%] .mat-mdc-tab-labels{padding:0 17px}[_nghost-%COMP%] .mat-mdc-tab, [_nghost-%COMP%] .mat-mdc-tab:hover{-webkit-tap-highlight-color:#ffffff}[_nghost-%COMP%] .mat-mdc-tab .mdc-tab__text-label, [_nghost-%COMP%] .mat-mdc-tab:hover .mdc-tab__text-label{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:Poppins,sans-serif;letter-spacing:0}[_nghost-%COMP%] .mat-mdc-tab .mdc-tab__ripple{display:none}[_nghost-%COMP%] .mdc-tab-indicator__content{height:3px;border:none;border-radius:5px;background-color:#4646ce!important}[_nghost-%COMP%] .mdc-tab{padding:0 8px;min-width:0;height:38px!important;flex-grow:0!important;opacity:1}[_nghost-%COMP%] .mdc-tab:not(:last-child){margin-right:21px}[_nghost-%COMP%] .mdc-tab--active .mat-mdc-tab-body-content{transform:unset!important}[_nghost-%COMP%] .mdc-tab--active .mdc-tab__content .mdc-tab__text-label, [_nghost-%COMP%] .mdc-tab--active:hover .mdc-tab__content .mdc-tab__text-label, [_nghost-%COMP%] .mdc-tab--active:focus .mdc-tab__content .mdc-tab__text-label{color:#4646ce;font-weight:700}[_nghost-%COMP%] .with-radio .mat-mdc-tab-labels{margin-bottom:0;padding:12px 8px}[_nghost-%COMP%] .with-radio .mdc-tab{padding:0 16px;min-width:0;justify-content:start;height:38px;opacity:1}[_nghost-%COMP%] .with-radio .mdc-tab:not(:last-child){margin-right:8px}[_nghost-%COMP%] .with-radio .mdc-tab--active{background:#f6f7f8;border-radius:3px}[_nghost-%COMP%] .with-radio .mdc-tab--active .mdc-tab__text-label, [_nghost-%COMP%] .with-radio .mdc-tab--active:hover .mdc-tab__text-label, [_nghost-%COMP%] .with-radio .mdc-tab--active:focus .mdc-tab__text-label{color:#0c142b;font-weight:600}[_nghost-%COMP%] .with-radio .mdc-tab-indicator{display:none!important}[_nghost-%COMP%] .vertical.mat-mdc-tab-group{flex-direction:row}[_nghost-%COMP%] .vertical .mat-mdc-tab-header{border-bottom:none}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container{border-right:1px solid #d5dae5}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels{flex-direction:column;padding:0}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0;border:none;margin:0}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active{background-color:#f3f7ff}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active:before{background-color:#151a41}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active .mdc-tab__text-label{font-weight:400;color:#151a41}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab__content{height:auto}[_nghost-%COMP%] .vertical .mdc-tab-indicator{display:none!important}[_nghost-%COMP%] .vertical .mat-mdc-tab-body-wrapper{width:100%;padding:16px}[_nghost-%COMP%] .secondary .mat-mdc-tab-header{border-bottom:none}[_nghost-%COMP%] .secondary .mat-mdc-tab-labels{justify-content:space-evenly;padding:0;background:#f2f2fb}[_nghost-%COMP%] .secondary .mdc-tab{flex:1!important;margin:0;border-bottom:1px solid #dfe0e3}[_nghost-%COMP%] .secondary .mdc-tab+.mdc-tab{border-left:1px solid #dfe0e3}[_nghost-%COMP%] .secondary .mdc-tab--active{background:#fff;border-bottom:none}[_nghost-%COMP%] .secondary .mdc-tab--active .mdc-tab__text-label, [_nghost-%COMP%] .secondary .mdc-tab--active:hover .mdc-tab__text-label, [_nghost-%COMP%] .secondary .mdc-tab--active:focus .mdc-tab__text-label{color:#25258c}[_nghost-%COMP%] .secondary .mdc-tab-indicator{display:none}[_nghost-%COMP%] mat-tab-group.no-body-padding .mat-mdc-tab-body-wrapper{padding:0}[_nghost-%COMP%] mat-tab-group.no-tab-labels-padding .mat-mdc-tab-labels{padding:0}[_nghost-%COMP%] mat-tab-group.no-tabs .mat-mdc-tab-header{display:none}[_nghost-%COMP%] mat-tab-group.no-header-border .mat-mdc-tab-header{border-
|
|
8882
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2.MatTabLabel, i2.MatTab, i2.MatTabGroup, i1$2.NgControlStatus, i1$2.NgModel, RadioButtonComponent, DrTooltipDirective], styles: ["[_nghost-%COMP%]{width:100%}[_nghost-%COMP%] .cursor-pointer[_ngcontent-%COMP%]{cursor:pointer}[_nghost-%COMP%] .mat-mdc-tab-group, [_nghost-%COMP%] .mat-mdc-tab-body-wrapper{height:100%}[_nghost-%COMP%] .mat-mdc-tab-group{font-family:Poppins,sans-serif}[_nghost-%COMP%] .mat-mdc-tab-nav-bar, [_nghost-%COMP%] .mat-mdc-tab-header{border-bottom:1px solid #d5dae5}[_nghost-%COMP%] .mat-mdc-tab-labels{padding:0 17px}[_nghost-%COMP%] .mat-mdc-tab, [_nghost-%COMP%] .mat-mdc-tab:hover{-webkit-tap-highlight-color:#ffffff}[_nghost-%COMP%] .mat-mdc-tab .mdc-tab__text-label, [_nghost-%COMP%] .mat-mdc-tab:hover .mdc-tab__text-label{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:Poppins,sans-serif;letter-spacing:0}[_nghost-%COMP%] .mat-mdc-tab .mdc-tab__ripple{display:none}[_nghost-%COMP%] .mdc-tab-indicator__content{height:3px;border:none;border-radius:5px;background-color:#4646ce!important}[_nghost-%COMP%] .mdc-tab{padding:0 8px;min-width:0;height:38px!important;flex-grow:0!important;opacity:1}[_nghost-%COMP%] .mdc-tab:not(:last-child){margin-right:21px}[_nghost-%COMP%] .mdc-tab--active .mat-mdc-tab-body-content{transform:unset!important}[_nghost-%COMP%] .mdc-tab--active .mdc-tab__content .mdc-tab__text-label, [_nghost-%COMP%] .mdc-tab--active:hover .mdc-tab__content .mdc-tab__text-label, [_nghost-%COMP%] .mdc-tab--active:focus .mdc-tab__content .mdc-tab__text-label{color:#4646ce;font-weight:700}[_nghost-%COMP%] .with-radio .mat-mdc-tab-labels{margin-bottom:0;padding:12px 8px}[_nghost-%COMP%] .with-radio .mdc-tab{padding:0 16px;min-width:0;justify-content:start;height:38px;opacity:1}[_nghost-%COMP%] .with-radio .mdc-tab:not(:last-child){margin-right:8px}[_nghost-%COMP%] .with-radio .mdc-tab--active{background:#f6f7f8;border-radius:3px}[_nghost-%COMP%] .with-radio .mdc-tab--active .mdc-tab__text-label, [_nghost-%COMP%] .with-radio .mdc-tab--active:hover .mdc-tab__text-label, [_nghost-%COMP%] .with-radio .mdc-tab--active:focus .mdc-tab__text-label{color:#0c142b;font-weight:600}[_nghost-%COMP%] .with-radio .mdc-tab-indicator{display:none!important}[_nghost-%COMP%] .vertical.mat-mdc-tab-group{flex-direction:row}[_nghost-%COMP%] .vertical .mat-mdc-tab-header{border-bottom:none}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container{border-right:1px solid #d5dae5}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels{flex-direction:column;padding:0}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0;border:none;margin:0}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active{background-color:#f3f7ff}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active:before{background-color:#151a41}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active .mdc-tab__text-label{font-weight:400;color:#151a41}[_nghost-%COMP%] .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab__content{height:auto}[_nghost-%COMP%] .vertical .mdc-tab-indicator{display:none!important}[_nghost-%COMP%] .vertical .mat-mdc-tab-body-wrapper{width:100%;padding:16px}[_nghost-%COMP%] .secondary .mat-mdc-tab-header{border-bottom:none}[_nghost-%COMP%] .secondary .mat-mdc-tab-labels{justify-content:space-evenly;padding:0;background:#f2f2fb}[_nghost-%COMP%] .secondary .mdc-tab{flex:1!important;margin:0;border-bottom:1px solid #dfe0e3}[_nghost-%COMP%] .secondary .mdc-tab+.mdc-tab{border-left:1px solid #dfe0e3}[_nghost-%COMP%] .secondary .mdc-tab--active{background:#fff;border-bottom:none}[_nghost-%COMP%] .secondary .mdc-tab--active .mdc-tab__text-label, [_nghost-%COMP%] .secondary .mdc-tab--active:hover .mdc-tab__text-label, [_nghost-%COMP%] .secondary .mdc-tab--active:focus .mdc-tab__text-label{color:#25258c}[_nghost-%COMP%] .secondary .mdc-tab-indicator{display:none}[_nghost-%COMP%] mat-tab-group.no-body-padding .mat-mdc-tab-body-wrapper{padding:0}[_nghost-%COMP%] mat-tab-group.no-tab-labels-padding .mat-mdc-tab-labels{padding:0}[_nghost-%COMP%] mat-tab-group.no-label-padding .mdc-tab{padding:0!important}[_nghost-%COMP%] mat-tab-group.no-label-padding.vertical .mdc-tab{padding:0 0 0 2px!important}[_nghost-%COMP%] mat-tab-group.no-tabs .mat-mdc-tab-header{display:none}[_nghost-%COMP%] mat-tab-group.no-header-border .mat-mdc-tab-header{border:none!important}[_nghost-%COMP%] mat-tab-group.no-header-border .mat-mdc-tab-header .mat-mdc-tab-label-container{border:none!important}[_nghost-%COMP%] mat-tab-group.no-label-borders .mdc-tab{border:none!important}[_nghost-%COMP%] mat-tab-group.no-fixed-tab-height .mdc-tab{height:auto!important}"] }); }
|
|
8838
8883
|
}
|
|
8839
8884
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrTabsComponent, [{
|
|
8840
8885
|
type: Component,
|
|
8841
|
-
args: [{ selector: 'dr-tabs', template: "<mat-tab-group\n disableRipple\n [ngClass]=\"theme\"\n [selectedIndex]=\"_selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n [class.no-body-padding]=\"noBodyPadding\"\n [class.no-tabs]=\"hideTabs\"\n [class.no-header-border]=\"noHeaderBorder\"\n [animationDuration]=\"disableAnimation || vertical || _disableAnimationTemp ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{ tab.label }}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"
|
|
8886
|
+
args: [{ selector: 'dr-tabs', template: "<mat-tab-group\n disableRipple\n [ngClass]=\"theme\"\n [selectedIndex]=\"_selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n [class.no-label-padding]=\"noLabelPadding\"\n [class.no-body-padding]=\"noBodyPadding\"\n [class.no-tabs]=\"hideTabs\"\n [class.no-header-border]=\"noHeaderBorder\"\n [class.no-label-borders]=\"noLabelBorders\"\n [class.no-fixed-tab-height]=\"noFixedTabHeight\"\n [animationDuration]=\"disableAnimation || vertical || _disableAnimationTemp ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{ tab.label }}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"!tab.customLabelTemplate; else customLabel\">\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\" [(ngModel)]=\"_selectedIndex\"> </dr-radio-button>\n {{ tab.label }}\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"tab.tooltip && !withRadio && !withIcon\">\n <ng-template mat-tab-label>\n <label class=\"cursor-pointer\" [drTooltip]=\"tab.tooltip\">{{ tab.label }}</label>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"withIcon\">\n <ng-template mat-tab-label>\n <span class=\"icon-tab__wrapper\">\n <i [ngClass]=\"tab.icon\" class=\"cursor-pointer\"></i>\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"withIcon\">\n <ng-template mat-tab-label>\n <span class=\"icon-tab__wrapper\">\n <i [ngClass]=\"tab.icon\" class=\"cursor-pointer\"></i>\n </span>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #customLabel>\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.customLabelTemplate\"></ng-container>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n </mat-tab>\n</mat-tab-group>\n", styles: [":host{width:100%}:host .cursor-pointer{cursor:pointer}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host ::ng-deep .mat-mdc-tab-group{font-family:Poppins,sans-serif}:host ::ng-deep .mat-mdc-tab-nav-bar,:host ::ng-deep .mat-mdc-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-mdc-tab-labels{padding:0 17px}:host ::ng-deep .mat-mdc-tab,:host ::ng-deep .mat-mdc-tab:hover{-webkit-tap-highlight-color:#ffffff}:host ::ng-deep .mat-mdc-tab .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab:hover .mdc-tab__text-label{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:Poppins,sans-serif;letter-spacing:0}:host ::ng-deep .mat-mdc-tab .mdc-tab__ripple{display:none}:host ::ng-deep .mdc-tab-indicator__content{height:3px;border:none;border-radius:5px;background-color:#4646ce!important}:host ::ng-deep .mdc-tab{padding:0 8px;min-width:0;height:38px!important;flex-grow:0!important;opacity:1}:host ::ng-deep .mdc-tab:not(:last-child){margin-right:21px}:host ::ng-deep .mdc-tab--active .mat-mdc-tab-body-content{transform:unset!important}:host ::ng-deep .mdc-tab--active .mdc-tab__content .mdc-tab__text-label,:host ::ng-deep .mdc-tab--active:hover .mdc-tab__content .mdc-tab__text-label,:host ::ng-deep .mdc-tab--active:focus .mdc-tab__content .mdc-tab__text-label{color:#4646ce;font-weight:700}:host ::ng-deep .with-radio .mat-mdc-tab-labels{margin-bottom:0;padding:12px 8px}:host ::ng-deep .with-radio .mdc-tab{padding:0 16px;min-width:0;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mdc-tab:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mdc-tab--active{background:#f6f7f8;border-radius:3px}:host ::ng-deep .with-radio .mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .with-radio .mdc-tab--active:hover .mdc-tab__text-label,:host ::ng-deep .with-radio .mdc-tab--active:focus .mdc-tab__text-label{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mdc-tab-indicator{display:none!important}:host ::ng-deep .vertical.mat-mdc-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-mdc-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-mdc-tab-label-container{border-right:1px solid #d5dae5}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0;border:none;margin:0}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab--active .mdc-tab__text-label{font-weight:400;color:#151a41}:host ::ng-deep .vertical .mat-mdc-tab-label-container .mat-mdc-tab-labels .mdc-tab__content{height:auto}:host ::ng-deep .vertical .mdc-tab-indicator{display:none!important}:host ::ng-deep .vertical .mat-mdc-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep .secondary .mat-mdc-tab-header{border-bottom:none}:host ::ng-deep .secondary .mat-mdc-tab-labels{justify-content:space-evenly;padding:0;background:#f2f2fb}:host ::ng-deep .secondary .mdc-tab{flex:1!important;margin:0;border-bottom:1px solid #dfe0e3}:host ::ng-deep .secondary .mdc-tab+.mdc-tab{border-left:1px solid #dfe0e3}:host ::ng-deep .secondary .mdc-tab--active{background:#fff;border-bottom:none}:host ::ng-deep .secondary .mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .secondary .mdc-tab--active:hover .mdc-tab__text-label,:host ::ng-deep .secondary .mdc-tab--active:focus .mdc-tab__text-label{color:#25258c}:host ::ng-deep .secondary .mdc-tab-indicator{display:none}:host ::ng-deep mat-tab-group.no-body-padding .mat-mdc-tab-body-wrapper{padding:0}:host ::ng-deep mat-tab-group.no-tab-labels-padding .mat-mdc-tab-labels{padding:0}:host ::ng-deep mat-tab-group.no-label-padding .mdc-tab{padding:0!important}:host ::ng-deep mat-tab-group.no-label-padding.vertical .mdc-tab{padding:0 0 0 2px!important}:host ::ng-deep mat-tab-group.no-tabs .mat-mdc-tab-header{display:none}:host ::ng-deep mat-tab-group.no-header-border .mat-mdc-tab-header{border:none!important}:host ::ng-deep mat-tab-group.no-header-border .mat-mdc-tab-header .mat-mdc-tab-label-container{border:none!important}:host ::ng-deep mat-tab-group.no-label-borders .mdc-tab{border:none!important}:host ::ng-deep mat-tab-group.no-fixed-tab-height .mdc-tab{height:auto!important}\n"] }]
|
|
8842
8887
|
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { theme: [{
|
|
8843
8888
|
type: Input
|
|
8844
8889
|
}], disableAnimation: [{
|
|
@@ -8859,8 +8904,14 @@ class DrTabsComponent {
|
|
|
8859
8904
|
type: Input
|
|
8860
8905
|
}], noHeaderBorder: [{
|
|
8861
8906
|
type: Input
|
|
8907
|
+
}], noLabelBorders: [{
|
|
8908
|
+
type: Input
|
|
8862
8909
|
}], noTabLabelsPadding: [{
|
|
8863
8910
|
type: Input
|
|
8911
|
+
}], noLabelPadding: [{
|
|
8912
|
+
type: Input
|
|
8913
|
+
}], noFixedTabHeight: [{
|
|
8914
|
+
type: Input
|
|
8864
8915
|
}], selectedTabChange: [{
|
|
8865
8916
|
type: Output
|
|
8866
8917
|
}], selectedTabIdChange: [{
|