@progressio_resources/gravity-design-system 4.1.3 → 4.1.4
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.
|
@@ -6079,11 +6079,11 @@ class GravityStatusIndicatorComponent {
|
|
|
6079
6079
|
this.text = this.text.charAt(0).toUpperCase() + this.text.slice(1).toLowerCase();
|
|
6080
6080
|
}
|
|
6081
6081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6082
|
-
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
|
|
6082
|
+
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 class=\"hr-body {{size}}-regular\" >{{ 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 class=\"dot\"></div>\n <span class=\"hr-body sm-regular\">{{ 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 span,.gravity-status-indicator-dot span{line-height:normal}.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 .dot{width:8px;height:8px;box-sizing:content-box;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.positive-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.positive-secondary .dot{outline:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator-dot.negative,.gravity-status-indicator-dot.gravity-status-indicator.negative-secondary,.gravity-status-indicator-dot.negative-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.negative-secondary .dot{outline:1px solid var(--on-bg-button-active-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"] }] }); }
|
|
6083
6083
|
}
|
|
6084
6084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
|
|
6085
6085
|
type: Component,
|
|
6086
|
-
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
|
|
6086
|
+
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 class=\"hr-body {{size}}-regular\" >{{ 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 class=\"dot\"></div>\n <span class=\"hr-body sm-regular\">{{ 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 span,.gravity-status-indicator-dot span{line-height:normal}.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 .dot{width:8px;height:8px;box-sizing:content-box;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.positive-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.positive-secondary .dot{outline:1px solid var(--on-bg-button-active-positive)}.gravity-status-indicator-dot.negative,.gravity-status-indicator-dot.gravity-status-indicator.negative-secondary,.gravity-status-indicator-dot.negative-secondary{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.negative-secondary .dot{outline:1px solid var(--on-bg-button-active-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"] }]
|
|
6087
6087
|
}], propDecorators: { icon: [{
|
|
6088
6088
|
type: Input
|
|
6089
6089
|
}], text: [{
|