@energycap/components 0.46.17 → 0.46.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7941,11 +7941,11 @@ class TabsComponent {
|
|
|
7941
7941
|
this.tabClosed.emit(tab);
|
|
7942
7942
|
}
|
|
7943
7943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7944
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, outputs: { tabClosed: "tabClosed" }, ngImport: i0, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}", 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{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.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{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:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{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}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{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}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:
|
|
7944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, outputs: { tabClosed: "tabClosed" }, ngImport: i0, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}", 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{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.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{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:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{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}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{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}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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" }] }); }
|
|
7945
7945
|
}
|
|
7946
7946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
7947
7947
|
type: Component,
|
|
7948
|
-
args: [{ selector: 'ec-tabs', standalone: false, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}", 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{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.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{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:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{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}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{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}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:
|
|
7948
|
+
args: [{ selector: 'ec-tabs', standalone: false, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}", 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{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.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{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:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{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}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{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}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"] }]
|
|
7949
7949
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
7950
7950
|
type: Input
|
|
7951
7951
|
}], tabindex: [{
|