@c8y/ngx-components 1023.14.94 → 1023.14.96
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.
|
@@ -13765,7 +13765,9 @@ class TabsOutletComponent {
|
|
|
13765
13765
|
}
|
|
13766
13766
|
}
|
|
13767
13767
|
navigateTo(path) {
|
|
13768
|
-
this.header.
|
|
13768
|
+
if (this.header.largeWidth) {
|
|
13769
|
+
this.header.toggle();
|
|
13770
|
+
}
|
|
13769
13771
|
if (typeof path === 'string') {
|
|
13770
13772
|
this.router.navigate([path], this.extras);
|
|
13771
13773
|
return;
|
|
@@ -13806,15 +13808,13 @@ class TabsOutletComponent {
|
|
|
13806
13808
|
return { widthScroll, width, scrollLeft };
|
|
13807
13809
|
}
|
|
13808
13810
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$4.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13811
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TabsOutletComponent, isStandalone: true, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", openFirstTab: "openFirstTab", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tabContainer\"\n [ngClass]=\"{ 'hidden-xs': !outletName }\"\n #container\n>\n @if (showLeft || showRight) {\n <button\n class=\"tabs-slider tabs-slider-left\"\n title=\"{{ 'Scroll to the left' | translate }}\"\n type=\"button\"\n #left\n [disabled]=\"!showLeft\"\n (click)=\"scroll('left')\"\n >\n <i [c8yIcon]=\"'chevron-left'\"></i>\n </button>\n }\n @if (showRight || showLeft) {\n <button\n class=\"tabs-slider tabs-slider-right\"\n title=\"{{ 'Scroll to the right' | translate }}\"\n type=\"button\"\n #right\n [disabled]=\"!showRight\"\n (click)=\"scroll('right')\"\n >\n <i [c8yIcon]=\"'chevron-right'\"></i>\n </button>\n }\n @if (!outletName) {\n <div\n class=\"nav nav-tabs nav-tabsc8y\"\n role=\"list\"\n #tabsContainer\n >\n @for (tab of tabs; track tab) {\n @if (!tab.component && !tab.hide) {\n <div\n role=\"listitem\"\n [attr.data-cy]=\"'c8y-tab--tab-item-' + tab.label\"\n [ngClass]=\"{ active: rla?.isActive }\"\n >\n <a\n [routerLink]=\"tab.path\"\n routerLinkActive\n [queryParamsHandling]=\"'preserve'\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n (click)=\"tab.onSelect?.emit()\"\n >\n @if (!tab.template && tab?.icon) {\n <i [c8yIcon]=\"tab?.icon\"></i>\n }\n @if (!tab.template && !tab.component) {\n <span\n title=\"{{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\"\n >\n {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\n </span>\n }\n @if (!tab.template && tab?.badge) {\n <span\n class=\"dashboard-template-marker\"\n tooltip=\"{{ tab?.tooltipText | translate }}\"\n placement=\"bottom\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n [delay]=\"300\"\n ></span>\n }\n </a>\n <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n </div>\n }\n <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n }\n </div>\n }\n\n @if (outletName) {\n <div\n class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n #tabsContainer\n >\n @for (tab of tabs; track trackByPath($index, tab)) {\n <div\n [ngClass]=\"{ active: tab.isActive }\"\n [routerLink]=\"tab.path\"\n [routerLinkActive]=\"tab.path ? 'active' : ''\"\n [queryParamsHandling]=\"'preserve'\"\n >\n @let tabLabel = tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate);\n @let tabTitle = tab?.title ? tab?.title : (tab?.title | translate);\n <a\n class=\"pointer\"\n title=\"{{ tabLabel ?? tabTitle }}\"\n (click)=\"tab.onSelect?.emit()\"\n >\n @if (tab?.icon && tab?.label) {\n <i [c8yIcon]=\"tab?.icon\"></i>\n }\n @if (tab?.label) {\n <span>{{ tabLabel }}</span>\n }\n <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n </a>\n </div>\n }\n </div>\n }\n</div>\n\n@if (!outletName) {\n <div class=\"visible-xs mobile-tabs\">\n <ul class=\"list-unstyled d-flex m-b-0\">\n <li class=\"c8y-select-wrapper flex-grow\">\n <select\n (change)=\"navigateTo($event.target.value)\"\n #select\n >\n @for (tab of tabs; track tab) {\n @if (!tab.component) {\n <option\n [value]=\"tab.path\"\n [selected]=\"isActive(tab)\"\n >\n {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\n </option>\n }\n }\n </select>\n </li>\n @for (tab of tabs; track tab) {\n @if (tab.component) {\n <ng-container\n *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n ></ng-container>\n }\n }\n </ul>\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
|
|
13810
13812
|
}
|
|
13811
13813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabsOutletComponent, decorators: [{
|
|
13812
13814
|
type: Component,
|
|
13813
13815
|
args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', standalone: true, imports: [
|
|
13814
13816
|
NgClass,
|
|
13815
|
-
NgIf,
|
|
13816
13817
|
IconDirective,
|
|
13817
|
-
NgFor,
|
|
13818
13818
|
RouterLinkActive,
|
|
13819
13819
|
RouterLink,
|
|
13820
13820
|
TooltipModule,
|
|
@@ -13822,7 +13822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
13822
13822
|
NgComponentOutlet,
|
|
13823
13823
|
C8yComponentOutlet,
|
|
13824
13824
|
C8yTranslatePipe
|
|
13825
|
-
], template: "<div\n class=\"tabContainer\"\n [ngClass]=\"{ 'hidden-xs': !outletName }\"\n #container\n>\n <button\n
|
|
13825
|
+
], template: "<div\n class=\"tabContainer\"\n [ngClass]=\"{ 'hidden-xs': !outletName }\"\n #container\n>\n @if (showLeft || showRight) {\n <button\n class=\"tabs-slider tabs-slider-left\"\n title=\"{{ 'Scroll to the left' | translate }}\"\n type=\"button\"\n #left\n [disabled]=\"!showLeft\"\n (click)=\"scroll('left')\"\n >\n <i [c8yIcon]=\"'chevron-left'\"></i>\n </button>\n }\n @if (showRight || showLeft) {\n <button\n class=\"tabs-slider tabs-slider-right\"\n title=\"{{ 'Scroll to the right' | translate }}\"\n type=\"button\"\n #right\n [disabled]=\"!showRight\"\n (click)=\"scroll('right')\"\n >\n <i [c8yIcon]=\"'chevron-right'\"></i>\n </button>\n }\n @if (!outletName) {\n <div\n class=\"nav nav-tabs nav-tabsc8y\"\n role=\"list\"\n #tabsContainer\n >\n @for (tab of tabs; track tab) {\n @if (!tab.component && !tab.hide) {\n <div\n role=\"listitem\"\n [attr.data-cy]=\"'c8y-tab--tab-item-' + tab.label\"\n [ngClass]=\"{ active: rla?.isActive }\"\n >\n <a\n [routerLink]=\"tab.path\"\n routerLinkActive\n [queryParamsHandling]=\"'preserve'\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n (click)=\"tab.onSelect?.emit()\"\n >\n @if (!tab.template && tab?.icon) {\n <i [c8yIcon]=\"tab?.icon\"></i>\n }\n @if (!tab.template && !tab.component) {\n <span\n title=\"{{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\"\n >\n {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\n </span>\n }\n @if (!tab.template && tab?.badge) {\n <span\n class=\"dashboard-template-marker\"\n tooltip=\"{{ tab?.tooltipText | translate }}\"\n placement=\"bottom\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n [delay]=\"300\"\n ></span>\n }\n </a>\n <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n </div>\n }\n <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n }\n </div>\n }\n\n @if (outletName) {\n <div\n class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n #tabsContainer\n >\n @for (tab of tabs; track trackByPath($index, tab)) {\n <div\n [ngClass]=\"{ active: tab.isActive }\"\n [routerLink]=\"tab.path\"\n [routerLinkActive]=\"tab.path ? 'active' : ''\"\n [queryParamsHandling]=\"'preserve'\"\n >\n @let tabLabel = tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate);\n @let tabTitle = tab?.title ? tab?.title : (tab?.title | translate);\n <a\n class=\"pointer\"\n title=\"{{ tabLabel ?? tabTitle }}\"\n (click)=\"tab.onSelect?.emit()\"\n >\n @if (tab?.icon && tab?.label) {\n <i [c8yIcon]=\"tab?.icon\"></i>\n }\n @if (tab?.label) {\n <span>{{ tabLabel }}</span>\n }\n <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n </a>\n </div>\n }\n </div>\n }\n</div>\n\n@if (!outletName) {\n <div class=\"visible-xs mobile-tabs\">\n <ul class=\"list-unstyled d-flex m-b-0\">\n <li class=\"c8y-select-wrapper flex-grow\">\n <select\n (change)=\"navigateTo($event.target.value)\"\n #select\n >\n @for (tab of tabs; track tab) {\n @if (!tab.component) {\n <option\n [value]=\"tab.path\"\n [selected]=\"isActive(tab)\"\n >\n {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}\n </option>\n }\n }\n </select>\n </li>\n @for (tab of tabs; track tab) {\n @if (tab.component) {\n <ng-container\n *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n ></ng-container>\n }\n }\n </ul>\n </div>\n}\n" }]
|
|
13826
13826
|
}], ctorParameters: () => [{ type: i1$4.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
|
|
13827
13827
|
type: Input
|
|
13828
13828
|
}], orientation: [{
|