@energycap/components 0.40.0 → 0.40.1-ECAP-27225-Carbon-Hub-Insights.20241125-1552
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.
|
@@ -30,10 +30,10 @@ export class TabsComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
33
|
+
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
|
-
args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
|
|
36
|
+
args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
|
|
37
37
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}], tabindex: [{
|
|
@@ -44,4 +44,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
44
44
|
type: Input,
|
|
45
45
|
args: ['tabGroup']
|
|
46
46
|
}] } });
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvdGFicy90YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy90YWJzL3RhYnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7OztBQVFuRDs7R0FFRztBQU1ILE1BQU0sT0FBTyxhQUFhO0lBY3hCO1FBWkEscUZBQXFGO1FBQ3JFLE9BQUUsR0FBVyxFQUFFLENBQUM7UUFFaEMsaUZBQWlGO1FBQ2pFLGFBQVEsR0FBVyxDQUFDLENBQUM7UUFFckMsb0RBQW9EO1FBQ3BDLGFBQVEsR0FBcUIsTUFBTSxDQUFDO1FBRXBELHFCQUFxQjtRQUNLLFNBQUksR0FBYSxJQUFJLFFBQVEsRUFBRSxDQUFDO0lBRTFDLENBQUM7SUFFakI7Ozs7T0FJRztJQUNJLFNBQVMsQ0FBQyxLQUFZLEVBQUUsR0FBWTtRQUN6QyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxVQUFVLElBQW9CLEtBQU0sQ0FBQyxHQUFHLEtBQUssT0FBTyxDQUFDLENBQUMsRUFBRTtZQUN0SCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7U0FDMUI7SUFDSCxDQUFDOzswR0F6QlUsYUFBYTs4RkFBYixhQUFhLDZJQ2xCMUIsK3pEQWdDYzsyRkRkRCxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFNBQVM7MEVBT0gsRUFBRTtzQkFBakIsS0FBSztnQkFHVSxRQUFRO3NCQUF2QixLQUFLO2dCQUdVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBR29CLElBQUk7c0JBQTdCLEtBQUs7dUJBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmF2SXRlbSB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWl0ZW0nO1xyXG5pbXBvcnQgeyBOYXZHcm91cCB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWdyb3VwJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgVGFiIGV4dGVuZHMgTmF2SXRlbSB7XHJcbiAgdXJsOiBzdHJpbmcsXHJcbiAgdGFicz86IFRhYltdLFxyXG4gIGhpZGU/OiBBcnJheTwoLi4uYXJnczogYW55W10pID0+IGJvb2xlYW4+LFxyXG59XHJcblxyXG4vKipcclxuICogQ29tcG9uZW50IHRvIGRpc3BsYXkgbmF2aWdhdGlvbiB0YWJzXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2VjLXRhYnMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90YWJzLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnQge1xyXG5cclxuICAvKiogVGhlIGlkIG9mIHRoZSB0YWJzIGNvbXBvbmVudCwgd2lsbCBiZSB1c2VkIGFzIGEgcHJlZml4IGZvciBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIGlkOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgLyoqIFRoZSB0YWJpbmRleCBvZiB0aGUgdGFicyBjb21wb25lbnQsIHdpbGwgYmUgYXBwbGllZCB0byBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYmluZGV4OiBudW1iZXIgPSAwO1xyXG5cclxuICAvKiogRGlzcGxheSB0YWJzIGluIHRoZSBkZWZhdWx0IHN0eWxlIG9yIGFzIHBpbGxzICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYlN0eWxlOiAndGFicycgfCAncGlsbHMnID0gJ3RhYnMnO1xyXG5cclxuICAvKiogVGhlIHRhYnMgZ3JvdXAgKi9cclxuICBASW5wdXQoJ3RhYkdyb3VwJykgcHVibGljIHRhYnM6IE5hdkdyb3VwID0gbmV3IE5hdkdyb3VwKCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNldCB0aGUgc2VsZWN0ZWQgdGFiIHRvIHRoZSBvbmUgdGhlIHVzZXIgY2xpY2tlZCBvbiBwcmVzc2VkIGVudGVyXHJcbiAgICogd2hlbiBmb2N1c2VkLiBJZiB0aGUgZXZlbnQgd2FzIGEga2V5cHJlc3MuZW50ZXIgYW5kIHRoZSB0YWJcclxuICAgKiBoYXMgYSBsaW5rLCBuYXZpZ2F0ZSB0byB0aGF0IGxpbmsuXHJcbiAgICovXHJcbiAgcHVibGljIHNlbGVjdFRhYihldmVudDogRXZlbnQsIHRhYjogTmF2SXRlbSkge1xyXG4gICAgaWYgKCF0YWIuZGlzYWJsZWQgJiYgKGV2ZW50LnR5cGUgPT09ICdjbGljaycgfHwgKGV2ZW50LnR5cGUgPT09ICdrZXlwcmVzcycgJiYgKDxLZXlib2FyZEV2ZW50PmV2ZW50KS5rZXkgPT09ICdFbnRlcicpKSkge1xyXG4gICAgICB0aGlzLnRhYnMuc2VsZWN0ZWQgPSB0YWI7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjx1bCAqbmdJZj1cInRhYnM/Lml0ZW1zPy5sZW5ndGhcIiBjbGFzcz1cInt7dGFiU3R5bGV9fVwiPlxyXG5cclxuICA8bGkgY2xhc3M9XCJ7e3RhYi5jbGFzc2xpc3R9fVwiIFtuZ0NsYXNzXT1cInsnaWNvbi1vbmx5JzogdGFiLmljb24gJiYgIXRhYi5sYWJlbH1cIiAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnM/Lml0ZW1zOyBpbmRleCBhcyBpO1wiPlxyXG5cclxuICAgIDxhICpuZ0lmPVwidGFiLnVybCAmJiAhdGFiLmRpc2FibGVkXCJcclxuICAgICAgdGFiaW5kZXg9XCJ7e3RhYnM/LnNlbGVjdGVkID09PSB0YWIgPyAtMSA6IHRhYmluZGV4fX1cIlxyXG4gICAgICBjbGFzcz1cInRhYlwiXHJcbiAgICAgIGlkPVwie3t0YWIuaWQgPyB0YWIuaWQgOiBpZCArICdfaXRlbScgKyBpfX1cIlxyXG4gICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcclxuICAgICAgW3JvdXRlckxpbmtdPVwidGFiLnVybFwiXHJcbiAgICAgIFtyb3V0ZXJMaW5rQWN0aXZlT3B0aW9uc109XCJ7ZXhhY3Q6IHRhYi5pc0FjdGl2ZUV4YWN0TWF0Y2ggfHwgZmFsc2V9XCJcclxuICAgICAgW3F1ZXJ5UGFyYW1zXT1cInRhYi5xdWVyeVBhcmFtcyB8fCBudWxsXCJcclxuICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwidGFiLnF1ZXJ5UGFyYW1zSGFuZGxpbmcgfHwgJydcIlxyXG4gICAgICAoa2V5cHJlc3MpPVwic2VsZWN0VGFiKCRldmVudCwgdGFiKVwiXHJcbiAgICAgIChjbGljayk9XCJzZWxlY3RUYWIoJGV2ZW50LCB0YWIpXCI+XHJcbiAgICAgICAgPGkgY2xhc3M9XCJlYy1pY29uIHt7dGFiLmljb259fVwiICpuZ0lmPVwidGFiLmljb25cIiBbY2xhc3MubXItMV09XCJ0YWIubGFiZWxcIj48L2k+XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LXRydW5jYXRlXCI+e3t0YWIubGFiZWwgfCB0cmFuc2xhdGV9fTwvc3Bhbj5cclxuICAgICAgICA8c3BhbiAqbmdJZj1cInRhYj8uaW5kaWNhdG9yXCIgY2xhc3M9XCJpbmRpY2F0b3IgbWwtMVwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cInRhYj8uaW5kaWNhdG9yID09PSB0cnVlID8gJycgOiB0YWI/LmluZGljYXRvclwiPjwvc3Bhbj5cclxuICAgIDwvYT5cclxuXHJcbiAgICA8c3BhbiAqbmdJZj1cIiF0YWIudXJsIHx8IHRhYi5kaXNhYmxlZFwiXHJcbiAgICAgICAgICB0YWJpbmRleD1cInt7dGFicz8uc2VsZWN0ZWQgPT09IHRhYiB8fCB0YWIuZGlzYWJsZWQgPyAtMSA6IHRhYmluZGV4fX1cIlxyXG4gICAgICAgICAgaWQ9XCJ7e3RhYi5pZCA/IHRhYi5pZCA6IGlkICsgJ19pdGVtJyArIGl9fVwiXHJcbiAgICAgICAgICBjbGFzcz1cInRhYlwiXHJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IHRhYnM/LnNlbGVjdGVkID09PSB0YWIsICdpcy1kaXNhYmxlZCc6IHRhYi5kaXNhYmxlZH1cIlxyXG4gICAgICAgICAgKGtleXByZXNzKT1cInNlbGVjdFRhYigkZXZlbnQsIHRhYilcIlxyXG4gICAgICAgICAgKGNsaWNrKT1cInNlbGVjdFRhYigkZXZlbnQsIHRhYilcIj5cclxuICAgICAgPGkgY2xhc3M9XCJlYy1pY29uIHt7dGFiLmljb259fVwiICpuZ0lmPVwidGFiLmljb25cIiBbY2xhc3MubXItMV09XCJ0YWIubGFiZWxcIj48L2k+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC10cnVuY2F0ZVwiPnt7dGFiLmxhYmVsIHwgdHJhbnNsYXRlfX08L3NwYW4+XHJcbiAgICAgIDxzcGFuICpuZ0lmPVwidGFiPy5pbmRpY2F0b3JcIiBjbGFzcz1cImluZGljYXRvciBtbC0xXCIgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwidGFiPy5pbmRpY2F0b3IgPT09IHRydWUgPyAnJyA6IHRhYj8uaW5kaWNhdG9yXCI+PC9zcGFuPlxyXG4gICAgPC9zcGFuPlxyXG4gIDwvbGk+XHJcbjwvdWw+ICAgICAgICAgIl19
|
|
@@ -6277,10 +6277,10 @@ class TabsComponent {
|
|
|
6277
6277
|
}
|
|
6278
6278
|
}
|
|
6279
6279
|
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6280
|
-
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
6280
|
+
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
6281
6281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, decorators: [{
|
|
6282
6282
|
type: Component,
|
|
6283
|
-
args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
|
|
6283
|
+
args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
|
|
6284
6284
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
6285
6285
|
type: Input
|
|
6286
6286
|
}], tabindex: [{
|