@progressio_resources/gravity-design-system 4.1.5 → 4.1.7
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.
|
@@ -4995,8 +4995,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4995
4995
|
class GravitySwitchComponent {
|
|
4996
4996
|
constructor() {
|
|
4997
4997
|
this.size = 'md';
|
|
4998
|
+
this.type = 'default';
|
|
4998
4999
|
this.checked = false;
|
|
4999
5000
|
this.disabled = false;
|
|
5001
|
+
this.labelSize = 'md';
|
|
5000
5002
|
this.response = new EventEmitter();
|
|
5001
5003
|
this.isSwitchActive = false;
|
|
5002
5004
|
}
|
|
@@ -5023,15 +5025,17 @@ class GravitySwitchComponent {
|
|
|
5023
5025
|
}
|
|
5024
5026
|
}
|
|
5025
5027
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravitySwitchComponent, isStandalone: true, selector: "gravity-switch", inputs: { cypressTag: "cypressTag", size: "size", checked: "checked", disabled: "disabled", icons: "icons", labels: "labels" }, outputs: { response: "response" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-switch size-{{size}}\" [class.disabled]=\"disabled\" [attr.data-cy]=\"cypressTag ? 'switch_' + cypressTag : null\">\n @if (labels?.left) {\n <span class=\"hr-body
|
|
5028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravitySwitchComponent, isStandalone: true, selector: "gravity-switch", inputs: { cypressTag: "cypressTag", size: "size", type: "type", checked: "checked", disabled: "disabled", icons: "icons", labels: "labels", labelSize: "labelSize" }, outputs: { response: "response" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-switch size-{{size}} {{type}}\" [class.disabled]=\"disabled\" [attr.data-cy]=\"cypressTag ? 'switch_' + cypressTag : null\">\n @if (labels?.left) {\n <span class=\"hr-body {{labelSize}}-regular\" [class.unselected]=\"isSwitchActive\">{{ labels.left }}</span>\n }\n <div class=\"switch \" [class.disabled]=\"disabled\" (click)=\"toggleSwitch()\">\n <input type=\"checkbox\" [checked]=\"isSwitchActive\">\n <div class=\"slider\">\n <div class=\"icon-container\" [ngClass]=\"disabled ? '' : 'elevation-xs'\">\n @if (icons && (icons.on || icons.off)) {\n <gravity-icon\n [iconSize]=\"getIconSizeClass(size)\"\n [style.--icon-color]=\"'var(--switch-icon-color)'\"\n [iconName]=\"isSwitchActive ? (icons.on ?? icons.off) : (icons.off ?? icons.on)\">\n </gravity-icon>\n }\n </div>\n </div>\n </div>\n @if (labels?.right) {\n <span class=\"hr-body {{labelSize}}-regular\" [class.unselected]=\"!isSwitchActive\">{{ labels.right }}</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-switch{display:flex;align-items:center;color:var(--text-primary);gap:var(--gravity-spacing-xs);--switch-on-color: var(--bg-switch-on-primary)}.gravity-switch>span{transition:color .4s;-webkit-transition:color .4s}.gravity-switch:not(.disabled) .unselected{color:var(--on-bg-disabled)}.gravity-switch .switch{position:relative;width:var(--switch-width);height:var(--switch-height)}.gravity-switch .switch input{width:0;height:0;opacity:0}.gravity-switch .switch .slider{inset:0;cursor:pointer;border:1px solid;position:absolute;border-radius:6.25rem;border-color:var(--bg-switch-off-primary);background-color:var(--bg-switch-off-primary);--switch-icon-color: var(--bg-switch-off-primary);transition:background-color .4s,border-color .4s;-webkit-transition:background-color .4s,border-color .4s}.gravity-switch .switch .slider:hover{border-color:var(--bg-switch-disabled-primary);background-color:var(--bg-switch-disabled-primary)}.gravity-switch .switch .slider .icon-container{display:flex;position:absolute;align-items:center;justify-content:center;width:var(--switch-slider-size);height:var(--switch-slider-size);top:var(--switch-slider-position);left:var(--switch-slider-position);border-radius:6.25rem;background-color:var(--on-bg-switch-off-primary);transition:background-color .4s,transform .4s ease-in-out;-webkit-transition:background-color .4s,transform .4s ease-in-out}.gravity-switch .switch input:checked+.slider .icon-container{transition:transform .4s ease-in-out;--switch-icon-color: var(--switch-on-color);transform:translate(var(--switch-transform))}.gravity-switch .switch.disabled .slider{cursor:initial;border-color:var(--bg-switch-disabled-primary);background-color:var(--on-bg-switch-off-primary);--switch-icon-color: var(--on-bg-switch-off-primary)}.gravity-switch .switch.disabled .slider .icon-container{background-color:var(--bg-switch-disabled-primary)}.gravity-switch .switch:not(.disabled) input:checked+.slider{border-color:var(--switch-on-color);background-color:var(--switch-on-color)}.gravity-switch .switch:not(.disabled) input:checked+.slider .icon-container{background-color:var(--on-bg-switch-on-primary)}.gravity-switch.positive{--switch-on-color: var(--positive-primary)}.gravity-switch.disabled{color:var(--bg-switch-off-primary)}.gravity-switch.size-sm{--switch-width: 34px;--switch-height: 20px;--switch-transform: 14px;--switch-slider-size: 16px;--switch-slider-position: 1px}.gravity-switch.size-md{--switch-width: 56px;--switch-height: 28px;--switch-transform: 28px;--switch-slider-size: 22px;--switch-slider-position: 2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5027
5029
|
}
|
|
5028
5030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravitySwitchComponent, decorators: [{
|
|
5029
5031
|
type: Component,
|
|
5030
|
-
args: [{ selector: 'gravity-switch', standalone: true, imports: [NgClass, GravityIconComponent], template: "<div class=\"gravity-switch size-{{size}}\" [class.disabled]=\"disabled\" [attr.data-cy]=\"cypressTag ? 'switch_' + cypressTag : null\">\n @if (labels?.left) {\n <span class=\"hr-body
|
|
5032
|
+
args: [{ selector: 'gravity-switch', standalone: true, imports: [NgClass, GravityIconComponent], template: "<div class=\"gravity-switch size-{{size}} {{type}}\" [class.disabled]=\"disabled\" [attr.data-cy]=\"cypressTag ? 'switch_' + cypressTag : null\">\n @if (labels?.left) {\n <span class=\"hr-body {{labelSize}}-regular\" [class.unselected]=\"isSwitchActive\">{{ labels.left }}</span>\n }\n <div class=\"switch \" [class.disabled]=\"disabled\" (click)=\"toggleSwitch()\">\n <input type=\"checkbox\" [checked]=\"isSwitchActive\">\n <div class=\"slider\">\n <div class=\"icon-container\" [ngClass]=\"disabled ? '' : 'elevation-xs'\">\n @if (icons && (icons.on || icons.off)) {\n <gravity-icon\n [iconSize]=\"getIconSizeClass(size)\"\n [style.--icon-color]=\"'var(--switch-icon-color)'\"\n [iconName]=\"isSwitchActive ? (icons.on ?? icons.off) : (icons.off ?? icons.on)\">\n </gravity-icon>\n }\n </div>\n </div>\n </div>\n @if (labels?.right) {\n <span class=\"hr-body {{labelSize}}-regular\" [class.unselected]=\"!isSwitchActive\">{{ labels.right }}</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-switch{display:flex;align-items:center;color:var(--text-primary);gap:var(--gravity-spacing-xs);--switch-on-color: var(--bg-switch-on-primary)}.gravity-switch>span{transition:color .4s;-webkit-transition:color .4s}.gravity-switch:not(.disabled) .unselected{color:var(--on-bg-disabled)}.gravity-switch .switch{position:relative;width:var(--switch-width);height:var(--switch-height)}.gravity-switch .switch input{width:0;height:0;opacity:0}.gravity-switch .switch .slider{inset:0;cursor:pointer;border:1px solid;position:absolute;border-radius:6.25rem;border-color:var(--bg-switch-off-primary);background-color:var(--bg-switch-off-primary);--switch-icon-color: var(--bg-switch-off-primary);transition:background-color .4s,border-color .4s;-webkit-transition:background-color .4s,border-color .4s}.gravity-switch .switch .slider:hover{border-color:var(--bg-switch-disabled-primary);background-color:var(--bg-switch-disabled-primary)}.gravity-switch .switch .slider .icon-container{display:flex;position:absolute;align-items:center;justify-content:center;width:var(--switch-slider-size);height:var(--switch-slider-size);top:var(--switch-slider-position);left:var(--switch-slider-position);border-radius:6.25rem;background-color:var(--on-bg-switch-off-primary);transition:background-color .4s,transform .4s ease-in-out;-webkit-transition:background-color .4s,transform .4s ease-in-out}.gravity-switch .switch input:checked+.slider .icon-container{transition:transform .4s ease-in-out;--switch-icon-color: var(--switch-on-color);transform:translate(var(--switch-transform))}.gravity-switch .switch.disabled .slider{cursor:initial;border-color:var(--bg-switch-disabled-primary);background-color:var(--on-bg-switch-off-primary);--switch-icon-color: var(--on-bg-switch-off-primary)}.gravity-switch .switch.disabled .slider .icon-container{background-color:var(--bg-switch-disabled-primary)}.gravity-switch .switch:not(.disabled) input:checked+.slider{border-color:var(--switch-on-color);background-color:var(--switch-on-color)}.gravity-switch .switch:not(.disabled) input:checked+.slider .icon-container{background-color:var(--on-bg-switch-on-primary)}.gravity-switch.positive{--switch-on-color: var(--positive-primary)}.gravity-switch.disabled{color:var(--bg-switch-off-primary)}.gravity-switch.size-sm{--switch-width: 34px;--switch-height: 20px;--switch-transform: 14px;--switch-slider-size: 16px;--switch-slider-position: 1px}.gravity-switch.size-md{--switch-width: 56px;--switch-height: 28px;--switch-transform: 28px;--switch-slider-size: 22px;--switch-slider-position: 2px}\n"] }]
|
|
5031
5033
|
}], propDecorators: { cypressTag: [{
|
|
5032
5034
|
type: Input
|
|
5033
5035
|
}], size: [{
|
|
5034
5036
|
type: Input
|
|
5037
|
+
}], type: [{
|
|
5038
|
+
type: Input
|
|
5035
5039
|
}], checked: [{
|
|
5036
5040
|
type: Input
|
|
5037
5041
|
}], disabled: [{
|
|
@@ -5040,6 +5044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5040
5044
|
type: Input
|
|
5041
5045
|
}], labels: [{
|
|
5042
5046
|
type: Input
|
|
5047
|
+
}], labelSize: [{
|
|
5048
|
+
type: Input
|
|
5043
5049
|
}], response: [{
|
|
5044
5050
|
type: Output
|
|
5045
5051
|
}] } });
|
|
@@ -6163,11 +6169,17 @@ class GravityAvatarStackComponent {
|
|
|
6163
6169
|
this.stepThreshold = 30;
|
|
6164
6170
|
this.touchStartIndex = 0;
|
|
6165
6171
|
this.isTouchActive = false;
|
|
6172
|
+
this.emitDebounceTimer = null;
|
|
6173
|
+
}
|
|
6174
|
+
ngOnDestroy() {
|
|
6175
|
+
if (this.emitDebounceTimer) {
|
|
6176
|
+
clearTimeout(this.emitDebounceTimer);
|
|
6177
|
+
}
|
|
6166
6178
|
}
|
|
6167
6179
|
onItemClick(index) {
|
|
6168
6180
|
if (this.isDragging)
|
|
6169
6181
|
return;
|
|
6170
|
-
this.selectItem(index);
|
|
6182
|
+
this.selectItem(index, true);
|
|
6171
6183
|
}
|
|
6172
6184
|
get isCarousel() {
|
|
6173
6185
|
return this.size === 'xl';
|
|
@@ -6215,7 +6227,7 @@ class GravityAvatarStackComponent {
|
|
|
6215
6227
|
getItemLabel(item) {
|
|
6216
6228
|
return this.config?.label && item?.[this.config.label] ? item[this.config.label] : '';
|
|
6217
6229
|
}
|
|
6218
|
-
selectItem(index) {
|
|
6230
|
+
selectItem(index, immediateEmit = false) {
|
|
6219
6231
|
if (!this.items?.length || this.selectionMode === 'none')
|
|
6220
6232
|
return;
|
|
6221
6233
|
if (this.selectionMode === 'multiple' && !this.isCarousel) {
|
|
@@ -6228,7 +6240,22 @@ class GravityAvatarStackComponent {
|
|
|
6228
6240
|
this.selectedIndex = index;
|
|
6229
6241
|
this.selectedIndexes = [index];
|
|
6230
6242
|
}
|
|
6231
|
-
this.
|
|
6243
|
+
this.emitSelectedItems(immediateEmit);
|
|
6244
|
+
}
|
|
6245
|
+
emitSelectedItems(immediateEmit = false) {
|
|
6246
|
+
if (this.emitDebounceTimer) {
|
|
6247
|
+
clearTimeout(this.emitDebounceTimer);
|
|
6248
|
+
this.emitDebounceTimer = null;
|
|
6249
|
+
}
|
|
6250
|
+
if (immediateEmit || !this.isCarousel) {
|
|
6251
|
+
this.clickOnIcon.emit(this.selectedItems);
|
|
6252
|
+
}
|
|
6253
|
+
else {
|
|
6254
|
+
this.emitDebounceTimer = setTimeout(() => {
|
|
6255
|
+
this.clickOnIcon.emit(this.selectedItems);
|
|
6256
|
+
this.emitDebounceTimer = null;
|
|
6257
|
+
}, 1000);
|
|
6258
|
+
}
|
|
6232
6259
|
}
|
|
6233
6260
|
selectNext() {
|
|
6234
6261
|
if (this.items?.length)
|