@ascentgl/ads-ui 21.111.0 → 21.112.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.
|
@@ -11727,6 +11727,8 @@ class AdsTabsComponent {
|
|
|
11727
11727
|
this.tabGroup = viewChild.required('tabGroup');
|
|
11728
11728
|
this.tabs = [];
|
|
11729
11729
|
this.selectedIndex = 0;
|
|
11730
|
+
/** When `true`, the border-bottom on inactive (non-active, non-disabled) tabs is hidden. Defaults to `false`. */
|
|
11731
|
+
this.hideInactiveBorder = false;
|
|
11730
11732
|
this.selectedIndexChange = new EventEmitter();
|
|
11731
11733
|
this.tabChange = new EventEmitter();
|
|
11732
11734
|
}
|
|
@@ -11753,11 +11755,11 @@ class AdsTabsComponent {
|
|
|
11753
11755
|
};
|
|
11754
11756
|
}
|
|
11755
11757
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
|
|
11758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
|
|
11757
11759
|
}
|
|
11758
11760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, decorators: [{
|
|
11759
11761
|
type: Component,
|
|
11760
|
-
args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
|
|
11762
|
+
args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"] }]
|
|
11761
11763
|
}], propDecorators: { tabGroup: [{ type: i0.ViewChild, args: ['tabGroup', { isSignal: true }] }], tabs: [{
|
|
11762
11764
|
type: Input
|
|
11763
11765
|
}], selectedIndex: [{
|
|
@@ -11766,6 +11768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
11766
11768
|
type: Input
|
|
11767
11769
|
}], activeColor: [{
|
|
11768
11770
|
type: Input
|
|
11771
|
+
}], hideInactiveBorder: [{
|
|
11772
|
+
type: Input
|
|
11769
11773
|
}], selectedIndexChange: [{
|
|
11770
11774
|
type: Output
|
|
11771
11775
|
}], tabChange: [{
|