@progressio_resources/gravity-design-system 4.0.43 → 4.0.45
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.
|
@@ -5953,11 +5953,11 @@ class GravityBadgeComponent {
|
|
|
5953
5953
|
return `${base}+`;
|
|
5954
5954
|
}
|
|
5955
5955
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityBadgeComponent, isStandalone: true, selector: "gravity-badge", inputs: { size: "size", text: "text", number: "number", cypressTag: "cypressTag", type: "type" }, ngImport: i0, template: "<div class=\"gravity-badge {{size}} {{type}}\" [ngClass]=\"(number && number > 1) || text ? 'text' : 'dot'\"\n [attr.data-cy]=\"cypressTag ? 'badge_'+cypressTag : null\">\n @if (text && size == 'sm') {\n <p class=\"hr-body sm-regular text\">{{ text }}</p>\n }\n @if (number && number > 1 && size == 'sm') {\n <p class=\"hr-body sm-regular number\">{{ formattedNumber }}</p>\n }\n</div>", styles: [".gravity-badge{background-color:var(--bagde-background-color)}.gravity-badge p{color:var(--surface-secondary);line-height:1}.gravity-badge.warning{--bagde-background-color: var(--negative-primary)}.gravity-badge.
|
|
5956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityBadgeComponent, isStandalone: true, selector: "gravity-badge", inputs: { size: "size", text: "text", number: "number", cypressTag: "cypressTag", type: "type" }, ngImport: i0, template: "<div class=\"gravity-badge {{size}} {{type}}\" [ngClass]=\"(number && number > 1) || text ? 'text' : 'dot'\"\n [attr.data-cy]=\"cypressTag ? 'badge_'+cypressTag : null\">\n @if (text && size == 'sm') {\n <p class=\"hr-body sm-regular text\">{{ text }}</p>\n }\n @if (number && number > 1 && size == 'sm') {\n <p class=\"hr-body sm-regular number\">{{ formattedNumber }}</p>\n }\n</div>", styles: [".gravity-badge{background-color:var(--bagde-background-color)}.gravity-badge p{color:var(--surface-secondary);line-height:1}.gravity-badge.warning{--bagde-background-color: var(--negative-primary)}.gravity-badge.neutral{--bagde-background-color: var(--cta-primary)}.gravity-badge.sm.dot{width:8px;height:8px;border-radius:108.375px}.gravity-badge.sm.text{display:inline-flex;padding:2px 4px;justify-content:center;align-items:center;gap:4px;border-radius:2.551px}.gravity-badge.md{width:10px;height:10px;border-radius:130.75px}.gravity-badge.lg{width:14px;height:14px;border-radius:179.375px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
5957
5957
|
}
|
|
5958
5958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityBadgeComponent, decorators: [{
|
|
5959
5959
|
type: Component,
|
|
5960
|
-
args: [{ selector: 'gravity-badge', standalone: true, imports: [NgClass], template: "<div class=\"gravity-badge {{size}} {{type}}\" [ngClass]=\"(number && number > 1) || text ? 'text' : 'dot'\"\n [attr.data-cy]=\"cypressTag ? 'badge_'+cypressTag : null\">\n @if (text && size == 'sm') {\n <p class=\"hr-body sm-regular text\">{{ text }}</p>\n }\n @if (number && number > 1 && size == 'sm') {\n <p class=\"hr-body sm-regular number\">{{ formattedNumber }}</p>\n }\n</div>", styles: [".gravity-badge{background-color:var(--bagde-background-color)}.gravity-badge p{color:var(--surface-secondary);line-height:1}.gravity-badge.warning{--bagde-background-color: var(--negative-primary)}.gravity-badge.
|
|
5960
|
+
args: [{ selector: 'gravity-badge', standalone: true, imports: [NgClass], template: "<div class=\"gravity-badge {{size}} {{type}}\" [ngClass]=\"(number && number > 1) || text ? 'text' : 'dot'\"\n [attr.data-cy]=\"cypressTag ? 'badge_'+cypressTag : null\">\n @if (text && size == 'sm') {\n <p class=\"hr-body sm-regular text\">{{ text }}</p>\n }\n @if (number && number > 1 && size == 'sm') {\n <p class=\"hr-body sm-regular number\">{{ formattedNumber }}</p>\n }\n</div>", styles: [".gravity-badge{background-color:var(--bagde-background-color)}.gravity-badge p{color:var(--surface-secondary);line-height:1}.gravity-badge.warning{--bagde-background-color: var(--negative-primary)}.gravity-badge.neutral{--bagde-background-color: var(--cta-primary)}.gravity-badge.sm.dot{width:8px;height:8px;border-radius:108.375px}.gravity-badge.sm.text{display:inline-flex;padding:2px 4px;justify-content:center;align-items:center;gap:4px;border-radius:2.551px}.gravity-badge.md{width:10px;height:10px;border-radius:130.75px}.gravity-badge.lg{width:14px;height:14px;border-radius:179.375px}\n"] }]
|
|
5961
5961
|
}], ctorParameters: () => [], propDecorators: { size: [{
|
|
5962
5962
|
type: Input
|
|
5963
5963
|
}], text: [{
|
|
@@ -6023,7 +6023,7 @@ class GravityStatusIndicatorComponent {
|
|
|
6023
6023
|
constructor() {
|
|
6024
6024
|
this.size = 'sm';
|
|
6025
6025
|
this.type = 'primary';
|
|
6026
|
-
this.status = '
|
|
6026
|
+
this.status = 'neutral';
|
|
6027
6027
|
}
|
|
6028
6028
|
ngOnChanges() {
|
|
6029
6029
|
this.capitalizeFirst();
|
|
@@ -6034,11 +6034,11 @@ class GravityStatusIndicatorComponent {
|
|
|
6034
6034
|
this.text = this.text.charAt(0).toUpperCase() + this.text.slice(1).toLowerCase();
|
|
6035
6035
|
}
|
|
6036
6036
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityStatusIndicatorComponent, isStandalone: true, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", cypressTag: "cypressTag", size: "size", type: "type", status: "status" }, usesOnChanges: true, ngImport: i0, template: "@if (type === 'primary') {\n <div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n @if (text) {\n <span>{{ text }}</span>\n }\n @if (icon) {\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n </div>\n}\n\n@if (type === 'secondary') {\n <div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n <div></div>\n <span>{{ text }}</span>\n </div>\n}\n\n@if (type === 'tertiary') {\n <div class=\"gravity-status-indicator-tertiary {{size}} {{status}}\">\n @if (size == 'sm') {\n <gravity-icon [iconName]=\"icon ? icon : 'check'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (size == 'md') {\n <span class=\"hr-body md-bold\">{{ text ? text : '?' }}</span>\n }\n </div>\n}", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px;padding:2.5px 6px}.gravity-status-indicator.md{height:24px;padding:4px 8px}.gravity-status-indicator.positive,.gravity-status-indicator.positive-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.positive-secondary{border:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator.negative,.gravity-status-indicator.negative-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.negative-secondary{border:1px solid var(--on-bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.
|
|
6037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityStatusIndicatorComponent, isStandalone: true, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", cypressTag: "cypressTag", size: "size", type: "type", status: "status" }, usesOnChanges: true, ngImport: i0, template: "@if (type === 'primary') {\n <div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n @if (text) {\n <span>{{ text }}</span>\n }\n @if (icon) {\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n </div>\n}\n\n@if (type === 'secondary') {\n <div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n <div></div>\n <span>{{ text }}</span>\n </div>\n}\n\n@if (type === 'tertiary') {\n <div class=\"gravity-status-indicator-tertiary {{size}} {{status}}\">\n @if (size == 'sm') {\n <gravity-icon [iconName]=\"icon ? icon : 'check'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (size == 'md') {\n <span class=\"hr-body md-bold\">{{ text ? text : '?' }}</span>\n }\n </div>\n}", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px;padding:2.5px 6px}.gravity-status-indicator.md{height:24px;padding:4px 8px}.gravity-status-indicator.positive,.gravity-status-indicator.positive-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.positive-secondary{border:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator.negative,.gravity-status-indicator.negative-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.negative-secondary{border:1px solid var(--on-bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutral{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive,.gravity-status-indicator-dot.gravity-status-indicator.positive-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative,.gravity-status-indicator-dot.gravity-status-indicator.negative-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutral{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}.gravity-status-indicator-dot.warning{--gravity-status-indicator-dot-color: var(--bg-button-active-alternative)}.gravity-status-indicator-tertiary{border-radius:6.25rem;display:flex;justify-content:center;align-items:center}.gravity-status-indicator-tertiary.sm{height:16px;width:16px;background-color:var(--gravity-status-indicator-tertiary-background-color)}.gravity-status-indicator-tertiary.sm gravity-icon{--icon-color: var(--gravity-status-indicator-tertiary-text-color)}.gravity-status-indicator-tertiary.md{height:24px;width:24px;background-color:var(--gravity-status-indicator-tertiary-background-color)}.gravity-status-indicator-tertiary.md span{color:var(--gravity-status-indicator-tertiary-text-color)}.gravity-status-indicator-tertiary.positive,.gravity-status-indicator-tertiary.gravity-status-indicator.positive-secondary{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-positive);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-positive)}.gravity-status-indicator-tertiary.negative,.gravity-status-indicator-tertiary.gravity-status-indicator.negative-secondary{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-negative);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-negative)}.gravity-status-indicator-tertiary.attention{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-tertiary);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-tertiary)}.gravity-status-indicator-tertiary.neutral{--gravity-status-indicator-tertiary-background-color: var(--bg-disabled);--gravity-status-indicator-tertiary-text-color: var(--text-primary)}.gravity-status-indicator-tertiary.disabled{--gravity-status-indicator-tertiary-background-color: var(--bg-disabled);--gravity-status-indicator-tertiary-text-color: var(--on-bg-disabled);outline:1px solid var(--on-bg-disabled)}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
6038
6038
|
}
|
|
6039
6039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
|
|
6040
6040
|
type: Component,
|
|
6041
|
-
args: [{ selector: 'gravity-status-indicator', standalone: true, imports: [GravityIconComponent], template: "@if (type === 'primary') {\n <div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n @if (text) {\n <span>{{ text }}</span>\n }\n @if (icon) {\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n </div>\n}\n\n@if (type === 'secondary') {\n <div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n <div></div>\n <span>{{ text }}</span>\n </div>\n}\n\n@if (type === 'tertiary') {\n <div class=\"gravity-status-indicator-tertiary {{size}} {{status}}\">\n @if (size == 'sm') {\n <gravity-icon [iconName]=\"icon ? icon : 'check'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (size == 'md') {\n <span class=\"hr-body md-bold\">{{ text ? text : '?' }}</span>\n }\n </div>\n}", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px;padding:2.5px 6px}.gravity-status-indicator.md{height:24px;padding:4px 8px}.gravity-status-indicator.positive,.gravity-status-indicator.positive-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.positive-secondary{border:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator.negative,.gravity-status-indicator.negative-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.negative-secondary{border:1px solid var(--on-bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.
|
|
6041
|
+
args: [{ selector: 'gravity-status-indicator', standalone: true, imports: [GravityIconComponent], template: "@if (type === 'primary') {\n <div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n @if (text) {\n <span>{{ text }}</span>\n }\n @if (icon) {\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n </div>\n}\n\n@if (type === 'secondary') {\n <div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\"\n [attr.data-cy]=\"cypressTag ? 'statusIndicator_' + cypressTag : null\">\n <div></div>\n <span>{{ text }}</span>\n </div>\n}\n\n@if (type === 'tertiary') {\n <div class=\"gravity-status-indicator-tertiary {{size}} {{status}}\">\n @if (size == 'sm') {\n <gravity-icon [iconName]=\"icon ? icon : 'check'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (size == 'md') {\n <span class=\"hr-body md-bold\">{{ text ? text : '?' }}</span>\n }\n </div>\n}", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px;padding:2.5px 6px}.gravity-status-indicator.md{height:24px;padding:4px 8px}.gravity-status-indicator.positive,.gravity-status-indicator.positive-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.positive-secondary{border:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator.negative,.gravity-status-indicator.negative-secondary{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.negative-secondary{border:1px solid var(--on-bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutral{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive,.gravity-status-indicator-dot.gravity-status-indicator.positive-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative,.gravity-status-indicator-dot.gravity-status-indicator.negative-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutral{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}.gravity-status-indicator-dot.warning{--gravity-status-indicator-dot-color: var(--bg-button-active-alternative)}.gravity-status-indicator-tertiary{border-radius:6.25rem;display:flex;justify-content:center;align-items:center}.gravity-status-indicator-tertiary.sm{height:16px;width:16px;background-color:var(--gravity-status-indicator-tertiary-background-color)}.gravity-status-indicator-tertiary.sm gravity-icon{--icon-color: var(--gravity-status-indicator-tertiary-text-color)}.gravity-status-indicator-tertiary.md{height:24px;width:24px;background-color:var(--gravity-status-indicator-tertiary-background-color)}.gravity-status-indicator-tertiary.md span{color:var(--gravity-status-indicator-tertiary-text-color)}.gravity-status-indicator-tertiary.positive,.gravity-status-indicator-tertiary.gravity-status-indicator.positive-secondary{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-positive);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-positive)}.gravity-status-indicator-tertiary.negative,.gravity-status-indicator-tertiary.gravity-status-indicator.negative-secondary{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-negative);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-negative)}.gravity-status-indicator-tertiary.attention{--gravity-status-indicator-tertiary-background-color: var(--bg-button-active-tertiary);--gravity-status-indicator-tertiary-text-color: var(--on-bg-button-active-tertiary)}.gravity-status-indicator-tertiary.neutral{--gravity-status-indicator-tertiary-background-color: var(--bg-disabled);--gravity-status-indicator-tertiary-text-color: var(--text-primary)}.gravity-status-indicator-tertiary.disabled{--gravity-status-indicator-tertiary-background-color: var(--bg-disabled);--gravity-status-indicator-tertiary-text-color: var(--on-bg-disabled);outline:1px solid var(--on-bg-disabled)}\n"] }]
|
|
6042
6042
|
}], propDecorators: { icon: [{
|
|
6043
6043
|
type: Input
|
|
6044
6044
|
}], text: [{
|
|
@@ -8177,11 +8177,11 @@ class GravityMenuComponent {
|
|
|
8177
8177
|
el.scrollTo({ top: 62 * index, behavior: 'auto' });
|
|
8178
8178
|
}
|
|
8179
8179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", collapsable: "collapsable", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutro'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutro'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GravityTooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "persistent", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", collapsable: "collapsable", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GravityTooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "persistent", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8181
8181
|
}
|
|
8182
8182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
8183
8183
|
type: Component,
|
|
8184
|
-
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutro'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutro'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
8184
|
+
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
8185
8185
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
|
|
8186
8186
|
type: Input
|
|
8187
8187
|
}], userInfo: [{
|
|
@@ -9174,12 +9174,12 @@ class GravityPasswordFieldComponent {
|
|
|
9174
9174
|
return this._translations[lang].strengthLabel;
|
|
9175
9175
|
}
|
|
9176
9176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityPasswordFieldComponent, isStandalone: true, selector: "gravity-password-field", inputs: { cypressTag: "cypressTag", buttonText: "buttonText", size: "size", customState: "customState", isSubmitting: "isSubmitting", currentLang: "currentLang" }, outputs: { onSubmit: "onSubmit", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "textField", first: true, predicate: ["textField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"password-field\">\n <gravity-text-field\n #textField\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"'full'\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n </gravity-text-field>\n\n @if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n }\n\n @if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : '
|
|
9177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityPasswordFieldComponent, isStandalone: true, selector: "gravity-password-field", inputs: { cypressTag: "cypressTag", buttonText: "buttonText", size: "size", customState: "customState", isSubmitting: "isSubmitting", currentLang: "currentLang" }, outputs: { onSubmit: "onSubmit", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "textField", first: true, predicate: ["textField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"password-field\">\n <gravity-text-field\n #textField\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"'full'\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n </gravity-text-field>\n\n @if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n }\n\n @if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutral'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @if (errorMessage) {\n <div class=\"password-error-alert\">\n <gravity-icon [iconName]=\"'warning-circle'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\" />\n <span class=\"hr-body sm-regular\" [innerHTML]=\"errorMessage\"></span>\n </div>\n }\n\n @if (buttonText) {\n <gravity-button [type]=\"'primary'\" [disabled]=\"!isPasswordValid() || isSubmitting\" [size]=\"'md'\" [fullWidth]=\"true\" (click)=\"onSubmit.emit(inputValue)\">\n @if (!isSubmitting) { {{ buttonText }} }\n @if (isSubmitting) { <div class=\"spinner-border\"></div> }\n </gravity-button>\n }\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.password-field .strength-meter-container{width:100%}.password-field .password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-field .password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-field .password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}.password-field .password-error-alert{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md);border-radius:.3125rem;background:var(--bg-button-hover-alternative);padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm)}.password-field .password-error-alert span{color:var(--on-bg-button-active-alternative)}.password-field .password-error-alert gravity-icon{--icon-color: var(--on-bg-button-active-alternative)}.password-field gravity-button{display:block;margin-top:var(--gravity-spacing-md)}\n"], dependencies: [{ kind: "component", type: GravityStrengthMeterComponent, selector: "gravity-strength-meter", inputs: ["variant", "strength", "label", "language"] }, { kind: "component", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: ["icon", "text", "cypressTag", "size", "type", "status"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["label", "required", "cypressTag", "supportText", "prefix", "customInputValue", "currentLang", "textFieldType", "customState", "iconLeft", "iconColor", "iconRight", "supportTextIcon", "clickOnLeftIcon", "clickOnRightIcon", "placeholder", "labelExtraText", "size", "autocomplete", "characterCounter", "width", "validations", "passwordRequirements", "inputContentType"], outputs: ["onBlur", "onFocus", "clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
9178
9178
|
}
|
|
9179
9179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityPasswordFieldComponent, decorators: [{
|
|
9180
9180
|
type: Component,
|
|
9181
9181
|
args: [{ standalone: true, selector: 'gravity-password-field', imports: [GravityStrengthMeterComponent, GravityStatusIndicatorComponent,
|
|
9182
|
-
GravityTextFieldComponent, GravityIconComponent, GravityButtonComponent], template: "<div class=\"password-field\">\n <gravity-text-field\n #textField\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"'full'\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n </gravity-text-field>\n\n @if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n }\n\n @if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : '
|
|
9182
|
+
GravityTextFieldComponent, GravityIconComponent, GravityButtonComponent], template: "<div class=\"password-field\">\n <gravity-text-field\n #textField\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"'full'\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n </gravity-text-field>\n\n @if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n }\n\n @if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutral'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @if (errorMessage) {\n <div class=\"password-error-alert\">\n <gravity-icon [iconName]=\"'warning-circle'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\" />\n <span class=\"hr-body sm-regular\" [innerHTML]=\"errorMessage\"></span>\n </div>\n }\n\n @if (buttonText) {\n <gravity-button [type]=\"'primary'\" [disabled]=\"!isPasswordValid() || isSubmitting\" [size]=\"'md'\" [fullWidth]=\"true\" (click)=\"onSubmit.emit(inputValue)\">\n @if (!isSubmitting) { {{ buttonText }} }\n @if (isSubmitting) { <div class=\"spinner-border\"></div> }\n </gravity-button>\n }\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.password-field .strength-meter-container{width:100%}.password-field .password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-field .password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-field .password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}.password-field .password-error-alert{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md);border-radius:.3125rem;background:var(--bg-button-hover-alternative);padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm)}.password-field .password-error-alert span{color:var(--on-bg-button-active-alternative)}.password-field .password-error-alert gravity-icon{--icon-color: var(--on-bg-button-active-alternative)}.password-field gravity-button{display:block;margin-top:var(--gravity-spacing-md)}\n"] }]
|
|
9183
9183
|
}], propDecorators: { cypressTag: [{
|
|
9184
9184
|
type: Input
|
|
9185
9185
|
}], buttonText: [{
|