@energycap/components 0.47.4 → 0.47.5
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.
|
@@ -8167,8 +8167,8 @@ var TabsComponent = class TabsComponent {
|
|
|
8167
8167
|
},
|
|
8168
8168
|
outputs: { tabClosed: "tabClosed" },
|
|
8169
8169
|
ngImport: i0,
|
|
8170
|
-
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}",
|
|
8171
|
-
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"],
|
|
8170
|
+
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\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\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\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\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.ariaLabel | 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}",
|
|
8171
|
+
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%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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"],
|
|
8172
8172
|
dependencies: [
|
|
8173
8173
|
{
|
|
8174
8174
|
kind: "directive",
|
|
@@ -8228,8 +8228,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8228
8228
|
selector: "ec-tabs",
|
|
8229
8229
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
8230
8230
|
standalone: false,
|
|
8231
|
-
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}",
|
|
8232
|
-
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"]
|
|
8231
|
+
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\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\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\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\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.ariaLabel | 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}",
|
|
8232
|
+
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%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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"]
|
|
8233
8233
|
}]
|
|
8234
8234
|
}],
|
|
8235
8235
|
ctorParameters: () => [],
|