@progressio_resources/gravity-design-system 3.0.20 → 3.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.mjs +8 -2
- package/esm2022/lib/components/gravity-editable-input/gravity-editable-input.component.mjs +13 -3
- package/fesm2022/progressio_resources-gravity-design-system.mjs +18 -2
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.d.ts +5 -3
- package/lib/components/gravity-editable-input/gravity-editable-input.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -6,10 +6,14 @@ export class GravityAvatarStackComponent {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.isCoin = true;
|
|
8
8
|
this.selectMultipleItems = false;
|
|
9
|
+
this.defaultSelected = false;
|
|
9
10
|
this.clickOnIcon = new EventEmitter();
|
|
10
11
|
this.selectedIndexes = [];
|
|
11
12
|
this.selectedItems = [];
|
|
12
13
|
}
|
|
14
|
+
ngAfterViewInit() {
|
|
15
|
+
this.onClick(0);
|
|
16
|
+
}
|
|
13
17
|
onClick(index) {
|
|
14
18
|
const selectedIndex = this.selectedIndexes.indexOf(index);
|
|
15
19
|
if (this.selectMultipleItems) {
|
|
@@ -35,7 +39,7 @@ export class GravityAvatarStackComponent {
|
|
|
35
39
|
this.clickOnIcon.emit(this.selectedItems);
|
|
36
40
|
}
|
|
37
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: { config: "config", isCoin: "isCoin", items: "items", selectMultipleItems: "selectMultipleItems", size: "size", type: "type" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"stack-icon-container\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"icon-wrapper\" [style.z-index]=\"selectedIndexes.includes(i) ? 100 : items.length - i\"\n [class.selected]=\"selectedIndexes.includes(i)\">\n <gravity-icon\n class=\"avatar-icon pointer {{size}}\"\n (click)=\"onClick(i);\" [attr.data-cy]=\"'stack-item-' + item[config.label]\"\n [iconName]=\"type + '-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body sm-regular hover-text\">{{ item[config.label] }}</p>\n </div>\n </ng-container>\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}.stack-icon-container{display:flex;position:relative}.icon-wrapper{position:relative}.icon-wrapper:not(:first-child){margin-left:-4px}.selected .avatar-icon{border:1px solid var(--on-bg-button-active-primary);outline:1px solid var(--bg-button-active-primary);border-radius:6.25rem}.avatar-icon{height:var(--avatar-icon-height);min-height:var(--avatar-icon-height);width:var(--avatar-icon-width);min-width:var(--avatar-icon-width)}.hover-text{background-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-active-primary);display:none;position:absolute;padding:2px;top:calc(100% + 4px);left:50%;transform:translate(-50%);white-space:nowrap;line-height:normal;border-radius:1.105px}.icon-wrapper:hover .hover-text{display:block}@media (max-width: 992px){.icon-wrapper .hover-text{display:none}.icon-wrapper.selected .hover-text{display:block}.icon-wrapper:not(.selected) .hover-text{display:none!important}}.sm{--avatar-icon-height: 24px;--avatar-icon-width: 24px}.md{--avatar-icon-height: 32px;--avatar-icon-width: 32px}.lg{--avatar-icon-height: 46px;--avatar-icon-width: 46px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: { config: "config", isCoin: "isCoin", items: "items", selectMultipleItems: "selectMultipleItems", size: "size", type: "type", defaultSelected: "defaultSelected" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"stack-icon-container\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"icon-wrapper\" [style.z-index]=\"selectedIndexes.includes(i) ? 100 : items.length - i\"\n [class.selected]=\"selectedIndexes.includes(i)\">\n <gravity-icon\n class=\"avatar-icon pointer {{size}}\"\n (click)=\"onClick(i);\" [attr.data-cy]=\"'stack-item-' + item[config.label]\"\n [iconName]=\"type + '-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body sm-regular hover-text\">{{ item[config.label] }}</p>\n </div>\n </ng-container>\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}.stack-icon-container{display:flex;position:relative}.icon-wrapper{position:relative}.icon-wrapper:not(:first-child){margin-left:-4px}.selected .avatar-icon{border:1px solid var(--on-bg-button-active-primary);outline:1px solid var(--bg-button-active-primary);border-radius:6.25rem}.avatar-icon{height:var(--avatar-icon-height);min-height:var(--avatar-icon-height);width:var(--avatar-icon-width);min-width:var(--avatar-icon-width)}.hover-text{background-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-active-primary);display:none;position:absolute;padding:2px;top:calc(100% + 4px);left:50%;transform:translate(-50%);white-space:nowrap;line-height:normal;border-radius:1.105px}.icon-wrapper:hover .hover-text{display:block}@media (max-width: 992px){.icon-wrapper .hover-text{display:none}.icon-wrapper.selected .hover-text{display:block}.icon-wrapper:not(.selected) .hover-text{display:none!important}}.sm{--avatar-icon-height: 24px;--avatar-icon-width: 24px}.md{--avatar-icon-height: 32px;--avatar-icon-width: 32px}.lg{--avatar-icon-height: 46px;--avatar-icon-width: 46px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
39
43
|
}
|
|
40
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, decorators: [{
|
|
41
45
|
type: Component,
|
|
@@ -52,7 +56,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
52
56
|
type: Input
|
|
53
57
|
}], type: [{
|
|
54
58
|
type: Input
|
|
59
|
+
}], defaultSelected: [{
|
|
60
|
+
type: Input
|
|
55
61
|
}], clickOnIcon: [{
|
|
56
62
|
type: Output
|
|
57
63
|
}] } });
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1hdmF0YXItc3RhY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3Jhdml0eS1kZXNpZ24tc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9ncmF2aXR5LWF2YXRhci1zdGFjay9ncmF2aXR5LWF2YXRhci1zdGFjay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktYXZhdGFyLXN0YWNrL2dyYXZpdHktYXZhdGFyLXN0YWNrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3BGLE1BQU0sT0FBTywyQkFBMkI7SUFMeEM7UUFPa0IsV0FBTSxHQUFZLElBQUksQ0FBQztRQUV2Qix3QkFBbUIsR0FBWSxLQUFLLENBQUM7UUFHckMsb0JBQWUsR0FBWSxLQUFLLENBQUM7UUFFaEMsZ0JBQVcsR0FBd0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUVyRSxvQkFBZSxHQUFhLEVBQUUsQ0FBQztRQUMvQixrQkFBYSxHQUFlLEVBQUUsQ0FBQztLQTRCdkM7SUExQkMsZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDbEIsQ0FBQztJQUVNLE9BQU8sQ0FBQyxLQUFhO1FBQzFCLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRTFELElBQUksSUFBSSxDQUFDLG1CQUFtQixFQUFFO1lBQzVCLElBQUksYUFBYSxLQUFLLENBQUMsQ0FBQyxFQUFFO2dCQUN4QixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLEtBQUssQ0FBQyxDQUFDO2dCQUNyRSxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzthQUNwRjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDakMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2FBQzVDO1NBQ0Y7YUFBTTtZQUNMLElBQUksYUFBYSxLQUFLLENBQUMsQ0FBQyxFQUFFO2dCQUN4QixJQUFJLENBQUMsZUFBZSxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQy9CLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7YUFDMUM7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGVBQWUsR0FBRyxFQUFFLENBQUM7Z0JBQzFCLElBQUksQ0FBQyxhQUFhLEdBQUcsRUFBRSxDQUFDO2FBQ3pCO1NBQ0Y7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDNUMsQ0FBQzsrR0F2Q1UsMkJBQTJCO21HQUEzQiwyQkFBMkIsaVJDUHhDLDBxQkFhTTs7NEZETk8sMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNFLHNCQUFzQjs4QkFLaEIsTUFBTTtzQkFBckIsS0FBSztnQkFDVSxNQUFNO3NCQUFyQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsbUJBQW1CO3NCQUFsQyxLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUVXLFdBQVc7c0JBQTNCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhdml0eS1hdmF0YXItc3RhY2snLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3Jhdml0eS1hdmF0YXItc3RhY2suY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWF2YXRhci1zdGFjay5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEdyYXZpdHlBdmF0YXJTdGFja0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXR7XG4gIEBJbnB1dCgpIHB1YmxpYyBjb25maWc6IHsgaWNvbjogc3RyaW5nLCBsYWJlbDogc3RyaW5nIH07XG4gIEBJbnB1dCgpIHB1YmxpYyBpc0NvaW46IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBwdWJsaWMgaXRlbXM6IEFycmF5PGFueT47XG4gIEBJbnB1dCgpIHB1YmxpYyBzZWxlY3RNdWx0aXBsZUl0ZW1zOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnbGcnIHwgJ21kJyB8ICdzbSc7XG4gIEBJbnB1dCgpIHB1YmxpYyB0eXBlOiAnbmV0d29yaycgfCAnY29pbic7XG4gIEBJbnB1dCgpIHB1YmxpYyBkZWZhdWx0U2VsZWN0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgcHVibGljIGNsaWNrT25JY29uOiBFdmVudEVtaXR0ZXI8YW55W10+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgcHVibGljIHNlbGVjdGVkSW5kZXhlczogbnVtYmVyW10gPSBbXTtcbiAgcHVibGljIHNlbGVjdGVkSXRlbXM6IEFycmF5PGFueT4gPSBbXTtcblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vbkNsaWNrKDApO1xuICB9XG5cbiAgcHVibGljIG9uQ2xpY2soaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGNvbnN0IHNlbGVjdGVkSW5kZXggPSB0aGlzLnNlbGVjdGVkSW5kZXhlcy5pbmRleE9mKGluZGV4KTtcblxuICAgIGlmICh0aGlzLnNlbGVjdE11bHRpcGxlSXRlbXMpIHtcbiAgICAgIGlmIChzZWxlY3RlZEluZGV4ICE9PSAtMSkge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IHRoaXMuc2VsZWN0ZWRJbmRleGVzLmZpbHRlcihpID0+IGkgIT09IGluZGV4KTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmZpbHRlcihpdGVtID0+IGl0ZW0gIT09IHRoaXMuaXRlbXNbaW5kZXhdKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleGVzLnB1c2goaW5kZXgpO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMucHVzaCh0aGlzLml0ZW1zW2luZGV4XSk7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGlmIChzZWxlY3RlZEluZGV4ID09PSAtMSkge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IFtpbmRleF07XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtcyA9IFt0aGlzLml0ZW1zW2luZGV4XV07XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IFtdO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMgPSBbXTtcbiAgICAgIH1cbiAgICB9XG4gICAgdGhpcy5jbGlja09uSWNvbi5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gIH1cbn0iLCI8ZGl2IGNsYXNzPVwic3RhY2staWNvbi1jb250YWluZXJcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJpY29uLXdyYXBwZXJcIiBbc3R5bGUuei1pbmRleF09XCJzZWxlY3RlZEluZGV4ZXMuaW5jbHVkZXMoaSkgPyAxMDAgOiBpdGVtcy5sZW5ndGggLSBpXCJcbiAgICAgICAgIFtjbGFzcy5zZWxlY3RlZF09XCJzZWxlY3RlZEluZGV4ZXMuaW5jbHVkZXMoaSlcIj5cbiAgICAgIDxncmF2aXR5LWljb25cbiAgICAgICAgICBjbGFzcz1cImF2YXRhci1pY29uIHBvaW50ZXIge3tzaXplfX1cIlxuICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrKGkpO1wiIFthdHRyLmRhdGEtY3ldPVwiJ3N0YWNrLWl0ZW0tJyArIGl0ZW1bY29uZmlnLmxhYmVsXVwiXG4gICAgICAgICAgW2ljb25OYW1lXT1cInR5cGUgKyAnLWlkLScgKyBpdGVtW2NvbmZpZy5pY29uXVwiXG4gICAgICAgICAgW2lzQ29pbl09XCJpc0NvaW5cIj5cbiAgICAgIDwvZ3Jhdml0eS1pY29uPlxuICAgICAgPHAgKm5nSWY9XCJjb25maWcubGFiZWxcIiBjbGFzcz1cImhyLWJvZHkgc20tcmVndWxhciBob3Zlci10ZXh0XCI+e3sgaXRlbVtjb25maWcubGFiZWxdIH19PC9wPlxuICAgIDwvZGl2PlxuICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PiJdfQ==
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
1
|
+
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "../gravity-icon/gravity-icon.component";
|
|
@@ -9,15 +9,21 @@ export class GravityEditableInputComponent {
|
|
|
9
9
|
this.size = 'sm';
|
|
10
10
|
this.readOnly = false;
|
|
11
11
|
this.haveError = false;
|
|
12
|
+
this.justNumber = false;
|
|
13
|
+
this.valueChange = new EventEmitter();
|
|
12
14
|
}
|
|
13
15
|
onKeyUp(inputField) {
|
|
16
|
+
if (this.justNumber) {
|
|
17
|
+
inputField.value = inputField.value.replace(/[^0-9]/g, '');
|
|
18
|
+
}
|
|
14
19
|
this.haveError = inputField.value.trim() === '';
|
|
20
|
+
this.valueChange.emit(inputField.value);
|
|
15
21
|
}
|
|
16
22
|
focusInput(inputField) {
|
|
17
23
|
inputField.focus();
|
|
18
24
|
}
|
|
19
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityEditableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityEditableInputComponent, selector: "gravity-editable-input", inputs: { label: "label", value: "value", placeholder: "placeholder", errorMessage: "errorMessage", size: "size", readOnly: "readOnly", haveError: "haveError" }, ngImport: i0, template: "<div class=\"gravity-editable-input\">\n <div class=\"editable-input-container\" [class.focus]=\"isFocused\" [class.error]=\"haveError\">\n <label *ngIf=\"label\" class=\"hr-label {{size}}-bold\">{{ label }}</label>\n <div class=\"editable-input\" [class.read-only]=\"readOnly\">\n <input #editableInput [placeholder]=\"placeholder\" (focus)=\"isFocused = true\" (blur)=\"isFocused = false\"\n (keyup)=\"onKeyUp(editableInput)\" [disabled]=\"readOnly\" [value]=\"value\">\n <gravity-icon *ngIf=\"!readOnly\" [style.--icon-color]=\"haveError ? 'var(--negative-primary)' :\n isFocused ?'var(--outline-field-full-enabled-typing-primary)' : 'var(--text-primary)'\"\n [iconName]=\"'update'\" [size]=\"size\" (click)=\"focusInput(editableInput)\">\n </gravity-icon>\n </div>\n </div>\n <div class=\"error-message\" *ngIf=\"haveError && errorMessage && !readOnly\">\n <gravity-icon [style.--icon-color]=\"'var(--negative-primary)'\" [iconName]=\"'warning-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n <span class=\"hr-label sm-regular\">{{ errorMessage }}</span>\n </div>\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}.gravity-editable-input{width:100%;min-width:190px;max-width:500px;display:inline-flex;flex-direction:column;align-items:flex-start}.gravity-editable-input .editable-input-container{width:100%}.gravity-editable-input .editable-input-container.focus{border-bottom:1px solid var(--outline-field-full-enabled-typing-primary)}.gravity-editable-input .editable-input-container.error{border-bottom:1px solid var(--negative-primary)!important}.gravity-editable-input label{padding:0 0 var(--gravity-spacing-xs) var(--gravity-spacing-xs)}.gravity-editable-input .editable-input{width:100%;height:28px;display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);border-radius:.3125rem;padding:var(--gravity-spacing-xs)}.gravity-editable-input .editable-input.read-only{pointer-events:none}.gravity-editable-input .editable-input:hover{background:var(--surface-primary)}.gravity-editable-input .editable-input gravity-icon{cursor:pointer}.gravity-editable-input .editable-input input{gap:5px;all:unset;flex:1 0 0;display:flex;align-items:center}.gravity-editable-input .error-message{display:flex;gap:.3125rem;align-items:flex-start;color:var(--negative-primary);padding:var(--spacing-xxs, .25rem) 0 0 var(--spacing-xxs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityEditableInputComponent, selector: "gravity-editable-input", inputs: { label: "label", value: "value", placeholder: "placeholder", errorMessage: "errorMessage", size: "size", readOnly: "readOnly", haveError: "haveError", justNumber: "justNumber" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"gravity-editable-input\">\n <div class=\"editable-input-container\" [class.focus]=\"isFocused\" [class.error]=\"haveError\">\n <label *ngIf=\"label\" class=\"hr-label {{size}}-bold\">{{ label }}</label>\n <div class=\"editable-input\" [class.read-only]=\"readOnly\">\n <input #editableInput [placeholder]=\"placeholder\" (focus)=\"isFocused = true\" (blur)=\"isFocused = false\"\n (keyup)=\"onKeyUp(editableInput)\" [disabled]=\"readOnly\" [value]=\"value\">\n <gravity-icon *ngIf=\"!readOnly\" [style.--icon-color]=\"haveError ? 'var(--negative-primary)' :\n isFocused ?'var(--outline-field-full-enabled-typing-primary)' : 'var(--text-primary)'\"\n [iconName]=\"'update'\" [size]=\"size\" (click)=\"focusInput(editableInput)\">\n </gravity-icon>\n </div>\n </div>\n <div class=\"error-message\" *ngIf=\"haveError && errorMessage && !readOnly\">\n <gravity-icon [style.--icon-color]=\"'var(--negative-primary)'\" [iconName]=\"'warning-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n <span class=\"hr-label sm-regular\">{{ errorMessage }}</span>\n </div>\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}.gravity-editable-input{width:100%;min-width:190px;max-width:500px;display:inline-flex;flex-direction:column;align-items:flex-start}.gravity-editable-input .editable-input-container{width:100%}.gravity-editable-input .editable-input-container.focus{border-bottom:1px solid var(--outline-field-full-enabled-typing-primary)}.gravity-editable-input .editable-input-container.error{border-bottom:1px solid var(--negative-primary)!important}.gravity-editable-input label{padding:0 0 var(--gravity-spacing-xs) var(--gravity-spacing-xs)}.gravity-editable-input .editable-input{width:100%;height:28px;display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);border-radius:.3125rem;padding:var(--gravity-spacing-xs)}.gravity-editable-input .editable-input.read-only{pointer-events:none}.gravity-editable-input .editable-input:hover{background:var(--surface-primary)}.gravity-editable-input .editable-input gravity-icon{cursor:pointer}.gravity-editable-input .editable-input input{gap:5px;all:unset;flex:1 0 0;display:flex;align-items:center}.gravity-editable-input .error-message{display:flex;gap:.3125rem;align-items:flex-start;color:var(--negative-primary);padding:var(--spacing-xxs, .25rem) 0 0 var(--spacing-xxs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
21
27
|
}
|
|
22
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityEditableInputComponent, decorators: [{
|
|
23
29
|
type: Component,
|
|
@@ -36,5 +42,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
36
42
|
type: Input
|
|
37
43
|
}], haveError: [{
|
|
38
44
|
type: Input
|
|
45
|
+
}], justNumber: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}], valueChange: [{
|
|
48
|
+
type: Output
|
|
39
49
|
}] } });
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1lZGl0YWJsZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZWRpdGFibGUtaW5wdXQvZ3Jhdml0eS1lZGl0YWJsZS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZWRpdGFibGUtaW5wdXQvZ3Jhdml0eS1lZGl0YWJsZS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3ZFLE1BQU0sT0FBTyw2QkFBNkI7SUFMMUM7UUFNUyxjQUFTLEdBQVksS0FBSyxDQUFDO1FBR2xCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFHbkIsU0FBSSxHQUFnQixJQUFJLENBQUM7UUFDekIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixjQUFTLEdBQVksS0FBSyxDQUFDO1FBQzNCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFM0IsZ0JBQVcsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQWFqRjtJQVhRLE9BQU8sQ0FBQyxVQUE0QjtRQUN6QyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDbkIsVUFBVSxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLENBQUM7U0FDNUQ7UUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO1FBQ2hELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRU0sVUFBVSxDQUFDLFVBQTRCO1FBQzVDLFVBQVUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNyQixDQUFDOytHQXhCVSw2QkFBNkI7bUdBQTdCLDZCQUE2QixtU0NQMUMsd3RDQWlCTTs7NEZEVk8sNkJBQTZCO2tCQUx6QyxTQUFTOytCQUNFLHdCQUF3Qjs4QkFPbEIsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBQ1UsWUFBWTtzQkFBM0IsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUVXLFdBQVc7c0JBQTNCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdncmF2aXR5LWVkaXRhYmxlLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyYXZpdHktZWRpdGFibGUtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWVkaXRhYmxlLWlucHV0LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgR3Jhdml0eUVkaXRhYmxlSW5wdXRDb21wb25lbnQge1xuICBwdWJsaWMgaXNGb2N1c2VkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KCkgcHVibGljIGxhYmVsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyB2YWx1ZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHB1YmxpYyBwbGFjZWhvbGRlcjogc3RyaW5nO1xuICBASW5wdXQoKSBwdWJsaWMgZXJyb3JNZXNzYWdlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyA9ICdzbSc7XG4gIEBJbnB1dCgpIHB1YmxpYyByZWFkT25seTogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBwdWJsaWMgaGF2ZUVycm9yOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyBqdXN0TnVtYmVyOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBwdWJsaWMgb25LZXlVcChpbnB1dEZpZWxkOiBIVE1MSW5wdXRFbGVtZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuanVzdE51bWJlcikge1xuICAgICAgaW5wdXRGaWVsZC52YWx1ZSA9IGlucHV0RmllbGQudmFsdWUucmVwbGFjZSgvW14wLTldL2csICcnKTtcbiAgICB9XG4gICAgdGhpcy5oYXZlRXJyb3IgPSBpbnB1dEZpZWxkLnZhbHVlLnRyaW0oKSA9PT0gJyc7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KGlucHV0RmllbGQudmFsdWUpO1xuICB9XG5cbiAgcHVibGljIGZvY3VzSW5wdXQoaW5wdXRGaWVsZDogSFRNTElucHV0RWxlbWVudCk6IHZvaWQge1xuICAgIGlucHV0RmllbGQuZm9jdXMoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImdyYXZpdHktZWRpdGFibGUtaW5wdXRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZWRpdGFibGUtaW5wdXQtY29udGFpbmVyXCIgW2NsYXNzLmZvY3VzXT1cImlzRm9jdXNlZFwiIFtjbGFzcy5lcnJvcl09XCJoYXZlRXJyb3JcIj5cbiAgICAgICAgPGxhYmVsICpuZ0lmPVwibGFiZWxcIiBjbGFzcz1cImhyLWxhYmVsIHt7c2l6ZX19LWJvbGRcIj57eyBsYWJlbCB9fTwvbGFiZWw+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJlZGl0YWJsZS1pbnB1dFwiIFtjbGFzcy5yZWFkLW9ubHldPVwicmVhZE9ubHlcIj5cbiAgICAgICAgICAgIDxpbnB1dCAjZWRpdGFibGVJbnB1dCBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIiAoZm9jdXMpPVwiaXNGb2N1c2VkID0gdHJ1ZVwiIChibHVyKT1cImlzRm9jdXNlZCA9IGZhbHNlXCJcbiAgICAgICAgICAgICAgICAgICAoa2V5dXApPVwib25LZXlVcChlZGl0YWJsZUlucHV0KVwiIFtkaXNhYmxlZF09XCJyZWFkT25seVwiIFt2YWx1ZV09XCJ2YWx1ZVwiPlxuICAgICAgICAgICAgPGdyYXZpdHktaWNvbiAqbmdJZj1cIiFyZWFkT25seVwiIFtzdHlsZS4tLWljb24tY29sb3JdPVwiaGF2ZUVycm9yID8gJ3ZhcigtLW5lZ2F0aXZlLXByaW1hcnkpJyA6XG4gICAgICAgICAgICAgICAgaXNGb2N1c2VkID8ndmFyKC0tb3V0bGluZS1maWVsZC1mdWxsLWVuYWJsZWQtdHlwaW5nLXByaW1hcnkpJyA6ICd2YXIoLS10ZXh0LXByaW1hcnkpJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uTmFtZV09XCIndXBkYXRlJ1wiIFtzaXplXT1cInNpemVcIiAoY2xpY2spPVwiZm9jdXNJbnB1dChlZGl0YWJsZUlucHV0KVwiPlxuICAgICAgICAgICAgPC9ncmF2aXR5LWljb24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJlcnJvci1tZXNzYWdlXCIgKm5nSWY9XCJoYXZlRXJyb3IgJiYgZXJyb3JNZXNzYWdlICYmICFyZWFkT25seVwiPlxuICAgICAgICA8Z3Jhdml0eS1pY29uIFtzdHlsZS4tLWljb24tY29sb3JdPVwiJ3ZhcigtLW5lZ2F0aXZlLXByaW1hcnkpJ1wiIFtpY29uTmFtZV09XCInd2FybmluZy1jaXJjbGUnXCJcbiAgICAgICAgICAgICAgICAgICAgICBbaWNvblNpemVdPVwiJ3NtLTEyJ1wiPjwvZ3Jhdml0eS1pY29uPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImhyLWxhYmVsIHNtLXJlZ3VsYXJcIj57eyBlcnJvck1lc3NhZ2UgfX08L3NwYW4+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -5142,10 +5142,14 @@ class GravityAvatarStackComponent {
|
|
|
5142
5142
|
constructor() {
|
|
5143
5143
|
this.isCoin = true;
|
|
5144
5144
|
this.selectMultipleItems = false;
|
|
5145
|
+
this.defaultSelected = false;
|
|
5145
5146
|
this.clickOnIcon = new EventEmitter();
|
|
5146
5147
|
this.selectedIndexes = [];
|
|
5147
5148
|
this.selectedItems = [];
|
|
5148
5149
|
}
|
|
5150
|
+
ngAfterViewInit() {
|
|
5151
|
+
this.onClick(0);
|
|
5152
|
+
}
|
|
5149
5153
|
onClick(index) {
|
|
5150
5154
|
const selectedIndex = this.selectedIndexes.indexOf(index);
|
|
5151
5155
|
if (this.selectMultipleItems) {
|
|
@@ -5171,7 +5175,7 @@ class GravityAvatarStackComponent {
|
|
|
5171
5175
|
this.clickOnIcon.emit(this.selectedItems);
|
|
5172
5176
|
}
|
|
5173
5177
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5174
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: { config: "config", isCoin: "isCoin", items: "items", selectMultipleItems: "selectMultipleItems", size: "size", type: "type" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"stack-icon-container\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"icon-wrapper\" [style.z-index]=\"selectedIndexes.includes(i) ? 100 : items.length - i\"\n [class.selected]=\"selectedIndexes.includes(i)\">\n <gravity-icon\n class=\"avatar-icon pointer {{size}}\"\n (click)=\"onClick(i);\" [attr.data-cy]=\"'stack-item-' + item[config.label]\"\n [iconName]=\"type + '-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body sm-regular hover-text\">{{ item[config.label] }}</p>\n </div>\n </ng-container>\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}.stack-icon-container{display:flex;position:relative}.icon-wrapper{position:relative}.icon-wrapper:not(:first-child){margin-left:-4px}.selected .avatar-icon{border:1px solid var(--on-bg-button-active-primary);outline:1px solid var(--bg-button-active-primary);border-radius:6.25rem}.avatar-icon{height:var(--avatar-icon-height);min-height:var(--avatar-icon-height);width:var(--avatar-icon-width);min-width:var(--avatar-icon-width)}.hover-text{background-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-active-primary);display:none;position:absolute;padding:2px;top:calc(100% + 4px);left:50%;transform:translate(-50%);white-space:nowrap;line-height:normal;border-radius:1.105px}.icon-wrapper:hover .hover-text{display:block}@media (max-width: 992px){.icon-wrapper .hover-text{display:none}.icon-wrapper.selected .hover-text{display:block}.icon-wrapper:not(.selected) .hover-text{display:none!important}}.sm{--avatar-icon-height: 24px;--avatar-icon-width: 24px}.md{--avatar-icon-height: 32px;--avatar-icon-width: 32px}.lg{--avatar-icon-height: 46px;--avatar-icon-width: 46px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: { config: "config", isCoin: "isCoin", items: "items", selectMultipleItems: "selectMultipleItems", size: "size", type: "type", defaultSelected: "defaultSelected" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"stack-icon-container\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"icon-wrapper\" [style.z-index]=\"selectedIndexes.includes(i) ? 100 : items.length - i\"\n [class.selected]=\"selectedIndexes.includes(i)\">\n <gravity-icon\n class=\"avatar-icon pointer {{size}}\"\n (click)=\"onClick(i);\" [attr.data-cy]=\"'stack-item-' + item[config.label]\"\n [iconName]=\"type + '-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body sm-regular hover-text\">{{ item[config.label] }}</p>\n </div>\n </ng-container>\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}.stack-icon-container{display:flex;position:relative}.icon-wrapper{position:relative}.icon-wrapper:not(:first-child){margin-left:-4px}.selected .avatar-icon{border:1px solid var(--on-bg-button-active-primary);outline:1px solid var(--bg-button-active-primary);border-radius:6.25rem}.avatar-icon{height:var(--avatar-icon-height);min-height:var(--avatar-icon-height);width:var(--avatar-icon-width);min-width:var(--avatar-icon-width)}.hover-text{background-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-active-primary);display:none;position:absolute;padding:2px;top:calc(100% + 4px);left:50%;transform:translate(-50%);white-space:nowrap;line-height:normal;border-radius:1.105px}.icon-wrapper:hover .hover-text{display:block}@media (max-width: 992px){.icon-wrapper .hover-text{display:none}.icon-wrapper.selected .hover-text{display:block}.icon-wrapper:not(.selected) .hover-text{display:none!important}}.sm{--avatar-icon-height: 24px;--avatar-icon-width: 24px}.md{--avatar-icon-height: 32px;--avatar-icon-width: 32px}.lg{--avatar-icon-height: 46px;--avatar-icon-width: 46px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5175
5179
|
}
|
|
5176
5180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, decorators: [{
|
|
5177
5181
|
type: Component,
|
|
@@ -5188,6 +5192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5188
5192
|
type: Input
|
|
5189
5193
|
}], type: [{
|
|
5190
5194
|
type: Input
|
|
5195
|
+
}], defaultSelected: [{
|
|
5196
|
+
type: Input
|
|
5191
5197
|
}], clickOnIcon: [{
|
|
5192
5198
|
type: Output
|
|
5193
5199
|
}] } });
|
|
@@ -5484,15 +5490,21 @@ class GravityEditableInputComponent {
|
|
|
5484
5490
|
this.size = 'sm';
|
|
5485
5491
|
this.readOnly = false;
|
|
5486
5492
|
this.haveError = false;
|
|
5493
|
+
this.justNumber = false;
|
|
5494
|
+
this.valueChange = new EventEmitter();
|
|
5487
5495
|
}
|
|
5488
5496
|
onKeyUp(inputField) {
|
|
5497
|
+
if (this.justNumber) {
|
|
5498
|
+
inputField.value = inputField.value.replace(/[^0-9]/g, '');
|
|
5499
|
+
}
|
|
5489
5500
|
this.haveError = inputField.value.trim() === '';
|
|
5501
|
+
this.valueChange.emit(inputField.value);
|
|
5490
5502
|
}
|
|
5491
5503
|
focusInput(inputField) {
|
|
5492
5504
|
inputField.focus();
|
|
5493
5505
|
}
|
|
5494
5506
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityEditableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityEditableInputComponent, selector: "gravity-editable-input", inputs: { label: "label", value: "value", placeholder: "placeholder", errorMessage: "errorMessage", size: "size", readOnly: "readOnly", haveError: "haveError" }, ngImport: i0, template: "<div class=\"gravity-editable-input\">\n <div class=\"editable-input-container\" [class.focus]=\"isFocused\" [class.error]=\"haveError\">\n <label *ngIf=\"label\" class=\"hr-label {{size}}-bold\">{{ label }}</label>\n <div class=\"editable-input\" [class.read-only]=\"readOnly\">\n <input #editableInput [placeholder]=\"placeholder\" (focus)=\"isFocused = true\" (blur)=\"isFocused = false\"\n (keyup)=\"onKeyUp(editableInput)\" [disabled]=\"readOnly\" [value]=\"value\">\n <gravity-icon *ngIf=\"!readOnly\" [style.--icon-color]=\"haveError ? 'var(--negative-primary)' :\n isFocused ?'var(--outline-field-full-enabled-typing-primary)' : 'var(--text-primary)'\"\n [iconName]=\"'update'\" [size]=\"size\" (click)=\"focusInput(editableInput)\">\n </gravity-icon>\n </div>\n </div>\n <div class=\"error-message\" *ngIf=\"haveError && errorMessage && !readOnly\">\n <gravity-icon [style.--icon-color]=\"'var(--negative-primary)'\" [iconName]=\"'warning-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n <span class=\"hr-label sm-regular\">{{ errorMessage }}</span>\n </div>\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}.gravity-editable-input{width:100%;min-width:190px;max-width:500px;display:inline-flex;flex-direction:column;align-items:flex-start}.gravity-editable-input .editable-input-container{width:100%}.gravity-editable-input .editable-input-container.focus{border-bottom:1px solid var(--outline-field-full-enabled-typing-primary)}.gravity-editable-input .editable-input-container.error{border-bottom:1px solid var(--negative-primary)!important}.gravity-editable-input label{padding:0 0 var(--gravity-spacing-xs) var(--gravity-spacing-xs)}.gravity-editable-input .editable-input{width:100%;height:28px;display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);border-radius:.3125rem;padding:var(--gravity-spacing-xs)}.gravity-editable-input .editable-input.read-only{pointer-events:none}.gravity-editable-input .editable-input:hover{background:var(--surface-primary)}.gravity-editable-input .editable-input gravity-icon{cursor:pointer}.gravity-editable-input .editable-input input{gap:5px;all:unset;flex:1 0 0;display:flex;align-items:center}.gravity-editable-input .error-message{display:flex;gap:.3125rem;align-items:flex-start;color:var(--negative-primary);padding:var(--spacing-xxs, .25rem) 0 0 var(--spacing-xxs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityEditableInputComponent, selector: "gravity-editable-input", inputs: { label: "label", value: "value", placeholder: "placeholder", errorMessage: "errorMessage", size: "size", readOnly: "readOnly", haveError: "haveError", justNumber: "justNumber" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"gravity-editable-input\">\n <div class=\"editable-input-container\" [class.focus]=\"isFocused\" [class.error]=\"haveError\">\n <label *ngIf=\"label\" class=\"hr-label {{size}}-bold\">{{ label }}</label>\n <div class=\"editable-input\" [class.read-only]=\"readOnly\">\n <input #editableInput [placeholder]=\"placeholder\" (focus)=\"isFocused = true\" (blur)=\"isFocused = false\"\n (keyup)=\"onKeyUp(editableInput)\" [disabled]=\"readOnly\" [value]=\"value\">\n <gravity-icon *ngIf=\"!readOnly\" [style.--icon-color]=\"haveError ? 'var(--negative-primary)' :\n isFocused ?'var(--outline-field-full-enabled-typing-primary)' : 'var(--text-primary)'\"\n [iconName]=\"'update'\" [size]=\"size\" (click)=\"focusInput(editableInput)\">\n </gravity-icon>\n </div>\n </div>\n <div class=\"error-message\" *ngIf=\"haveError && errorMessage && !readOnly\">\n <gravity-icon [style.--icon-color]=\"'var(--negative-primary)'\" [iconName]=\"'warning-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n <span class=\"hr-label sm-regular\">{{ errorMessage }}</span>\n </div>\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}.gravity-editable-input{width:100%;min-width:190px;max-width:500px;display:inline-flex;flex-direction:column;align-items:flex-start}.gravity-editable-input .editable-input-container{width:100%}.gravity-editable-input .editable-input-container.focus{border-bottom:1px solid var(--outline-field-full-enabled-typing-primary)}.gravity-editable-input .editable-input-container.error{border-bottom:1px solid var(--negative-primary)!important}.gravity-editable-input label{padding:0 0 var(--gravity-spacing-xs) var(--gravity-spacing-xs)}.gravity-editable-input .editable-input{width:100%;height:28px;display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);border-radius:.3125rem;padding:var(--gravity-spacing-xs)}.gravity-editable-input .editable-input.read-only{pointer-events:none}.gravity-editable-input .editable-input:hover{background:var(--surface-primary)}.gravity-editable-input .editable-input gravity-icon{cursor:pointer}.gravity-editable-input .editable-input input{gap:5px;all:unset;flex:1 0 0;display:flex;align-items:center}.gravity-editable-input .error-message{display:flex;gap:.3125rem;align-items:flex-start;color:var(--negative-primary);padding:var(--spacing-xxs, .25rem) 0 0 var(--spacing-xxs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5496
5508
|
}
|
|
5497
5509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityEditableInputComponent, decorators: [{
|
|
5498
5510
|
type: Component,
|
|
@@ -5511,6 +5523,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5511
5523
|
type: Input
|
|
5512
5524
|
}], haveError: [{
|
|
5513
5525
|
type: Input
|
|
5526
|
+
}], justNumber: [{
|
|
5527
|
+
type: Input
|
|
5528
|
+
}], valueChange: [{
|
|
5529
|
+
type: Output
|
|
5514
5530
|
}] } });
|
|
5515
5531
|
|
|
5516
5532
|
class GravityCardButtonComponent {
|