@progressio_resources/gravity-design-system 3.6.1 → 3.6.2
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-calendar-next/components/day-calendar/day-calendar.component.mjs +56 -14
- package/esm2022/lib/components/gravity-calendar-next/components/day-calendar/range-days-calendar.utils.mjs +122 -37
- package/esm2022/lib/components/gravity-calendar-next/components/dual-month-calendar/dual-month-calendar.component.mjs +6 -6
- package/esm2022/lib/components/gravity-calendar-next/shared/calendar.constants.mjs +9 -3
- package/esm2022/lib/components/gravity-calendar-next/shared/calendar.modal.mjs +1 -1
- package/esm2022/lib/components/gravity-calendar-next/shared/calendar.utils.mjs +7 -1
- package/esm2022/lib/components/gravity-link/gravity-link.component.mjs +2 -2
- package/esm2022/lib/components/gravity-text-field/gravity-text-field.component.mjs +60 -4
- package/esm2022/lib/layout/gravity-menu/gravity-menu.component.mjs +4 -5
- package/fesm2022/progressio_resources-gravity-design-system.mjs +249 -56
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-calendar-next/components/day-calendar/day-calendar.component.d.ts +17 -2
- package/lib/components/gravity-calendar-next/components/day-calendar/range-days-calendar.utils.d.ts +2 -1
- package/lib/components/gravity-calendar-next/components/dual-month-calendar/dual-month-calendar.component.d.ts +11 -3
- package/lib/components/gravity-calendar-next/components/month-calendar/month-calendar.component.d.ts +8 -0
- package/lib/components/gravity-calendar-next/components/year-calendar/year-calendar.component.d.ts +8 -0
- package/lib/components/gravity-calendar-next/shared/calendar.constants.d.ts +8 -0
- package/lib/components/gravity-calendar-next/shared/calendar.modal.d.ts +1 -1
- package/lib/components/gravity-calendar-next/shared/calendar.utils.d.ts +1 -0
- package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +2 -1
- package/lib/layout/gravity-menu/gravity-menu.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -348,11 +348,11 @@ class GravityLinkComponent {
|
|
|
348
348
|
this.state = 'active';
|
|
349
349
|
}
|
|
350
350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityLinkComponent, selector: "gravity-link", inputs: { linkText: "linkText", fontClass: "fontClass", link: "link", cypressTag: "cypressTag", iconName: "iconName", target: "target", iconPosition: "iconPosition", iconSize: "iconSize", state: "state" }, ngImport: i0, template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n <a *ngIf=\"!link || !(link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [routerLink]=\"!link || state === 'disabled' ? null : link\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\"> \n {{linkText}}\n </a>\n\n <a *ngIf=\"link && (link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\">\n {{linkText}}\n </a>\n\n <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n </gravity-icon>\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-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{cursor:
|
|
351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityLinkComponent, selector: "gravity-link", inputs: { linkText: "linkText", fontClass: "fontClass", link: "link", cypressTag: "cypressTag", iconName: "iconName", target: "target", iconPosition: "iconPosition", iconSize: "iconSize", state: "state" }, ngImport: i0, template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n <a *ngIf=\"!link || !(link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [routerLink]=\"!link || state === 'disabled' ? null : link\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\"> \n {{linkText}}\n </a>\n\n <a *ngIf=\"link && (link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\">\n {{linkText}}\n </a>\n\n <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n </gravity-icon>\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-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{cursor:default;pointer-events:none;--link-text-color: var(--link-disabled-primary)}.gravity-link-container.disabled a{cursor:default;pointer-events:none}.gravity-link-container:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a{border:none;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
352
352
|
}
|
|
353
353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, decorators: [{
|
|
354
354
|
type: Component,
|
|
355
|
-
args: [{ selector: 'gravity-link', template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n <a *ngIf=\"!link || !(link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [routerLink]=\"!link || state === 'disabled' ? null : link\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\"> \n {{linkText}}\n </a>\n\n <a *ngIf=\"link && (link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\">\n {{linkText}}\n </a>\n\n <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n </gravity-icon>\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-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{cursor:
|
|
355
|
+
args: [{ selector: 'gravity-link', template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n <a *ngIf=\"!link || !(link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [routerLink]=\"!link || state === 'disabled' ? null : link\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\"> \n {{linkText}}\n </a>\n\n <a *ngIf=\"link && (link.startsWith('http') || link.startsWith('https'))\"\n [attr.data-cy]=\"cypressTag\" [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n class=\"{{ fontClass ? (fontClass !== '' ? fontClass : 'hr-body sm-regular') : 'hr-body sm-regular' }}\">\n {{linkText}}\n </a>\n\n <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n </gravity-icon>\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-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{cursor:default;pointer-events:none;--link-text-color: var(--link-disabled-primary)}.gravity-link-container.disabled a{cursor:default;pointer-events:none}.gravity-link-container:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a{border:none;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem}\n"] }]
|
|
356
356
|
}], propDecorators: { linkText: [{
|
|
357
357
|
type: Input
|
|
358
358
|
}], fontClass: [{
|
|
@@ -1226,13 +1226,69 @@ class GravityTextFieldComponent {
|
|
|
1226
1226
|
$event.preventDefault();
|
|
1227
1227
|
}
|
|
1228
1228
|
}
|
|
1229
|
+
if (this.inputContentType == 'date') {
|
|
1230
|
+
const allowedKeys = [
|
|
1231
|
+
'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
|
|
1232
|
+
'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'
|
|
1233
|
+
];
|
|
1234
|
+
if (allowedKeys.includes($event.key) || $event.metaKey || $event.ctrlKey) {
|
|
1235
|
+
return;
|
|
1236
|
+
}
|
|
1237
|
+
if (/\D/.test($event.key) && $event.key !== '/') {
|
|
1238
|
+
$event.preventDefault();
|
|
1239
|
+
}
|
|
1240
|
+
}
|
|
1241
|
+
}
|
|
1242
|
+
formatDateInput(event) {
|
|
1243
|
+
const el = event.target;
|
|
1244
|
+
let value = el.value;
|
|
1245
|
+
let formatted = '';
|
|
1246
|
+
let cursorPosition = el.selectionStart || 0;
|
|
1247
|
+
const isDeleting = event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward';
|
|
1248
|
+
if ((value.length === 3 && value[2] === '/') ||
|
|
1249
|
+
(value.length === 6 && value[5] === '/')) {
|
|
1250
|
+
formatted = value;
|
|
1251
|
+
}
|
|
1252
|
+
else if (/\D/.test(value[value.length - 1])) {
|
|
1253
|
+
formatted = value.slice(0, -1);
|
|
1254
|
+
cursorPosition = Math.max(0, cursorPosition - 1);
|
|
1255
|
+
}
|
|
1256
|
+
else {
|
|
1257
|
+
const numbers = value.replace(/\//g, '');
|
|
1258
|
+
let day = numbers.slice(0, 2);
|
|
1259
|
+
let month = numbers.slice(2, 4);
|
|
1260
|
+
let year = numbers.slice(4, 8);
|
|
1261
|
+
if (day && Number(day) > 31)
|
|
1262
|
+
day = '31';
|
|
1263
|
+
if (month && Number(month) > 12)
|
|
1264
|
+
month = '12';
|
|
1265
|
+
if (day.length > 0)
|
|
1266
|
+
formatted += day;
|
|
1267
|
+
if (day.length === 2 && month.length > 0)
|
|
1268
|
+
formatted += '/';
|
|
1269
|
+
if (month.length > 0)
|
|
1270
|
+
formatted += month;
|
|
1271
|
+
if (month.length === 2 && year.length > 0)
|
|
1272
|
+
formatted += '/';
|
|
1273
|
+
if (year.length > 0)
|
|
1274
|
+
formatted += year;
|
|
1275
|
+
const currentLength = value.length;
|
|
1276
|
+
const newLength = formatted.length;
|
|
1277
|
+
if (newLength > currentLength && !isDeleting) {
|
|
1278
|
+
cursorPosition++;
|
|
1279
|
+
}
|
|
1280
|
+
}
|
|
1281
|
+
el.value = formatted;
|
|
1282
|
+
this.inputValue = formatted;
|
|
1283
|
+
el.setSelectionRange(cursorPosition, cursorPosition);
|
|
1284
|
+
this.changeInputValue();
|
|
1229
1285
|
}
|
|
1230
1286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1231
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconColor: "iconColor", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n <ng-container *ngIf=\"iconLeft\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n </ng-container>\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType != 'number' ? inputContentType : 'text'\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconRight\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
1287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconColor: "iconColor", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n <ng-container *ngIf=\"iconLeft\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n </ng-container>\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ? formatDateInput($event) : changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n\n\t\t\t\t #inputElement\n *ngIf=\"textFieldType == 'input'\">\n\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconRight\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
1232
1288
|
}
|
|
1233
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
1234
1290
|
type: Component,
|
|
1235
|
-
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n <ng-container *ngIf=\"iconLeft\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n </ng-container>\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType != 'number' ? inputContentType : 'text'\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconRight\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
|
|
1291
|
+
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n <ng-container *ngIf=\"iconLeft\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n </ng-container>\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ? formatDateInput($event) : changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n\n\t\t\t\t #inputElement\n *ngIf=\"textFieldType == 'input'\">\n\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconRight\">\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
|
|
1236
1292
|
}], propDecorators: { leftIconResponse: [{
|
|
1237
1293
|
type: Output,
|
|
1238
1294
|
args: ['clickIconLeft']
|
|
@@ -6283,6 +6339,12 @@ function toCalendarDay(date) {
|
|
|
6283
6339
|
return { inCurrentMonth: true, isToday: false, day: date.getDate(),
|
|
6284
6340
|
monthYear: { month: date.getMonth(), year: date.getFullYear() }, weekDay: date.getDay() };
|
|
6285
6341
|
}
|
|
6342
|
+
function dateToString(date) {
|
|
6343
|
+
const day = date.getDate().toString().padStart(2, '0'); // día con 2 dígitos
|
|
6344
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // mes con 2 dígitos (JS: 0-11)
|
|
6345
|
+
const year = date.getFullYear().toString(); // año completo
|
|
6346
|
+
return `${day}/${month}/${year}`;
|
|
6347
|
+
}
|
|
6286
6348
|
|
|
6287
6349
|
const DAYS_EN = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
6288
6350
|
const DAYS_ES = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
|
|
@@ -6301,19 +6363,36 @@ const MONTHS_SHORT_EN = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
|
6301
6363
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
6302
6364
|
];
|
|
6303
6365
|
const CALENDAR_I18N = {
|
|
6304
|
-
en: { apply: 'Apply', clear: 'Clear selection', start_date: 'Start date', end_date: 'End date'
|
|
6305
|
-
|
|
6366
|
+
en: { apply: 'Apply', clear: 'Clear selection', start_date: 'Start date', end_date: 'End date',
|
|
6367
|
+
select_range: 'Select a date range', select_date: 'Select a date',
|
|
6368
|
+
preview_month: 'Preview month', next_month: 'Next month'
|
|
6369
|
+
},
|
|
6370
|
+
es: { apply: 'Aplicar', clear: 'Limpiar selección', start_date: 'Fecha inicial', end_date: 'Fecha final',
|
|
6371
|
+
select_range: 'Selecciona un rango de fechas', select_date: 'Selecciona una fecha',
|
|
6372
|
+
preview_month: 'Mes anterior', next_month: 'Mes siguiente'
|
|
6373
|
+
}
|
|
6306
6374
|
};
|
|
6307
6375
|
|
|
6308
6376
|
function isPreview(component, day) {
|
|
6309
|
-
if (!component.selectedRangeStart || component.selectedRangeEnd || !component.hoveredDay)
|
|
6310
|
-
return false;
|
|
6311
6377
|
const current = toDate(day);
|
|
6312
|
-
|
|
6313
|
-
|
|
6314
|
-
|
|
6315
|
-
|
|
6316
|
-
|
|
6378
|
+
// Caso 1: solo start seleccionado → hover hacia adelante
|
|
6379
|
+
if (component.selectedRangeStart && !component.selectedRangeEnd && component.hoveredDay) {
|
|
6380
|
+
const start = toDate(component.selectedRangeStart);
|
|
6381
|
+
const hover = toDate(component.hoveredDay);
|
|
6382
|
+
if (hover <= start)
|
|
6383
|
+
return false;
|
|
6384
|
+
return current > start && current <= hover;
|
|
6385
|
+
}
|
|
6386
|
+
// Caso 2: solo end seleccionado → hover hacia atrás
|
|
6387
|
+
if (!component.selectedRangeStart && component.selectedRangeEnd && component.hoveredDay) {
|
|
6388
|
+
const end = toDate(component.selectedRangeEnd);
|
|
6389
|
+
const hover = toDate(component.hoveredDay);
|
|
6390
|
+
if (hover >= end)
|
|
6391
|
+
return false;
|
|
6392
|
+
return current < end && current >= hover;
|
|
6393
|
+
}
|
|
6394
|
+
// Cualquier otro caso → no preview
|
|
6395
|
+
return false;
|
|
6317
6396
|
}
|
|
6318
6397
|
function processPreselectedRangeDate(component) {
|
|
6319
6398
|
const [start, end] = component.config.initDate;
|
|
@@ -6329,38 +6408,87 @@ function processPreselectedRangeDate(component) {
|
|
|
6329
6408
|
}
|
|
6330
6409
|
}
|
|
6331
6410
|
function getRangeSelectionClass(component, day) {
|
|
6332
|
-
if (!component.selectedRangeStart)
|
|
6333
|
-
return 'nsl-start';
|
|
6334
6411
|
const current = toDate(day);
|
|
6335
|
-
const start = toDate(component.selectedRangeStart);
|
|
6336
|
-
|
|
6412
|
+
const start = component.selectedRangeStart ? toDate(component.selectedRangeStart) : null;
|
|
6413
|
+
const end = component.selectedRangeEnd ? toDate(component.selectedRangeEnd) : null;
|
|
6414
|
+
if (!start && !end)
|
|
6415
|
+
return 'nsl-start';
|
|
6416
|
+
if (start && !end) {
|
|
6337
6417
|
if (current.getTime() === start.getTime())
|
|
6338
6418
|
return 'sl start';
|
|
6339
|
-
|
|
6340
|
-
|
|
6341
|
-
|
|
6342
|
-
|
|
6419
|
+
return 'in-slt nsl-end';
|
|
6420
|
+
}
|
|
6421
|
+
if (!start && end) {
|
|
6422
|
+
if (current.getTime() === end.getTime())
|
|
6423
|
+
return 'sl end';
|
|
6424
|
+
if (current > end)
|
|
6425
|
+
return 'sl';
|
|
6426
|
+
if (current < end)
|
|
6427
|
+
return 'in-slt nsl-start';
|
|
6428
|
+
}
|
|
6429
|
+
if (start && end) {
|
|
6430
|
+
if (current.getTime() === start.getTime() &&
|
|
6431
|
+
start.getTime() === end.getTime())
|
|
6432
|
+
return 'start sl same-sln';
|
|
6433
|
+
if (current.getTime() === start.getTime())
|
|
6434
|
+
return 'sl start';
|
|
6435
|
+
if (current.getTime() === end.getTime())
|
|
6436
|
+
return 'sl end';
|
|
6437
|
+
if (current > start && current < end)
|
|
6438
|
+
return 'sl range';
|
|
6439
|
+
return 'all-sld';
|
|
6440
|
+
}
|
|
6441
|
+
}
|
|
6442
|
+
function onSelectDaysRange(component, day) {
|
|
6443
|
+
const selected = toDate(day);
|
|
6444
|
+
const startDate = component.selectedRangeStart ? toDate(component.selectedRangeStart) : null;
|
|
6445
|
+
const endDate = component.selectedRangeEnd ? toDate(component.selectedRangeEnd) : null;
|
|
6446
|
+
// No hay fechas → establecer start
|
|
6447
|
+
if (!startDate && !endDate) {
|
|
6448
|
+
component.selectedRangeStart = day;
|
|
6449
|
+
component.startDateField.inputValue = dateToString(selected);
|
|
6450
|
+
return;
|
|
6451
|
+
}
|
|
6452
|
+
// Solo start → asignar end si es posterior, o intercambiar
|
|
6453
|
+
if (startDate && !endDate) {
|
|
6454
|
+
if (selected >= startDate) {
|
|
6455
|
+
component.selectedRangeEnd = day;
|
|
6456
|
+
component.endDateField.inputValue = dateToString(selected);
|
|
6457
|
+
}
|
|
6458
|
+
else {
|
|
6459
|
+
component.selectedRangeEnd = component.selectedRangeStart;
|
|
6460
|
+
component.endDateField.inputValue = dateToString(startDate);
|
|
6461
|
+
component.selectedRangeStart = day;
|
|
6462
|
+
component.startDateField.inputValue = dateToString(selected);
|
|
6343
6463
|
}
|
|
6344
|
-
return
|
|
6464
|
+
return;
|
|
6345
6465
|
}
|
|
6346
|
-
|
|
6347
|
-
if (
|
|
6348
|
-
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6466
|
+
// Solo end seleccionado
|
|
6467
|
+
if (!startDate && endDate) {
|
|
6468
|
+
if (selected < endDate) {
|
|
6469
|
+
// Fecha anterior al end → asignar start
|
|
6470
|
+
component.selectedRangeStart = day;
|
|
6471
|
+
component.startDateField.inputValue = dateToString(selected);
|
|
6472
|
+
}
|
|
6473
|
+
else {
|
|
6474
|
+
// Fecha igual o posterior al end → actualizar end
|
|
6475
|
+
component.selectedRangeEnd = day;
|
|
6476
|
+
component.endDateField.inputValue = dateToString(selected);
|
|
6477
|
+
}
|
|
6478
|
+
return;
|
|
6359
6479
|
}
|
|
6360
|
-
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
|
|
6480
|
+
// Start y end ya seleccionados
|
|
6481
|
+
if (startDate && endDate) {
|
|
6482
|
+
if (selected < startDate) {
|
|
6483
|
+
// Fecha anterior al start → actualizar start
|
|
6484
|
+
component.selectedRangeStart = day;
|
|
6485
|
+
component.startDateField.inputValue = dateToString(selected);
|
|
6486
|
+
}
|
|
6487
|
+
else {
|
|
6488
|
+
// Cualquier otra fecha → actualizar end
|
|
6489
|
+
component.selectedRangeEnd = day;
|
|
6490
|
+
component.endDateField.inputValue = dateToString(selected);
|
|
6491
|
+
}
|
|
6364
6492
|
}
|
|
6365
6493
|
}
|
|
6366
6494
|
function onApplyRageDate(component) {
|
|
@@ -6369,13 +6497,38 @@ function onApplyRageDate(component) {
|
|
|
6369
6497
|
component.calendarResponse.emit([start, end]);
|
|
6370
6498
|
}
|
|
6371
6499
|
function onHoverDay(component, day) {
|
|
6372
|
-
|
|
6373
|
-
|
|
6374
|
-
|
|
6500
|
+
const startSelected = !!component.selectedRangeStart && !component.selectedRangeEnd;
|
|
6501
|
+
const endSelected = !!component.selectedRangeEnd && !component.selectedRangeStart;
|
|
6502
|
+
if (startSelected || endSelected) {
|
|
6503
|
+
component.hoveredDay = day;
|
|
6504
|
+
}
|
|
6375
6505
|
}
|
|
6376
6506
|
function onClearHover(component) {
|
|
6377
6507
|
component.hoveredDay = null;
|
|
6378
6508
|
}
|
|
6509
|
+
function stringToDate(value) {
|
|
6510
|
+
if (!value)
|
|
6511
|
+
return null;
|
|
6512
|
+
const parts = value.split('/');
|
|
6513
|
+
if (parts.length !== 3)
|
|
6514
|
+
return null;
|
|
6515
|
+
const day = parseInt(parts[0], 10);
|
|
6516
|
+
const year = parseInt(parts[2], 10);
|
|
6517
|
+
const month = parseInt(parts[1], 10) - 1;
|
|
6518
|
+
if (isNaN(day) || isNaN(month) || isNaN(year))
|
|
6519
|
+
return null;
|
|
6520
|
+
if (month < 0 || month > 11 || day < 1)
|
|
6521
|
+
return null;
|
|
6522
|
+
if (year < 1000 || year > 9999)
|
|
6523
|
+
return null;
|
|
6524
|
+
const date = new Date(year, month, day);
|
|
6525
|
+
if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
|
|
6526
|
+
return null;
|
|
6527
|
+
}
|
|
6528
|
+
return { day, weekDay: date.getDay(), inCurrentMonth: true,
|
|
6529
|
+
monthYear: { year, month }
|
|
6530
|
+
};
|
|
6531
|
+
}
|
|
6379
6532
|
|
|
6380
6533
|
class MonthCalendarComponent {
|
|
6381
6534
|
constructor() {
|
|
@@ -6562,6 +6715,8 @@ class DayCalendarComponent {
|
|
|
6562
6715
|
this.selectedRage = new EventEmitter();
|
|
6563
6716
|
this.changeMonthYearResponse = new EventEmitter();
|
|
6564
6717
|
this.calendarResponse = new EventEmitter();
|
|
6718
|
+
this.endDateError = '';
|
|
6719
|
+
this.startDateError = '';
|
|
6565
6720
|
this.showYearCalendar = false;
|
|
6566
6721
|
this.showMonthCalendar = false;
|
|
6567
6722
|
this.hoveredDay = null;
|
|
@@ -6630,7 +6785,7 @@ class DayCalendarComponent {
|
|
|
6630
6785
|
this.calendarResponse.emit(currentDate);
|
|
6631
6786
|
}
|
|
6632
6787
|
else {
|
|
6633
|
-
|
|
6788
|
+
onSelectDaysRange(this, day);
|
|
6634
6789
|
this.selectedRage.emit(day);
|
|
6635
6790
|
}
|
|
6636
6791
|
}
|
|
@@ -6643,12 +6798,32 @@ class DayCalendarComponent {
|
|
|
6643
6798
|
onApplyRageDate(this);
|
|
6644
6799
|
}
|
|
6645
6800
|
}
|
|
6646
|
-
clearSelectedDate() {
|
|
6801
|
+
clearSelectedDate(clearTarget) {
|
|
6802
|
+
if (clearTarget === 'all' || clearTarget === 'start') {
|
|
6803
|
+
this.selectedRangeStart = null;
|
|
6804
|
+
this.startDateField.inputValue = '';
|
|
6805
|
+
}
|
|
6806
|
+
if (clearTarget === 'all' || clearTarget === 'end') {
|
|
6807
|
+
this.selectedRangeEnd = null;
|
|
6808
|
+
this.endDateField.inputValue = '';
|
|
6809
|
+
}
|
|
6647
6810
|
this.selectedDay = null;
|
|
6648
|
-
this.selectedRangeEnd = null;
|
|
6649
|
-
this.selectedRangeStart = null;
|
|
6650
6811
|
this.clearSelection.emit();
|
|
6651
6812
|
}
|
|
6813
|
+
searchDate(date, target) {
|
|
6814
|
+
const parsed = stringToDate(date);
|
|
6815
|
+
const isInvalid = parsed === null;
|
|
6816
|
+
if (target === 'start') {
|
|
6817
|
+
this.startDateError = isInvalid ? 'invalid start date' : null;
|
|
6818
|
+
if (!isInvalid)
|
|
6819
|
+
this.selectedRangeStart = parsed;
|
|
6820
|
+
}
|
|
6821
|
+
if (target === 'end') {
|
|
6822
|
+
this.endDateError = isInvalid ? 'invalid end date' : null;
|
|
6823
|
+
if (!isInvalid)
|
|
6824
|
+
this.selectedRangeEnd = parsed;
|
|
6825
|
+
}
|
|
6826
|
+
}
|
|
6652
6827
|
handleCalendarResponse(date, isMonth) {
|
|
6653
6828
|
if (!(date instanceof Date))
|
|
6654
6829
|
return;
|
|
@@ -6711,12 +6886,25 @@ class DayCalendarComponent {
|
|
|
6711
6886
|
}
|
|
6712
6887
|
return grid;
|
|
6713
6888
|
}
|
|
6889
|
+
onDateKeyup(event, target) {
|
|
6890
|
+
const errorProp = target === 'start' ? 'startDateError' : 'endDateError';
|
|
6891
|
+
const dateInput = target === 'start' ? this.startDateField : this.endDateField;
|
|
6892
|
+
const selectedRangeProp = target === 'start' ? 'selectedRangeStart' : 'selectedRangeEnd';
|
|
6893
|
+
const value = dateInput?.inputValue ?? '';
|
|
6894
|
+
if (value.length <= 10) {
|
|
6895
|
+
this[errorProp] = '';
|
|
6896
|
+
this[selectedRangeProp] = null;
|
|
6897
|
+
}
|
|
6898
|
+
if (event.key === 'Enter') {
|
|
6899
|
+
this.searchDate(value, target);
|
|
6900
|
+
}
|
|
6901
|
+
}
|
|
6714
6902
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6715
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DayCalendarComponent, selector: "day-calendar", inputs: { initYear: "initYear", initMonth: "initMonth", config: "config", range: "range", restart: "restart", currentDate: "currentDate", appearance: "appearance", navType: "navType" }, outputs: { clearHover: "clearHover", clearSelection: "clearSelection", changeMonth: "changeMonth", hoverDay: "hoverDay", openIntegratedCalendar: "openIntegratedCalendar", selectedRage: "selectedRage", changeMonthYearResponse: "changeMonthYearResponse", calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"showMonthCalendar\">\n <month-calendar\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false, }\">\n </month-calendar>\n</section>\n\n<section *ngIf=\"showYearCalendar\">\n <year-calendar\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false}\">\n </year-calendar>\n</section>\n\n<ng-container *ngIf=\"!showYearCalendar && !showMonthCalendar\">\n <section class=\"gravity-calendar-header\" [class.mobile]=\"appearance.isMobile\">\n <div class=\"previous-button\" (click)=\"currentDate = changeDate(-1, currentDate, true); changeMonth.emit(-1)\">\n <gravity-icon *ngIf=\"(navType === 'prev' || navType === 'both') && appearance.state !== 'disabled'\" [style.--icon-color]=\"'var(--text-highlight-primary)'\"\n [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\" > </gravity-icon>\n </div>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\"> </gravity-dropdown-label>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\"> </gravity-dropdown-label>\n </div>\n\n <div class=\"next-button\" (click)=\"currentDate = changeDate(1, currentDate, true); changeMonth.emit(1)\">\n <gravity-icon *ngIf=\"(navType === 'next' || navType === 'both') && appearance.state !== 'disabled'\" [style.--icon-color]=\"'var(--text-highlight-primary)'\"\n [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\" > </gravity-icon>\n </div>\n </section>\n\n <section class=\"gravity-calendar-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"\n *ngFor=\"let day of daysList\"> {{ day }} </span>\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\">\n <div class=\"days-number-table\">\n <div class=\"week-row\" *ngFor=\"let week of getMonthGrid(); trackBy: trackByWeek\">\n <span class=\"hr-body\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"onSelectDay(day)\"> {{ day.day }} </span>\n </div>\n </div>\n\n <div *ngIf=\"appearance.actions\" class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\"\n [state]=\"!isDateSelected() ? 'disabled' : 'active'\" (click)=\"clearSelectedDate()\"> </gravity-link>\n\n <gravity-button [size]=\"'sm'\" [type]=\"'tertiary'\"\n [disabled]=\"!isDateSelected()\" (click)=\"applySelectedDate()\"> {{i18n.apply}} </gravity-button>\n </div>\n </section>\n </section>\n</ng-container>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.gravity-calendar-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-calendar-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-calendar-header.mobile{width:100%}.gravity-calendar-body{width:268px}.gravity-calendar-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-calendar-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-calendar-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-calendar-body .days-name-line .separator-line{width:268px}.gravity-calendar-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-calendar-body .days-number-selector .days-number-table{display:flex;min-height:150px;flex-direction:column}.gravity-calendar-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-calendar-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.single,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.range,.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.end,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-calendar-body.mobile{width:100%;height:auto}.gravity-calendar-body.mobile .days-name-line .separator-line{width:100%}.gravity-calendar-body.mobile .days-number-selector{gap:0}.gravity-calendar-body.mobile .days-number-selector .days-number-table{min-height:270px}.gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row{height:43px}.gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row span{width:51px;height:43px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "component", type: MonthCalendarComponent, selector: "month-calendar", inputs: ["initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: YearCalendarComponent, selector: "year-calendar", inputs: ["initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }] }); }
|
|
6903
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DayCalendarComponent, selector: "day-calendar", inputs: { initYear: "initYear", initMonth: "initMonth", config: "config", range: "range", restart: "restart", currentDate: "currentDate", appearance: "appearance", navType: "navType" }, outputs: { clearHover: "clearHover", clearSelection: "clearSelection", changeMonth: "changeMonth", hoverDay: "hoverDay", openIntegratedCalendar: "openIntegratedCalendar", selectedRage: "selectedRage", changeMonthYearResponse: "changeMonthYearResponse", calendarResponse: "response" }, viewQueries: [{ propertyName: "endDateField", first: true, predicate: ["endDate"], descendants: true }, { propertyName: "startDateField", first: true, predicate: ["startDate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"showMonthCalendar\">\n <month-calendar\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false, }\">\n </month-calendar>\n</section>\n\n<section *ngIf=\"showYearCalendar\">\n <year-calendar\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false}\">\n </year-calendar>\n</section>\n\n<div *ngIf=\"!showYearCalendar && !showMonthCalendar\" class=\"gravity-calendar-content\">\n <span class=\"hr-label sm-bold title\">{{range ? i18n.select_range : i18n.select_date}}</span>\n\n <div *ngIf=\"range\" class=\"selected-dates\">\n <gravity-text-field #startDate [label]=\"i18n.start_date\" [inputContentType]=\"'date'\" (keyup)=\"onDateKeyup($event, 'start')\"\n [customState]=\"startDateError ? 'typed-error' : (startDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [supportText]=\"startDateError\" [size]=\"'sm'\" [width]=\"'short'\" [placeholder]=\"'dd/mm/yyyy'\" [clickOnRightIcon]=\"true\"\n [iconRight]=\"selectedRangeStart ? 'unsuccess' : (startDate.inputValue.length > 0 ? 'right-angle-arrow' : '')\"\n (clickIconRight)=\"selectedRangeStart ? clearSelectedDate('start') :\n (startDate.inputValue.length > 0 ? searchDate(startDate.inputValue, 'start') : null)\"/>\n\n <gravity-text-field #endDate [label]=\"i18n.end_date\" [inputContentType]=\"'date'\" (keyup)=\"onDateKeyup($event, 'end')\"\n [customState]=\"endDateError ? 'typed-error' : (endDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [supportText]=\"endDateError\" [size]=\"'sm'\" [width]=\"'short'\" [placeholder]=\"'dd/mm/yyyy'\" [clickOnRightIcon]=\"true\"\n [iconRight]=\"selectedRangeEnd ? 'unsuccess' : (endDate.inputValue.length > 0 ? 'right-angle-arrow' : '')\"\n (clickIconRight)=\"selectedRangeStart ? clearSelectedDate('end') :\n (endDate.inputValue.length > 0 ? searchDate(endDate.inputValue, 'end') : null)\"/>\n </div>\n\n <section class=\"gravity-calendar-header\" [class.mobile]=\"appearance.isMobile\">\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-left'\" [supportText]=\"i18n.preview_month\"\n [state]=\"(navType === 'prev' || navType === 'both') && (appearance.state !== 'disabled') ? 'active' : 'disabled'\"\n (click)=\"currentDate = changeDate(-1, currentDate, true); changeMonth.emit(-1)\"/>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\"> </gravity-dropdown-label>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\"> </gravity-dropdown-label>\n </div>\n\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-right'\" [supportText]=\"i18n.next_month\"\n [state]=\"(navType === 'next' || navType === 'both') && (appearance.state !== 'disabled') ? 'active' : 'disabled'\"\n (click)=\"currentDate = changeDate(1, currentDate, true); changeMonth.emit(1)\"/>\n </section>\n\n <section class=\"gravity-calendar-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"\n *ngFor=\"let day of daysList\"> {{ day }} </span>\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\">\n <div class=\"days-number-table\">\n <div class=\"week-row\" *ngFor=\"let week of getMonthGrid(); trackBy: trackByWeek\">\n <span class=\"hr-body\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"onSelectDay(day)\"> {{ day.day }} </span>\n </div>\n </div>\n\n <div *ngIf=\"appearance.actions\" class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\"\n [state]=\"!isDateSelected() ? 'disabled' : 'active'\" (click)=\"clearSelectedDate('all')\"> </gravity-link>\n\n <gravity-button [size]=\"'sm'\" [type]=\"'tertiary'\"\n [disabled]=\"!isDateSelected()\" (click)=\"isDateSelected() && applySelectedDate()\"> {{i18n.apply}} </gravity-button>\n </div>\n </section>\n </section>\n</div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.gravity-calendar-content{display:grid;justify-items:center;gap:var(--gravity-spacing-md)}.gravity-calendar-content .title{color:var(--label-text-empty-enabled-primary)}.gravity-calendar-content .selected-dates{display:flex;align-self:stretch;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-calendar-content .selected-dates ::ng-deep gravity-text-field .gravity-input-field{width:130px}.gravity-calendar-content .gravity-calendar-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-calendar-content .gravity-calendar-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-calendar-content .gravity-calendar-header.mobile{width:100%}.gravity-calendar-content .gravity-calendar-body{width:268px}.gravity-calendar-content .gravity-calendar-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-calendar-content .gravity-calendar-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-calendar-content .gravity-calendar-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-calendar-content .gravity-calendar-body .days-name-line .separator-line{width:268px}.gravity-calendar-content .gravity-calendar-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table{display:flex;min-height:150px;flex-direction:column}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.single,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.range,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.end,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.in-slt:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.all-sld{border-radius:0!important;border-color:transparent!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.same-sln{border-radius:var(--gravity-spacing-xs)!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-calendar-content .gravity-calendar-body.mobile{width:100%;height:auto}.gravity-calendar-content .gravity-calendar-body.mobile .days-name-line .separator-line{width:100%}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector{gap:0}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table{min-height:270px}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row{height:43px}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row span{width:51px;height:43px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["currentLang", "customInputValue", "customState", "cypressTag", "label", "prefix", "required", "supportText", "textFieldType", "clickOnLeftIcon", "clickOnRightIcon", "iconColor", "iconLeft", "iconRight", "autocomplete", "inputContentType", "placeholder", "validations", "size", "width"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "component", type: MonthCalendarComponent, selector: "month-calendar", inputs: ["initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: YearCalendarComponent, selector: "year-calendar", inputs: ["initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }] }); }
|
|
6716
6904
|
}
|
|
6717
6905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayCalendarComponent, decorators: [{
|
|
6718
6906
|
type: Component,
|
|
6719
|
-
args: [{ selector: 'day-calendar', template: "<section *ngIf=\"showMonthCalendar\">\n <month-calendar\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false, }\">\n </month-calendar>\n</section>\n\n<section *ngIf=\"showYearCalendar\">\n <year-calendar\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false}\">\n </year-calendar>\n</section>\n\n<ng-container *ngIf=\"!showYearCalendar && !showMonthCalendar\">\n <section class=\"gravity-calendar-header\" [class.mobile]=\"appearance.isMobile\">\n <div class=\"previous-button\" (click)=\"currentDate = changeDate(-1, currentDate, true); changeMonth.emit(-1)\">\n <gravity-icon *ngIf=\"(navType === 'prev' || navType === 'both') && appearance.state !== 'disabled'\" [style.--icon-color]=\"'var(--text-highlight-primary)'\"\n [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\" > </gravity-icon>\n </div>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\"> </gravity-dropdown-label>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\"> </gravity-dropdown-label>\n </div>\n\n <div class=\"next-button\" (click)=\"currentDate = changeDate(1, currentDate, true); changeMonth.emit(1)\">\n <gravity-icon *ngIf=\"(navType === 'next' || navType === 'both') && appearance.state !== 'disabled'\" [style.--icon-color]=\"'var(--text-highlight-primary)'\"\n [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\" > </gravity-icon>\n </div>\n </section>\n\n <section class=\"gravity-calendar-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"\n *ngFor=\"let day of daysList\"> {{ day }} </span>\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\">\n <div class=\"days-number-table\">\n <div class=\"week-row\" *ngFor=\"let week of getMonthGrid(); trackBy: trackByWeek\">\n <span class=\"hr-body\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"onSelectDay(day)\"> {{ day.day }} </span>\n </div>\n </div>\n\n <div *ngIf=\"appearance.actions\" class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\"\n [state]=\"!isDateSelected() ? 'disabled' : 'active'\" (click)=\"clearSelectedDate()\"> </gravity-link>\n\n <gravity-button [size]=\"'sm'\" [type]=\"'tertiary'\"\n [disabled]=\"!isDateSelected()\" (click)=\"applySelectedDate()\"> {{i18n.apply}} </gravity-button>\n </div>\n </section>\n </section>\n</ng-container>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.gravity-calendar-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-calendar-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-calendar-header.mobile{width:100%}.gravity-calendar-body{width:268px}.gravity-calendar-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-calendar-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-calendar-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-calendar-body .days-name-line .separator-line{width:268px}.gravity-calendar-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-calendar-body .days-number-selector .days-number-table{display:flex;min-height:150px;flex-direction:column}.gravity-calendar-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-calendar-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.single,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.range,.gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.end,.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-calendar-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-calendar-body.mobile{width:100%;height:auto}.gravity-calendar-body.mobile .days-name-line .separator-line{width:100%}.gravity-calendar-body.mobile .days-number-selector{gap:0}.gravity-calendar-body.mobile .days-number-selector .days-number-table{min-height:270px}.gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row{height:43px}.gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row span{width:51px;height:43px}\n"] }]
|
|
6907
|
+
args: [{ selector: 'day-calendar', template: "<section *ngIf=\"showMonthCalendar\">\n <month-calendar\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false, }\">\n </month-calendar>\n</section>\n\n<section *ngIf=\"showYearCalendar\">\n <year-calendar\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile, actions: false}\">\n </year-calendar>\n</section>\n\n<div *ngIf=\"!showYearCalendar && !showMonthCalendar\" class=\"gravity-calendar-content\">\n <span class=\"hr-label sm-bold title\">{{range ? i18n.select_range : i18n.select_date}}</span>\n\n <div *ngIf=\"range\" class=\"selected-dates\">\n <gravity-text-field #startDate [label]=\"i18n.start_date\" [inputContentType]=\"'date'\" (keyup)=\"onDateKeyup($event, 'start')\"\n [customState]=\"startDateError ? 'typed-error' : (startDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [supportText]=\"startDateError\" [size]=\"'sm'\" [width]=\"'short'\" [placeholder]=\"'dd/mm/yyyy'\" [clickOnRightIcon]=\"true\"\n [iconRight]=\"selectedRangeStart ? 'unsuccess' : (startDate.inputValue.length > 0 ? 'right-angle-arrow' : '')\"\n (clickIconRight)=\"selectedRangeStart ? clearSelectedDate('start') :\n (startDate.inputValue.length > 0 ? searchDate(startDate.inputValue, 'start') : null)\"/>\n\n <gravity-text-field #endDate [label]=\"i18n.end_date\" [inputContentType]=\"'date'\" (keyup)=\"onDateKeyup($event, 'end')\"\n [customState]=\"endDateError ? 'typed-error' : (endDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [supportText]=\"endDateError\" [size]=\"'sm'\" [width]=\"'short'\" [placeholder]=\"'dd/mm/yyyy'\" [clickOnRightIcon]=\"true\"\n [iconRight]=\"selectedRangeEnd ? 'unsuccess' : (endDate.inputValue.length > 0 ? 'right-angle-arrow' : '')\"\n (clickIconRight)=\"selectedRangeStart ? clearSelectedDate('end') :\n (endDate.inputValue.length > 0 ? searchDate(endDate.inputValue, 'end') : null)\"/>\n </div>\n\n <section class=\"gravity-calendar-header\" [class.mobile]=\"appearance.isMobile\">\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-left'\" [supportText]=\"i18n.preview_month\"\n [state]=\"(navType === 'prev' || navType === 'both') && (appearance.state !== 'disabled') ? 'active' : 'disabled'\"\n (click)=\"currentDate = changeDate(-1, currentDate, true); changeMonth.emit(-1)\"/>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\"> </gravity-dropdown-label>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\"> </gravity-dropdown-label>\n </div>\n\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-right'\" [supportText]=\"i18n.next_month\"\n [state]=\"(navType === 'next' || navType === 'both') && (appearance.state !== 'disabled') ? 'active' : 'disabled'\"\n (click)=\"currentDate = changeDate(1, currentDate, true); changeMonth.emit(1)\"/>\n </section>\n\n <section class=\"gravity-calendar-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"\n *ngFor=\"let day of daysList\"> {{ day }} </span>\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\">\n <div class=\"days-number-table\">\n <div class=\"week-row\" *ngFor=\"let week of getMonthGrid(); trackBy: trackByWeek\">\n <span class=\"hr-body\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"onSelectDay(day)\"> {{ day.day }} </span>\n </div>\n </div>\n\n <div *ngIf=\"appearance.actions\" class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\"\n [state]=\"!isDateSelected() ? 'disabled' : 'active'\" (click)=\"clearSelectedDate('all')\"> </gravity-link>\n\n <gravity-button [size]=\"'sm'\" [type]=\"'tertiary'\"\n [disabled]=\"!isDateSelected()\" (click)=\"isDateSelected() && applySelectedDate()\"> {{i18n.apply}} </gravity-button>\n </div>\n </section>\n </section>\n</div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.gravity-calendar-content{display:grid;justify-items:center;gap:var(--gravity-spacing-md)}.gravity-calendar-content .title{color:var(--label-text-empty-enabled-primary)}.gravity-calendar-content .selected-dates{display:flex;align-self:stretch;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-calendar-content .selected-dates ::ng-deep gravity-text-field .gravity-input-field{width:130px}.gravity-calendar-content .gravity-calendar-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-calendar-content .gravity-calendar-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-calendar-content .gravity-calendar-header.mobile{width:100%}.gravity-calendar-content .gravity-calendar-body{width:268px}.gravity-calendar-content .gravity-calendar-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-calendar-content .gravity-calendar-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-calendar-content .gravity-calendar-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-calendar-content .gravity-calendar-body .days-name-line .separator-line{width:268px}.gravity-calendar-content .gravity-calendar-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table{display:flex;min-height:150px;flex-direction:column}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.single,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.range,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.start,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.end,.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.in-slt:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.all-sld{border-radius:0!important;border-color:transparent!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.same-sln{border-radius:var(--gravity-spacing-xs)!important}.gravity-calendar-content .gravity-calendar-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-calendar-content .gravity-calendar-body.mobile{width:100%;height:auto}.gravity-calendar-content .gravity-calendar-body.mobile .days-name-line .separator-line{width:100%}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector{gap:0}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table{min-height:270px}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row{height:43px}.gravity-calendar-content .gravity-calendar-body.mobile .days-number-selector .days-number-table .week-row span{width:51px;height:43px}\n"] }]
|
|
6720
6908
|
}], propDecorators: { initYear: [{
|
|
6721
6909
|
type: Input
|
|
6722
6910
|
}], initMonth: [{
|
|
@@ -6750,6 +6938,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6750
6938
|
}], calendarResponse: [{
|
|
6751
6939
|
type: Output,
|
|
6752
6940
|
args: ['response']
|
|
6941
|
+
}], endDateField: [{
|
|
6942
|
+
type: ViewChild,
|
|
6943
|
+
args: ['endDate']
|
|
6944
|
+
}], startDateField: [{
|
|
6945
|
+
type: ViewChild,
|
|
6946
|
+
args: ['startDate']
|
|
6753
6947
|
}] } });
|
|
6754
6948
|
|
|
6755
6949
|
class DualMonthCalendarComponent {
|
|
@@ -6763,7 +6957,7 @@ class DualMonthCalendarComponent {
|
|
|
6763
6957
|
this.nextMonth = changeDate(1, this.currentDate, true);
|
|
6764
6958
|
this.Date = Date;
|
|
6765
6959
|
this.changeDate = changeDate;
|
|
6766
|
-
this.
|
|
6960
|
+
this.onSelectDaysRange = onSelectDaysRange;
|
|
6767
6961
|
}
|
|
6768
6962
|
get i18n() { return CALENDAR_I18N[this.appearance.language]; }
|
|
6769
6963
|
get daysList() { return this.appearance.language === 'en' ? DAYS_EN : DAYS_ES; }
|
|
@@ -6814,7 +7008,7 @@ class DualMonthCalendarComponent {
|
|
|
6814
7008
|
}
|
|
6815
7009
|
handleClearSelection() {
|
|
6816
7010
|
this.clearSelection.emit();
|
|
6817
|
-
this.leftCalendar.clearSelectedDate();
|
|
7011
|
+
this.leftCalendar.clearSelectedDate('all');
|
|
6818
7012
|
}
|
|
6819
7013
|
handlerChangeMonthYearResponse($event, origin) {
|
|
6820
7014
|
if ($event instanceof Date) {
|
|
@@ -6829,11 +7023,11 @@ class DualMonthCalendarComponent {
|
|
|
6829
7023
|
}
|
|
6830
7024
|
}
|
|
6831
7025
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DualMonthCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DualMonthCalendarComponent, selector: "dual-month-calendar", inputs: { initDate: "initDate", restart: "restart", appearance: "appearance" }, outputs: { clearSelection: "clearSelection", calendarResponse: "response" }, viewQueries: [{ propertyName: "leftCalendar", first: true, predicate: ["leftCalendar"], descendants: true }, { propertyName: "rightCalendar", first: true, predicate: ["rightCalendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showRightCalendar && showLeftCalendar\" class=\"date-select-indicator\">\n <p>\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart ? 'sm-regular' : 'sm-bold'\">\n {{leftCalendar?.selectedRangeStart ? getFormattedDate(leftCalendar.selectedRangeStart) : i18n.start_date}} </span>\n\n <gravity-icon [iconSize]=\"'md-16'\" [size]=\"'md'\" [iconName]=\"'swaps-arrow-right'\"></gravity-icon>\n\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart && !leftCalendar.selectedRangeEnd ? 'sm-bold' : 'sm-regular'\">\n {{leftCalendar?.selectedRangeEnd ? getFormattedDate(leftCalendar.selectedRangeEnd) : i18n.end_date}} </span>\n </p>\n</div>\n\n<div class=\"dual-calendar-container\" [class.mobile]=\"appearance.isMobile\">\n\n <day-calendar #leftCalendar *ngIf=\"showLeftCalendar\"\n [range]=\"true\"\n (openIntegratedCalendar)=\"showRightCalendar = false\"\n (changeMonth)=\"onChangeMonth('left', $event)\"\n (selectedRage)=\"
|
|
7026
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DualMonthCalendarComponent, selector: "dual-month-calendar", inputs: { initDate: "initDate", restart: "restart", appearance: "appearance" }, outputs: { clearSelection: "clearSelection", calendarResponse: "response" }, viewQueries: [{ propertyName: "leftCalendar", first: true, predicate: ["leftCalendar"], descendants: true }, { propertyName: "rightCalendar", first: true, predicate: ["rightCalendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showRightCalendar && showLeftCalendar\" class=\"date-select-indicator\">\n <p>\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart ? 'sm-regular' : 'sm-bold'\">\n {{leftCalendar?.selectedRangeStart ? getFormattedDate(leftCalendar.selectedRangeStart) : i18n.start_date}} </span>\n\n <gravity-icon [iconSize]=\"'md-16'\" [size]=\"'md'\" [iconName]=\"'swaps-arrow-right'\"></gravity-icon>\n\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart && !leftCalendar.selectedRangeEnd ? 'sm-bold' : 'sm-regular'\">\n {{leftCalendar?.selectedRangeEnd ? getFormattedDate(leftCalendar.selectedRangeEnd) : i18n.end_date}} </span>\n </p>\n</div>\n\n<div class=\"dual-calendar-container\" [class.mobile]=\"appearance.isMobile\">\n\n <day-calendar #leftCalendar *ngIf=\"showLeftCalendar\"\n [range]=\"true\"\n (openIntegratedCalendar)=\"showRightCalendar = false\"\n (changeMonth)=\"onChangeMonth('left', $event)\"\n (selectedRage)=\"onSelectDaysRange(rightCalendar, $event)\"\n [navType]=\"appearance.isMobile ? 'none' : 'prev'\" [currentDate]=\"currentDate\"\n (changeMonthYearResponse)=\"handlerChangeMonthYearResponse($event, 'left')\"\n [appearance]=\"{language: appearance.language, actions: false, isMobile: appearance.isMobile, state: appearance.state}\">\n </day-calendar>\n\n <day-calendar #rightCalendar *ngIf=\"showRightCalendar\"\n [range]=\"true\"\n (clearHover)=\"handleClearHover()\"\n (hoverDay)=\"handleHoverDay($event)\"\n (response)=\"handleApplyResponse($event)\"\n (clearSelection)=\"handleClearSelection()\"\n (openIntegratedCalendar)=\"showLeftCalendar = false\"\n (changeMonth)=\"onChangeMonth('right', $event)\"\n (selectedRage)=\"onSelectDaysRange(leftCalendar, $event)\"\n [navType]=\"appearance.isMobile ? 'none' : 'next'\" [currentDate]=\"nextMonth\"\n (changeMonthYearResponse)=\"handlerChangeMonthYearResponse($event, 'right')\"\n [appearance]=\"{language: appearance.language, actions: true, isMobile: appearance.isMobile, state: appearance.state}\">\n </day-calendar>\n</div>", styles: [".date-select-indicator{height:27px;display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--gravity-spacing-sm);margin-bottom:var(--gravity-spacing-md);border-bottom:2px solid var(--divider-menu-active-primary)}.date-select-indicator p{display:flex;align-items:flex-start;gap:var(--gravity-spacing-xs);color:var(--bg-calendar-nav-primary)}.dual-calendar-container{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;gap:var(--gravity-spacing-md)}.dual-calendar-container.mobile{flex-direction:column;gap:var(--gravity-spacing-sm)}.dual-calendar-container.mobile day-calendar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: DayCalendarComponent, selector: "day-calendar", inputs: ["initYear", "initMonth", "config", "range", "restart", "currentDate", "appearance", "navType"], outputs: ["clearHover", "clearSelection", "changeMonth", "hoverDay", "openIntegratedCalendar", "selectedRage", "changeMonthYearResponse", "response"] }] }); }
|
|
6833
7027
|
}
|
|
6834
7028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DualMonthCalendarComponent, decorators: [{
|
|
6835
7029
|
type: Component,
|
|
6836
|
-
args: [{ selector: 'dual-month-calendar', template: "<div *ngIf=\"showRightCalendar && showLeftCalendar\" class=\"date-select-indicator\">\n <p>\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart ? 'sm-regular' : 'sm-bold'\">\n {{leftCalendar?.selectedRangeStart ? getFormattedDate(leftCalendar.selectedRangeStart) : i18n.start_date}} </span>\n\n <gravity-icon [iconSize]=\"'md-16'\" [size]=\"'md'\" [iconName]=\"'swaps-arrow-right'\"></gravity-icon>\n\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart && !leftCalendar.selectedRangeEnd ? 'sm-bold' : 'sm-regular'\">\n {{leftCalendar?.selectedRangeEnd ? getFormattedDate(leftCalendar.selectedRangeEnd) : i18n.end_date}} </span>\n </p>\n</div>\n\n<div class=\"dual-calendar-container\" [class.mobile]=\"appearance.isMobile\">\n\n <day-calendar #leftCalendar *ngIf=\"showLeftCalendar\"\n [range]=\"true\"\n (openIntegratedCalendar)=\"showRightCalendar = false\"\n (changeMonth)=\"onChangeMonth('left', $event)\"\n (selectedRage)=\"
|
|
7030
|
+
args: [{ selector: 'dual-month-calendar', template: "<div *ngIf=\"showRightCalendar && showLeftCalendar\" class=\"date-select-indicator\">\n <p>\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart ? 'sm-regular' : 'sm-bold'\">\n {{leftCalendar?.selectedRangeStart ? getFormattedDate(leftCalendar.selectedRangeStart) : i18n.start_date}} </span>\n\n <gravity-icon [iconSize]=\"'md-16'\" [size]=\"'md'\" [iconName]=\"'swaps-arrow-right'\"></gravity-icon>\n\n <span class=\"hr-title\" [ngClass]=\"leftCalendar?.selectedRangeStart && !leftCalendar.selectedRangeEnd ? 'sm-bold' : 'sm-regular'\">\n {{leftCalendar?.selectedRangeEnd ? getFormattedDate(leftCalendar.selectedRangeEnd) : i18n.end_date}} </span>\n </p>\n</div>\n\n<div class=\"dual-calendar-container\" [class.mobile]=\"appearance.isMobile\">\n\n <day-calendar #leftCalendar *ngIf=\"showLeftCalendar\"\n [range]=\"true\"\n (openIntegratedCalendar)=\"showRightCalendar = false\"\n (changeMonth)=\"onChangeMonth('left', $event)\"\n (selectedRage)=\"onSelectDaysRange(rightCalendar, $event)\"\n [navType]=\"appearance.isMobile ? 'none' : 'prev'\" [currentDate]=\"currentDate\"\n (changeMonthYearResponse)=\"handlerChangeMonthYearResponse($event, 'left')\"\n [appearance]=\"{language: appearance.language, actions: false, isMobile: appearance.isMobile, state: appearance.state}\">\n </day-calendar>\n\n <day-calendar #rightCalendar *ngIf=\"showRightCalendar\"\n [range]=\"true\"\n (clearHover)=\"handleClearHover()\"\n (hoverDay)=\"handleHoverDay($event)\"\n (response)=\"handleApplyResponse($event)\"\n (clearSelection)=\"handleClearSelection()\"\n (openIntegratedCalendar)=\"showLeftCalendar = false\"\n (changeMonth)=\"onChangeMonth('right', $event)\"\n (selectedRage)=\"onSelectDaysRange(leftCalendar, $event)\"\n [navType]=\"appearance.isMobile ? 'none' : 'next'\" [currentDate]=\"nextMonth\"\n (changeMonthYearResponse)=\"handlerChangeMonthYearResponse($event, 'right')\"\n [appearance]=\"{language: appearance.language, actions: true, isMobile: appearance.isMobile, state: appearance.state}\">\n </day-calendar>\n</div>", styles: [".date-select-indicator{height:27px;display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--gravity-spacing-sm);margin-bottom:var(--gravity-spacing-md);border-bottom:2px solid var(--divider-menu-active-primary)}.date-select-indicator p{display:flex;align-items:flex-start;gap:var(--gravity-spacing-xs);color:var(--bg-calendar-nav-primary)}.dual-calendar-container{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;gap:var(--gravity-spacing-md)}.dual-calendar-container.mobile{flex-direction:column;gap:var(--gravity-spacing-sm)}.dual-calendar-container.mobile day-calendar{width:100%}\n"] }]
|
|
6837
7031
|
}], propDecorators: { initDate: [{
|
|
6838
7032
|
type: Input
|
|
6839
7033
|
}], restart: [{
|
|
@@ -7432,7 +7626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7432
7626
|
|
|
7433
7627
|
class GravityMenuComponent {
|
|
7434
7628
|
constructor() {
|
|
7435
|
-
this.items = [];
|
|
7436
7629
|
this.maxCardButtonsPerRow = 3;
|
|
7437
7630
|
this.size = 'xl';
|
|
7438
7631
|
this.closeMenu = new EventEmitter();
|
|
@@ -7474,17 +7667,17 @@ class GravityMenuComponent {
|
|
|
7474
7667
|
return rows;
|
|
7475
7668
|
}
|
|
7476
7669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { logoUrl: "logoUrl", userInfo: "userInfo", items: "items", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { closeMenu: "closeMenu" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"size === 'md' || size === 'sm'\" [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{min-width:577px;max-width:1099px;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: ["label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
|
|
7670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { logoUrl: "logoUrl", items: "items", userInfo: "userInfo", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { closeMenu: "closeMenu" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"size === 'md' || size === 'sm'\" [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{min-width:577px;max-width:1099px;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: ["label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
|
|
7478
7671
|
}
|
|
7479
7672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
7480
7673
|
type: Component,
|
|
7481
7674
|
args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"size === 'md' || size === 'sm'\" [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{min-width:577px;max-width:1099px;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
7482
7675
|
}], propDecorators: { logoUrl: [{
|
|
7483
7676
|
type: Input
|
|
7484
|
-
}], userInfo: [{
|
|
7485
|
-
type: Input
|
|
7486
7677
|
}], items: [{
|
|
7487
7678
|
type: Input
|
|
7679
|
+
}], userInfo: [{
|
|
7680
|
+
type: Input
|
|
7488
7681
|
}], cardButtons: [{
|
|
7489
7682
|
type: Input
|
|
7490
7683
|
}], maxCardButtonsPerRow: [{
|