@energycap/components 0.37.7-ECAP-18600-ech-theme-updates.20230913-1551 → 0.37.7-ECAP-18600-ech-theme-updates.20230913-1721
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.
- package/energycap-components.min.css +1 -1
- package/esm2020/lib/controls/button/button.component.mjs +2 -2
- package/esm2020/lib/display/hierarchy/hierarchy-tree/hierarchy-tree.component.mjs +2 -2
- package/esm2020/lib/display/tooltip/tooltip.component.mjs +3 -3
- package/esm2020/lib/display/tour/tour.component.mjs +4 -4
- package/fesm2015/energycap-components.mjs +9 -9
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +9 -9
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/favicon-ech.svg +14 -0
- package/src/assets/images/favicon-eum.svg +13 -0
- package/src/styles/_global-variables.scss +2 -1
- package/src/styles/mixins/_button-base.scss +2 -2
|
@@ -188,10 +188,10 @@ class ButtonComponent {
|
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button: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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
191
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-link)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button: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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
192
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
193
193
|
type: Component,
|
|
194
|
-
args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button: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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
|
|
194
|
+
args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-link)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button: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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
|
|
195
195
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
196
196
|
type: HostBinding,
|
|
197
197
|
args: ['attr.id']
|
|
@@ -4339,10 +4339,10 @@ class TooltipComponent {
|
|
|
4339
4339
|
}
|
|
4340
4340
|
}
|
|
4341
4341
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4342
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"
|
|
4342
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
|
|
4343
4343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
4344
4344
|
type: Component,
|
|
4345
|
-
args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"
|
|
4345
|
+
args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n </header>\r\n\r\n <ng-container *ngIf=\"customContent; else textTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #textTemplate>\r\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n </ng-template>\r\n\r\n <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
|
|
4346
4346
|
}], propDecorators: { backgroundColor: [{
|
|
4347
4347
|
type: HostBinding,
|
|
4348
4348
|
args: ['style.--ec-tooltip-background-color']
|
|
@@ -5779,10 +5779,10 @@ class HierarchyTreeComponent extends HierarchyBase {
|
|
|
5779
5779
|
}
|
|
5780
5780
|
}
|
|
5781
5781
|
HierarchyTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5782
|
-
HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-font-size-action)}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] });
|
|
5782
|
+
HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-font-size-action);background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] });
|
|
5783
5783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
|
|
5784
5784
|
type: Component,
|
|
5785
|
-
args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-font-size-action)}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
|
|
5785
|
+
args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-font-size-action);background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
|
|
5786
5786
|
}], ctorParameters: function () { return [{ type: ScrollService }, { type: i0.Injector }]; }, propDecorators: { id: [{
|
|
5787
5787
|
type: Input
|
|
5788
5788
|
}], hideRootNode: [{
|
|
@@ -9451,7 +9451,7 @@ class TourComponent {
|
|
|
9451
9451
|
dismissible: true,
|
|
9452
9452
|
maxWidth: (_c = this.currentTourStep) === null || _c === void 0 ? void 0 : _c.maxWidth,
|
|
9453
9453
|
width: stepWidth,
|
|
9454
|
-
backgroundColor: '
|
|
9454
|
+
backgroundColor: 'var(--ec-background-color-tour)'
|
|
9455
9455
|
};
|
|
9456
9456
|
this.tooltip = this.tooltipService.show(tooltipElement, (_d = this.currentTourStep.anchor) === null || _d === void 0 ? void 0 : _d.position, options);
|
|
9457
9457
|
yield this.waitForTimeout(this.focusOnNextOrDoneButton.bind(this));
|
|
@@ -9660,10 +9660,10 @@ class TourComponent {
|
|
|
9660
9660
|
}
|
|
9661
9661
|
}
|
|
9662
9662
|
TourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TourComponent, deps: [{ token: TourService }, { token: TooltipService }, { token: TelemetryService }, { token: CacheService }, { token: DialogService }, { token: i2.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
9663
|
-
TourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TourComponent, selector: "ec-tour", viewQueries: [{ propertyName: "custom", first: true, predicate: ["tourTooltip"], descendants: true }], ngImport: i0, template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color
|
|
9663
|
+
TourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TourComponent, selector: "ec-tour", viewQueries: [{ propertyName: "custom", first: true, predicate: ["tourTooltip"], descendants: true }], ngImport: i0, template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color:var(--ec-tour-action-color, var(--ec-color-brand-green))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
9664
9664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TourComponent, decorators: [{
|
|
9665
9665
|
type: Component,
|
|
9666
|
-
args: [{ selector: 'ec-tour', template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color
|
|
9666
|
+
args: [{ selector: 'ec-tour', template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color:var(--ec-tour-action-color, var(--ec-color-brand-green))!important}\n"] }]
|
|
9667
9667
|
}], ctorParameters: function () {
|
|
9668
9668
|
return [{ type: TourService }, { type: TooltipService }, { type: TelemetryService }, { type: CacheService }, { type: DialogService }, { type: i2.TranslateService }, { type: Document, decorators: [{
|
|
9669
9669
|
type: Inject,
|