@progressio_resources/gravity-design-system 3.0.3 → 3.0.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.
- package/esm2022/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.mjs +26 -11
- package/fesm2022/progressio_resources-gravity-design-system.mjs +25 -10
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.d.ts +5 -4
- package/package.json +1 -1
|
@@ -5,37 +5,52 @@ import * as i2 from "../gravity-icon/gravity-icon.component";
|
|
|
5
5
|
export class GravityAvatarStackComponent {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.isCoin = true;
|
|
8
|
+
this.selectMultipleItems = false;
|
|
8
9
|
this.clickOnIcon = new EventEmitter();
|
|
9
10
|
this.selectedIndexes = [];
|
|
10
11
|
this.selectedItems = [];
|
|
11
12
|
}
|
|
12
13
|
onClick(index) {
|
|
13
14
|
const selectedIndex = this.selectedIndexes.indexOf(index);
|
|
14
|
-
if (
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
if (this.selectMultipleItems) {
|
|
16
|
+
if (selectedIndex !== -1) {
|
|
17
|
+
this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
|
|
18
|
+
this.selectedItems = this.selectedItems.filter(item => item !== this.items[index]);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
this.selectedIndexes.push(index);
|
|
22
|
+
this.selectedItems.push(this.items[index]);
|
|
23
|
+
}
|
|
17
24
|
}
|
|
18
25
|
else {
|
|
19
|
-
|
|
20
|
-
|
|
26
|
+
if (selectedIndex === -1) {
|
|
27
|
+
this.selectedIndexes = [index];
|
|
28
|
+
this.selectedItems = [this.items[index]];
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this.selectedIndexes = [];
|
|
32
|
+
this.selectedItems = [];
|
|
33
|
+
}
|
|
21
34
|
}
|
|
22
35
|
this.clickOnIcon.emit(this.selectedItems);
|
|
23
36
|
}
|
|
24
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: {
|
|
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" }, 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]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }] }); }
|
|
26
39
|
}
|
|
27
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, decorators: [{
|
|
28
41
|
type: Component,
|
|
29
|
-
args: [{ selector: 'gravity-avatar-stack', 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);\"\n [iconName]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }]
|
|
30
|
-
}], propDecorators: {
|
|
42
|
+
args: [{ selector: 'gravity-avatar-stack', 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]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }]
|
|
43
|
+
}], propDecorators: { config: [{
|
|
31
44
|
type: Input
|
|
32
45
|
}], isCoin: [{
|
|
33
46
|
type: Input
|
|
34
|
-
}],
|
|
47
|
+
}], items: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], selectMultipleItems: [{
|
|
35
50
|
type: Input
|
|
36
|
-
}],
|
|
51
|
+
}], size: [{
|
|
37
52
|
type: Input
|
|
38
53
|
}], clickOnIcon: [{
|
|
39
54
|
type: Output
|
|
40
55
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1hdmF0YXItc3RhY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3Jhdml0eS1kZXNpZ24tc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9ncmF2aXR5LWF2YXRhci1zdGFjay9ncmF2aXR5LWF2YXRhci1zdGFjay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktYXZhdGFyLXN0YWNrL2dyYXZpdHktYXZhdGFyLXN0YWNrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7QUFPckUsTUFBTSxPQUFPLDJCQUEyQjtJQUx4QztRQU9rQixXQUFNLEdBQVksSUFBSSxDQUFDO1FBRXZCLHdCQUFtQixHQUFZLEtBQUssQ0FBQztRQUdwQyxnQkFBVyxHQUF3QixJQUFJLFlBQVksRUFBTyxDQUFDO1FBRXJFLG9CQUFlLEdBQWEsRUFBRSxDQUFDO1FBQy9CLGtCQUFhLEdBQWUsRUFBRSxDQUFDO0tBd0J2QztJQXRCUSxPQUFPLENBQUMsS0FBYTtRQUMxQixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUxRCxJQUFJLElBQUksQ0FBQyxtQkFBbUIsRUFBRTtZQUM1QixJQUFJLGFBQWEsS0FBSyxDQUFDLENBQUMsRUFBRTtnQkFDeEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQztnQkFDckUsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7YUFDcEY7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzthQUM1QztTQUNGO2FBQU07WUFDTCxJQUFJLGFBQWEsS0FBSyxDQUFDLENBQUMsRUFBRTtnQkFDeEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUMvQixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2FBQzFDO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxlQUFlLEdBQUcsRUFBRSxDQUFDO2dCQUMxQixJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQzthQUN6QjtTQUNGO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzVDLENBQUM7K0dBakNVLDJCQUEyQjttR0FBM0IsMkJBQTJCLCtOQ1B4Qyw0cUJBYU07OzRGRE5PLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDRSxzQkFBc0I7OEJBS2hCLE1BQU07c0JBQXJCLEtBQUs7Z0JBQ1UsTUFBTTtzQkFBckIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUVXLFdBQVc7c0JBQTNCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhdml0eS1hdmF0YXItc3RhY2snLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3Jhdml0eS1hdmF0YXItc3RhY2suY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWF2YXRhci1zdGFjay5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEdyYXZpdHlBdmF0YXJTdGFja0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHB1YmxpYyBjb25maWc6IHsgaWNvbjogc3RyaW5nLCBsYWJlbDogc3RyaW5nIH07XG4gIEBJbnB1dCgpIHB1YmxpYyBpc0NvaW46IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBwdWJsaWMgaXRlbXM6IEFycmF5PGFueT47XG4gIEBJbnB1dCgpIHB1YmxpYyBzZWxlY3RNdWx0aXBsZUl0ZW1zOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnbGcnIHwgJ21kJyB8ICdzbSc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGlja09uSWNvbjogRXZlbnRFbWl0dGVyPGFueVtdPiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIHB1YmxpYyBzZWxlY3RlZEluZGV4ZXM6IG51bWJlcltdID0gW107XG4gIHB1YmxpYyBzZWxlY3RlZEl0ZW1zOiBBcnJheTxhbnk+ID0gW107XG5cbiAgcHVibGljIG9uQ2xpY2soaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGNvbnN0IHNlbGVjdGVkSW5kZXggPSB0aGlzLnNlbGVjdGVkSW5kZXhlcy5pbmRleE9mKGluZGV4KTtcblxuICAgIGlmICh0aGlzLnNlbGVjdE11bHRpcGxlSXRlbXMpIHtcbiAgICAgIGlmIChzZWxlY3RlZEluZGV4ICE9PSAtMSkge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IHRoaXMuc2VsZWN0ZWRJbmRleGVzLmZpbHRlcihpID0+IGkgIT09IGluZGV4KTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmZpbHRlcihpdGVtID0+IGl0ZW0gIT09IHRoaXMuaXRlbXNbaW5kZXhdKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleGVzLnB1c2goaW5kZXgpO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMucHVzaCh0aGlzLml0ZW1zW2luZGV4XSk7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGlmIChzZWxlY3RlZEluZGV4ID09PSAtMSkge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IFtpbmRleF07XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtcyA9IFt0aGlzLml0ZW1zW2luZGV4XV07XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSW5kZXhlcyA9IFtdO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMgPSBbXTtcbiAgICAgIH1cbiAgICB9XG4gICAgdGhpcy5jbGlja09uSWNvbi5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gIH1cbn0iLCI8ZGl2IGNsYXNzPVwic3RhY2staWNvbi1jb250YWluZXJcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJpY29uLXdyYXBwZXJcIiBbc3R5bGUuei1pbmRleF09XCJzZWxlY3RlZEluZGV4ZXMuaW5jbHVkZXMoaSkgPyAxMDAgOiBpdGVtcy5sZW5ndGggLSBpXCJcbiAgICAgICAgIFtjbGFzcy5zZWxlY3RlZF09XCJzZWxlY3RlZEluZGV4ZXMuaW5jbHVkZXMoaSlcIj5cbiAgICAgIDxncmF2aXR5LWljb25cbiAgICAgICAgICBjbGFzcz1cImF2YXRhci1pY29uIHBvaW50ZXIge3tzaXplfX1cIlxuICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrKGkpO1wiIFthdHRyLmRhdGEtY3ldPVwiJ3N0YWNrLWl0ZW0tJyArIGl0ZW1bY29uZmlnLmxhYmVsXVwiXG4gICAgICAgICAgW2ljb25OYW1lXT1cIidjb2luLWlkLScgKyBpdGVtW2NvbmZpZy5pY29uXVwiXG4gICAgICAgICAgW2lzQ29pbl09XCJpc0NvaW5cIj5cbiAgICAgIDwvZ3Jhdml0eS1pY29uPlxuICAgICAgPHAgKm5nSWY9XCJjb25maWcubGFiZWxcIiBjbGFzcz1cImhyLWJvZHktdGV4dCBzbS1yZWd1bGFyIGhvdmVyLXRleHRcIj57eyBpdGVtW2NvbmZpZy5sYWJlbF0gfX08L3A+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+Il19
|
|
@@ -4859,35 +4859,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4859
4859
|
class GravityAvatarStackComponent {
|
|
4860
4860
|
constructor() {
|
|
4861
4861
|
this.isCoin = true;
|
|
4862
|
+
this.selectMultipleItems = false;
|
|
4862
4863
|
this.clickOnIcon = new EventEmitter();
|
|
4863
4864
|
this.selectedIndexes = [];
|
|
4864
4865
|
this.selectedItems = [];
|
|
4865
4866
|
}
|
|
4866
4867
|
onClick(index) {
|
|
4867
4868
|
const selectedIndex = this.selectedIndexes.indexOf(index);
|
|
4868
|
-
if (
|
|
4869
|
-
|
|
4870
|
-
|
|
4869
|
+
if (this.selectMultipleItems) {
|
|
4870
|
+
if (selectedIndex !== -1) {
|
|
4871
|
+
this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
|
|
4872
|
+
this.selectedItems = this.selectedItems.filter(item => item !== this.items[index]);
|
|
4873
|
+
}
|
|
4874
|
+
else {
|
|
4875
|
+
this.selectedIndexes.push(index);
|
|
4876
|
+
this.selectedItems.push(this.items[index]);
|
|
4877
|
+
}
|
|
4871
4878
|
}
|
|
4872
4879
|
else {
|
|
4873
|
-
|
|
4874
|
-
|
|
4880
|
+
if (selectedIndex === -1) {
|
|
4881
|
+
this.selectedIndexes = [index];
|
|
4882
|
+
this.selectedItems = [this.items[index]];
|
|
4883
|
+
}
|
|
4884
|
+
else {
|
|
4885
|
+
this.selectedIndexes = [];
|
|
4886
|
+
this.selectedItems = [];
|
|
4887
|
+
}
|
|
4875
4888
|
}
|
|
4876
4889
|
this.clickOnIcon.emit(this.selectedItems);
|
|
4877
4890
|
}
|
|
4878
4891
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAvatarStackComponent, selector: "gravity-avatar-stack", inputs: {
|
|
4892
|
+
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" }, 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]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }] }); }
|
|
4880
4893
|
}
|
|
4881
4894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAvatarStackComponent, decorators: [{
|
|
4882
4895
|
type: Component,
|
|
4883
|
-
args: [{ selector: 'gravity-avatar-stack', 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);\"\n [iconName]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }]
|
|
4884
|
-
}], propDecorators: {
|
|
4896
|
+
args: [{ selector: 'gravity-avatar-stack', 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]=\"'coin-id-' + item[config.icon]\"\n [isCoin]=\"isCoin\">\n </gravity-icon>\n <p *ngIf=\"config.label\" class=\"hr-body-text 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{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"] }]
|
|
4897
|
+
}], propDecorators: { config: [{
|
|
4885
4898
|
type: Input
|
|
4886
4899
|
}], isCoin: [{
|
|
4887
4900
|
type: Input
|
|
4888
|
-
}],
|
|
4901
|
+
}], items: [{
|
|
4889
4902
|
type: Input
|
|
4890
|
-
}],
|
|
4903
|
+
}], selectMultipleItems: [{
|
|
4904
|
+
type: Input
|
|
4905
|
+
}], size: [{
|
|
4891
4906
|
type: Input
|
|
4892
4907
|
}], clickOnIcon: [{
|
|
4893
4908
|
type: Output
|