@progressio_resources/gravity-design-system 2.6.21 → 2.6.23
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-v2/datepicker/base/bs-datepicker-container.mjs +66 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-datepicker-inline.component.mjs +129 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-datepicker-inline.config.mjs +14 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.callbacks.mjs +13 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.component.mjs +210 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.config.mjs +46 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker-inline.component.mjs +130 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker-inline.config.mjs +18 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker.component.mjs +218 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker.config.mjs +18 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-container.component.mjs +134 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-inline-container.component.mjs +33 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-navigation-view/bs-datepicker-navigation-view.component.mjs +44 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-daterangepicker-container.component.mjs +190 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-daterangepicker-inline-container.component.mjs +33 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-days-calendar-view/bs-datepicker-day-decorator.directive.mjs +30 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-days-calendar-view/bs-days-calendar-view.component.mjs +54 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-months-calendar-view/bs-months-calendar-view.component.mjs +49 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/components/bs-years-calendar-view/bs-years-calendar-view.component.mjs +50 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/datepicker-animations.mjs +16 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/calc-days-calendar.mjs +16 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/flag-days-calendar.mjs +53 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/flag-months-calendar.mjs +39 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/flag-years-calendar.mjs +36 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/format-days-calendar.mjs +23 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/format-months-calendar.mjs +23 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/format-years-calendar.mjs +43 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/engine/view-mode.mjs +4 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/models/index.mjs +7 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/_defaults.mjs +6 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.actions.mjs +64 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.effects.mjs +128 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.reducer.mjs +301 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.state.mjs +16 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.store.mjs +20 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/utils/bs-calendar-utils.mjs +74 -0
- package/esm2022/lib/components/gravity-calendar-v2/datepicker/utils/matrix-utils.mjs +14 -0
- package/esm2022/lib/components/gravity-calendar-v2/gravity-calendar-v2.component.mjs +227 -0
- package/esm2022/lib/gravity-design-system.module.mjs +47 -3
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs +2458 -33
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-calendar-v2/datepicker/base/bs-datepicker-container.d.ts +41 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-datepicker-inline.component.d.ts +40 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-datepicker-inline.config.d.ts +6 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.callbacks.d.ts +6 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.component.d.ts +64 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-datepicker.config.d.ts +53 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker-inline.component.d.ts +37 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker-inline.config.d.ts +7 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker.component.d.ts +61 -0
- package/lib/components/gravity-calendar-v2/datepicker/bs-daterangepicker.config.d.ts +7 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-container.component.d.ts +34 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-inline-container.component.d.ts +14 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-datepicker-navigation-view/bs-datepicker-navigation-view.component.d.ts +16 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-daterangepicker-container.component.d.ts +40 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-daterangepicker-inline-container.component.d.ts +14 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-days-calendar-view/bs-datepicker-day-decorator.directive.d.ts +7 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-days-calendar-view/bs-days-calendar-view.component.d.ts +23 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-months-calendar-view/bs-months-calendar-view.component.d.ts +19 -0
- package/lib/components/gravity-calendar-v2/datepicker/components/bs-years-calendar-view/bs-years-calendar-view.component.d.ts +19 -0
- package/lib/components/gravity-calendar-v2/datepicker/datepicker-animations.d.ts +3 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/calc-days-calendar.d.ts +2 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/flag-days-calendar.d.ts +12 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/flag-months-calendar.d.ts +12 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/flag-years-calendar.d.ts +13 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/format-days-calendar.d.ts +2 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/format-months-calendar.d.ts +2 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/format-years-calendar.d.ts +4 -0
- package/lib/components/gravity-calendar-v2/datepicker/engine/view-mode.d.ts +2 -0
- package/lib/components/gravity-calendar-v2/datepicker/models/index.d.ts +86 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/_defaults.d.ts +3 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.actions.d.ts +34 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.effects.d.ts +34 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.reducer.d.ts +3 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.state.d.ts +34 -0
- package/lib/components/gravity-calendar-v2/datepicker/reducer/bs-datepicker.store.d.ts +8 -0
- package/lib/components/gravity-calendar-v2/datepicker/utils/bs-calendar-utils.d.ts +13 -0
- package/lib/components/gravity-calendar-v2/datepicker/utils/matrix-utils.d.ts +9 -0
- package/lib/components/gravity-calendar-v2/gravity-calendar-v2.component.d.ts +49 -0
- package/lib/gravity-design-system.module.d.ts +43 -29
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/src/lib/styles/components/_datepicker-v2.scss +9 -0
- package/src/lib/styles/gravity-design-system.scss +1 -0
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, HostBinding, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, inject } from '@angular/core';
|
|
3
|
-
import * as
|
|
2
|
+
import { Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, HostBinding, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, ChangeDetectionStrategy, inject } from '@angular/core';
|
|
3
|
+
import * as i7 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1 from 'angular-svg-icon';
|
|
8
8
|
import { AngularSvgIconModule } from 'angular-svg-icon';
|
|
9
|
-
import * as i1$
|
|
9
|
+
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
10
10
|
import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
|
|
11
|
-
import * as i2$
|
|
11
|
+
import * as i2$2 from 'angular-svg-icon-preloader';
|
|
12
12
|
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
13
|
-
import * as i1$
|
|
13
|
+
import * as i1$2 from 'ngx-bootstrap/datepicker';
|
|
14
14
|
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
|
15
|
-
import { BehaviorSubject, timer } from 'rxjs';
|
|
16
|
-
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
15
|
+
import { Subscription, combineLatest, BehaviorSubject, Subject, timer } from 'rxjs';
|
|
16
|
+
import { filter, map, take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
17
|
+
import { isFirstDayOfWeek, getDay, shiftDate, isBefore, endOf, isAfter, startOf, getFirstDayOfMonth, formatDate, isSameMonth, isSameDay, isSameYear, isDateValid, isArray, setFullDate, getLocale, isSame, getMonth, getFullYear } from 'ngx-bootstrap/chronos';
|
|
18
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
19
|
+
import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
|
|
20
|
+
import * as i6 from 'ngx-bootstrap/positioning';
|
|
21
|
+
import * as i2$1 from 'ngx-bootstrap/component-loader';
|
|
17
22
|
|
|
18
23
|
class GravityIconComponent {
|
|
19
24
|
static isOldIcon(iconName) {
|
|
@@ -101,7 +106,7 @@ class GravityButtonComponent {
|
|
|
101
106
|
return GravityIconComponent.isNewIcon(iconName);
|
|
102
107
|
}
|
|
103
108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", customState: "customState", iconPosition: "iconPosition", iconName: "iconName", isLoading: "isLoading", showContent: "showContent", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n <ng-container *ngIf=\"!isLoading\">\n <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName && iconPosition == 'left'\"\n [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\" class=\"icon-{{iconPosition}}\"></gravity-icon>\n <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n <ng-content></ng-content>\n </span>\n <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName && iconPosition == 'right'\"\n [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\" class=\"icon-{{iconPosition}}\"></gravity-icon>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-sm span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button.gravity-size-lg span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", customState: "customState", iconPosition: "iconPosition", iconName: "iconName", isLoading: "isLoading", showContent: "showContent", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n <ng-container *ngIf=\"!isLoading\">\n <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName && iconPosition == 'left'\"\n [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\" class=\"icon-{{iconPosition}}\"></gravity-icon>\n <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n <ng-content></ng-content>\n </span>\n <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName && iconPosition == 'right'\"\n [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\" class=\"icon-{{iconPosition}}\"></gravity-icon>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-sm span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-sm.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-md.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon.icon-left+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button.gravity-size-lg span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-style span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-primary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-secondary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-tertiary[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-positive[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-negative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-alternative[disabled] span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-disabled span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-alternative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-negative:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-positive:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-tertiary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-secondary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right,.gravity-size-lg.gravity-button-primary:not([disabled]) span.button-content-wrapper:not(:empty)+gravity-icon.icon-right{margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
105
110
|
}
|
|
106
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityButtonComponent, decorators: [{
|
|
107
112
|
type: Component,
|
|
@@ -192,7 +197,7 @@ class GravityCheckboxComponent {
|
|
|
192
197
|
}
|
|
193
198
|
}
|
|
194
199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", size: "size", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field size-{{size}}\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxChecked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxChecked\"></gravity-icon>\n </span>\n <label>\n <ng-content></ng-content>\n </label>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{align-items:center;display:flex;position:relative;-webkit-user-select:none;user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;border:var(--checkbox-border-width) solid var(--outline-checkbox-off-primary);border-radius:.0625rem;cursor:pointer;display:flex;height:var(--checkbox-size);justify-content:center;min-height:var(--checkbox-size);min-width:var(--checkbox-size);padding:2px 1px;width:var(--checkbox-size)}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary);--icon-height: 100%;--icon-width: 100%}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:transparent!important;border-color:var(--outline-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-checkbox-field.size-sm{--checkbox-border-width: 1.4px;--checkbox-size: 16px}.gravity-checkbox-field.size-md{--checkbox-border-width: 1.5px;--checkbox-size: 20px}label:not(:empty){margin-left:10px}\n"], dependencies: [{ kind: "directive", type:
|
|
200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", size: "size", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field size-{{size}}\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxChecked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxChecked\"></gravity-icon>\n </span>\n <label>\n <ng-content></ng-content>\n </label>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{align-items:center;display:flex;position:relative;-webkit-user-select:none;user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;border:var(--checkbox-border-width) solid var(--outline-checkbox-off-primary);border-radius:.0625rem;cursor:pointer;display:flex;height:var(--checkbox-size);justify-content:center;min-height:var(--checkbox-size);min-width:var(--checkbox-size);padding:2px 1px;width:var(--checkbox-size)}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary);--icon-height: 100%;--icon-width: 100%}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:transparent!important;border-color:var(--outline-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-checkbox-field.size-sm{--checkbox-border-width: 1.4px;--checkbox-size: 16px}.gravity-checkbox-field.size-md{--checkbox-border-width: 1.5px;--checkbox-size: 20px}label:not(:empty){margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
196
201
|
}
|
|
197
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
198
203
|
type: Component,
|
|
@@ -375,7 +380,7 @@ class GravityDropdownListComponent {
|
|
|
375
380
|
}
|
|
376
381
|
}
|
|
377
382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, deps: [{ token: FilterByPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { clearable: "clearable", config: "config", currentLang: "currentLang", customValues: "customValues", cypressTag: "cypressTag", hasError: "hasError", iconLeft: "iconLeft", isDisabled: "isDisabled", isReadonly: "isReadonly", items: "items", label: "label", multiple: "multiple", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n (click)=\"toggleDropdown()\">\n <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n *ngIf=\"iconLeft\"></gravity-icon>\n <p class=\"hr-label {{size}}-regular value\">\n <ng-container *ngIf=\"selectedItems.length == 0\">\n {{ placeholder ? placeholder : label }}\n </ng-container>\n <ng-container *ngIf=\"selectedItems.length > 0\">\n <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n </ng-container>\n </ng-container>\n </p>\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n *ngIf=\"!isReadonly\"></gravity-icon>\n <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n [attr.data-cy]=\"cypressTag + '_panel'\">\n <div class=\"search-input\">\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n </div>\n <div class=\"items\">\n <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n <gravity-checkbox [checked]=\"checkIfSelected(item)\" *ngIf=\"multiple\">\n {{ config ? item[config.label] : item }}\n </gravity-checkbox>\n <ng-container *ngIf=\"!multiple\">{{ config ? item[config.label] : item }}</ng-container>\n </div>\n <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n </div>\n </div>\n <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n [attr.data-cy]=\"cypressTag + '_clear'\">\n {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n </p>\n <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n </p>\n </div>\n </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n</p>\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}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.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);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--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:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.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{--text-field-input-field-width: 416px}.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)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--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-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.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)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--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)}.gravity-input-field.readonly{cursor:initial;--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)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;overflow:auto;padding:var(--dropdown-items-padding-top) 12px}.dropdown-panel .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px}.dropdown-panel .items .item:hover:not(.no-results),.dropdown-panel .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field{padding-left:calc(var(--span-checkmark-width) + var(--span-checkmark-margin))}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--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.error{--text-field-supporting-text-color: var(--negative-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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["checked", "disabled", "name", "size", "value"], outputs: ["change"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { clearable: "clearable", config: "config", currentLang: "currentLang", customValues: "customValues", cypressTag: "cypressTag", hasError: "hasError", iconLeft: "iconLeft", isDisabled: "isDisabled", isReadonly: "isReadonly", items: "items", label: "label", multiple: "multiple", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n (click)=\"toggleDropdown()\">\n <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n *ngIf=\"iconLeft\"></gravity-icon>\n <p class=\"hr-label {{size}}-regular value\">\n <ng-container *ngIf=\"selectedItems.length == 0\">\n {{ placeholder ? placeholder : label }}\n </ng-container>\n <ng-container *ngIf=\"selectedItems.length > 0\">\n <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n </ng-container>\n </ng-container>\n </p>\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n *ngIf=\"!isReadonly\"></gravity-icon>\n <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n [attr.data-cy]=\"cypressTag + '_panel'\">\n <div class=\"search-input\">\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n </div>\n <div class=\"items\">\n <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n <gravity-checkbox [checked]=\"checkIfSelected(item)\" *ngIf=\"multiple\">\n {{ config ? item[config.label] : item }}\n </gravity-checkbox>\n <ng-container *ngIf=\"!multiple\">{{ config ? item[config.label] : item }}</ng-container>\n </div>\n <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n </div>\n </div>\n <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n [attr.data-cy]=\"cypressTag + '_clear'\">\n {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n </p>\n <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n </p>\n </div>\n </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n</p>\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}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.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);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--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:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.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{--text-field-input-field-width: 416px}.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)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--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-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.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)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--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)}.gravity-input-field.readonly{cursor:initial;--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)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;overflow:auto;padding:var(--dropdown-items-padding-top) 12px}.dropdown-panel .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px}.dropdown-panel .items .item:hover:not(.no-results),.dropdown-panel .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field{padding-left:calc(var(--span-checkmark-width) + var(--span-checkmark-margin))}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--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.error{--text-field-supporting-text-color: var(--negative-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: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["checked", "disabled", "name", "size", "value"], outputs: ["change"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
379
384
|
}
|
|
380
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
|
|
381
386
|
type: Component,
|
|
@@ -543,7 +548,7 @@ class GravityTextFieldComponent {
|
|
|
543
548
|
}
|
|
544
549
|
}
|
|
545
550
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
546
|
-
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", 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\"\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{--text-field-input-field-width: 398px}.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{--text-field-input-field-width: 416px}.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"] }] }); }
|
|
551
|
+
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", 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\"\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{--text-field-input-field-width: 398px}.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{--text-field-input-field-width: 416px}.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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
547
552
|
}
|
|
548
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
549
554
|
type: Component,
|
|
@@ -761,7 +766,7 @@ class GravityTooltipComponent {
|
|
|
761
766
|
this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
|
|
762
767
|
}
|
|
763
768
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
764
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTooltipComponent, selector: "tooltip", inputs: { data: "data", show: "show" }, host: { listeners: { "transitionend": "transitionEnd($event)" }, properties: { "style.top": "this.hostStyleTop", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" }, classAttribute: "tooltip" }, ngImport: i0, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"], dependencies: [{ kind: "directive", type:
|
|
769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTooltipComponent, selector: "tooltip", inputs: { data: "data", show: "show" }, host: { listeners: { "transitionend": "transitionEnd($event)" }, properties: { "style.top": "this.hostStyleTop", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" }, classAttribute: "tooltip" }, ngImport: i0, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
765
770
|
}
|
|
766
771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTooltipComponent, decorators: [{
|
|
767
772
|
type: Component,
|
|
@@ -1403,7 +1408,7 @@ class GravityCalendarComponent {
|
|
|
1403
1408
|
return '.gravity-calendar-field[elementId="' + this.elementId + '"]';
|
|
1404
1409
|
}
|
|
1405
1410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { calendarType: "calendarType", currentLang: "currentLang", cypressTag: "cypressTag", datesConfig: "datesConfig", label: "label", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state != 'enabled' ? true : null\"\n\n [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n class=\"hr-label md-regular\"\n bsDatepicker\n placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n [bsConfig]=\"bsDatepickerConfig\"\n [container]=\"getBsDatepickerContainer()\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\">\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\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);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.5rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--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-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-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-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$
|
|
1411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { calendarType: "calendarType", currentLang: "currentLang", cypressTag: "cypressTag", datesConfig: "datesConfig", label: "label", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state != 'enabled' ? true : null\"\n\n [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n class=\"hr-label md-regular\"\n bsDatepicker\n placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n [bsConfig]=\"bsDatepickerConfig\"\n [container]=\"getBsDatepickerContainer()\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\">\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\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);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.5rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--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-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-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-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$2.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i1$2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1407
1412
|
}
|
|
1408
1413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, decorators: [{
|
|
1409
1414
|
type: Component,
|
|
@@ -1431,6 +1436,2396 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1431
1436
|
type: Input
|
|
1432
1437
|
}] } });
|
|
1433
1438
|
|
|
1439
|
+
/**
|
|
1440
|
+
* For date range picker there are `BsDaterangepickerConfig` which inherits all properties,
|
|
1441
|
+
* except `displayMonths`, for range picker it default to `2`
|
|
1442
|
+
*/
|
|
1443
|
+
class BsDatepickerConfig {
|
|
1444
|
+
constructor() {
|
|
1445
|
+
/** Sets use adaptive position */
|
|
1446
|
+
this.adaptivePosition = true;
|
|
1447
|
+
this.calendarLang = 'en';
|
|
1448
|
+
this.calendarSize = 'md';
|
|
1449
|
+
this.clearable = true;
|
|
1450
|
+
this.displayMonths = 1;
|
|
1451
|
+
/** turn on/off animation */
|
|
1452
|
+
this.isAnimated = false;
|
|
1453
|
+
this.isMobile = false;
|
|
1454
|
+
/**
|
|
1455
|
+
* Set rule for datepicker closing.
|
|
1456
|
+
* If value is true datepicker closes only if date is changed, if user changes only time datepicker doesn't close.
|
|
1457
|
+
* It is available only if property withTimepicker is set true
|
|
1458
|
+
*/
|
|
1459
|
+
this.keepDatepickerOpened = false;
|
|
1460
|
+
/** Prevents change to next month for right calendar in two calendars view (dateRangePicker only) */
|
|
1461
|
+
this.preventChangeToNextMonth = true;
|
|
1462
|
+
/** Makes dates from other months active */
|
|
1463
|
+
this.selectFromOtherMonth = true;
|
|
1464
|
+
/** The view that the datepicker should start in */
|
|
1465
|
+
this.startView = 'day';
|
|
1466
|
+
// DatepickerFormatOptions
|
|
1467
|
+
this.dayLabel = 'D';
|
|
1468
|
+
this.monthLabel = 'MMMM';
|
|
1469
|
+
this.monthTitle = 'MMMM';
|
|
1470
|
+
this.yearLabel = 'YYYY';
|
|
1471
|
+
this.yearTitle = 'YYYY';
|
|
1472
|
+
}
|
|
1473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1474
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerConfig, providedIn: 'root' }); }
|
|
1475
|
+
}
|
|
1476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerConfig, decorators: [{
|
|
1477
|
+
type: Injectable,
|
|
1478
|
+
args: [{
|
|
1479
|
+
providedIn: 'root'
|
|
1480
|
+
}]
|
|
1481
|
+
}] });
|
|
1482
|
+
|
|
1483
|
+
const DATEPICKER_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
|
|
1484
|
+
const datepickerAnimation = trigger('datepickerAnimation', [
|
|
1485
|
+
state('animated-down', style({ height: '*', overflow: 'hidden' })),
|
|
1486
|
+
transition('* => animated-down', [
|
|
1487
|
+
style({ height: 0, overflow: 'hidden' }),
|
|
1488
|
+
animate(DATEPICKER_ANIMATION_TIMING)
|
|
1489
|
+
]),
|
|
1490
|
+
state('animated-up', style({ height: '*', overflow: 'hidden' })),
|
|
1491
|
+
transition('* => animated-up', [
|
|
1492
|
+
style({ height: '*', overflow: 'hidden' }),
|
|
1493
|
+
animate(DATEPICKER_ANIMATION_TIMING)
|
|
1494
|
+
]),
|
|
1495
|
+
transition('* => unanimated', animate('0s'))
|
|
1496
|
+
]);
|
|
1497
|
+
|
|
1498
|
+
class BsDatepickerAbstractComponent {
|
|
1499
|
+
get calendarSize() {
|
|
1500
|
+
if (!this._config.isMobile && (!this.isRangePicker || this._config.displayMonths == 1)) {
|
|
1501
|
+
return this._config.calendarSize;
|
|
1502
|
+
}
|
|
1503
|
+
else {
|
|
1504
|
+
return 'sm';
|
|
1505
|
+
}
|
|
1506
|
+
}
|
|
1507
|
+
get daysCalendar$() {
|
|
1508
|
+
return this._daysCalendar$;
|
|
1509
|
+
}
|
|
1510
|
+
get isDisabled() {
|
|
1511
|
+
return !!this._config.isDisabled;
|
|
1512
|
+
}
|
|
1513
|
+
get isEmpty() {
|
|
1514
|
+
return !this._config.value;
|
|
1515
|
+
}
|
|
1516
|
+
get showNavigationArrows() {
|
|
1517
|
+
return !this.isRangePicker || (this.isRangePicker && this._config.displayMonths == 1);
|
|
1518
|
+
}
|
|
1519
|
+
set daysCalendar$(value) {
|
|
1520
|
+
this._daysCalendar$ = value;
|
|
1521
|
+
this._daysCalendarSub.unsubscribe();
|
|
1522
|
+
}
|
|
1523
|
+
set isDisabled(value) {
|
|
1524
|
+
this._effects?.setDisabled(value);
|
|
1525
|
+
}
|
|
1526
|
+
set maxDate(value) {
|
|
1527
|
+
this._effects?.setMaxDate(value);
|
|
1528
|
+
}
|
|
1529
|
+
set minDate(value) {
|
|
1530
|
+
this._effects?.setMinDate(value);
|
|
1531
|
+
}
|
|
1532
|
+
constructor(_config) {
|
|
1533
|
+
this._config = _config;
|
|
1534
|
+
this._subs = [];
|
|
1535
|
+
this._daysCalendarSub = new Subscription();
|
|
1536
|
+
this.animationState = 'void';
|
|
1537
|
+
this.chosenRange = [];
|
|
1538
|
+
}
|
|
1539
|
+
setViewMode(event) {
|
|
1540
|
+
}
|
|
1541
|
+
navigateTo(event) {
|
|
1542
|
+
}
|
|
1543
|
+
dayHoverHandler(event) {
|
|
1544
|
+
}
|
|
1545
|
+
monthHoverHandler(event) {
|
|
1546
|
+
}
|
|
1547
|
+
yearHoverHandler(event) {
|
|
1548
|
+
}
|
|
1549
|
+
daySelectHandler(day) {
|
|
1550
|
+
}
|
|
1551
|
+
monthSelectHandler(event) {
|
|
1552
|
+
}
|
|
1553
|
+
yearSelectHandler(event) {
|
|
1554
|
+
}
|
|
1555
|
+
setRangeOnCalendar(dates) {
|
|
1556
|
+
}
|
|
1557
|
+
clearDate() {
|
|
1558
|
+
}
|
|
1559
|
+
apply() {
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
class BsDatepickerActions {
|
|
1564
|
+
static { this.CALCULATE = '[datepicker] calculate dates matrix'; }
|
|
1565
|
+
static { this.CHANGE_VIEWMODE = '[datepicker] switch view mode'; }
|
|
1566
|
+
static { this.FLAG = '[datepicker] set flags'; }
|
|
1567
|
+
static { this.FORMAT = '[datepicker] format datepicker values'; }
|
|
1568
|
+
static { this.HOVER = '[datepicker] hover date'; }
|
|
1569
|
+
static { this.NAVIGATE_OFFSET = '[datepicker] shift view date'; }
|
|
1570
|
+
static { this.NAVIGATE_TO = '[datepicker] change view date'; }
|
|
1571
|
+
static { this.SELECT = '[datepicker] select date'; }
|
|
1572
|
+
static { this.SELECT_RANGE = '[daterangepicker] select dates range'; }
|
|
1573
|
+
static { this.SET_IS_DISABLED = '[datepicker] set is disabled'; }
|
|
1574
|
+
static { this.SET_MAX_DATE = '[datepicker] set max date'; }
|
|
1575
|
+
static { this.SET_MIN_DATE = '[datepicker] set min date'; }
|
|
1576
|
+
static { this.SET_OPTIONS = '[datepicker] update render options'; }
|
|
1577
|
+
calculate() {
|
|
1578
|
+
return { type: BsDatepickerActions.CALCULATE };
|
|
1579
|
+
}
|
|
1580
|
+
format() {
|
|
1581
|
+
return { type: BsDatepickerActions.FORMAT };
|
|
1582
|
+
}
|
|
1583
|
+
flag() {
|
|
1584
|
+
return { type: BsDatepickerActions.FLAG };
|
|
1585
|
+
}
|
|
1586
|
+
select(date) {
|
|
1587
|
+
return { type: BsDatepickerActions.SELECT, payload: date };
|
|
1588
|
+
}
|
|
1589
|
+
changeViewMode(event) {
|
|
1590
|
+
return { type: BsDatepickerActions.CHANGE_VIEWMODE, payload: event };
|
|
1591
|
+
}
|
|
1592
|
+
navigateTo(event) {
|
|
1593
|
+
return { type: BsDatepickerActions.NAVIGATE_TO, payload: event };
|
|
1594
|
+
}
|
|
1595
|
+
navigateStep(step) {
|
|
1596
|
+
return { type: BsDatepickerActions.NAVIGATE_OFFSET, payload: step };
|
|
1597
|
+
}
|
|
1598
|
+
setOptions(options) {
|
|
1599
|
+
return { type: BsDatepickerActions.SET_OPTIONS, payload: options };
|
|
1600
|
+
}
|
|
1601
|
+
// date range picker
|
|
1602
|
+
selectRange(value) {
|
|
1603
|
+
return { type: BsDatepickerActions.SELECT_RANGE, payload: value };
|
|
1604
|
+
}
|
|
1605
|
+
hoverDay(event) {
|
|
1606
|
+
return { type: BsDatepickerActions.HOVER, payload: event.isHovered ? event.cell.date : null };
|
|
1607
|
+
}
|
|
1608
|
+
minDate(date) {
|
|
1609
|
+
return { type: BsDatepickerActions.SET_MIN_DATE, payload: date };
|
|
1610
|
+
}
|
|
1611
|
+
maxDate(date) {
|
|
1612
|
+
return { type: BsDatepickerActions.SET_MAX_DATE, payload: date };
|
|
1613
|
+
}
|
|
1614
|
+
isDisabled(value) {
|
|
1615
|
+
return { type: BsDatepickerActions.SET_IS_DISABLED, payload: value };
|
|
1616
|
+
}
|
|
1617
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1618
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerActions, providedIn: 'platform' }); }
|
|
1619
|
+
}
|
|
1620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerActions, decorators: [{
|
|
1621
|
+
type: Injectable,
|
|
1622
|
+
args: [{ providedIn: 'platform' }]
|
|
1623
|
+
}] });
|
|
1624
|
+
|
|
1625
|
+
class BsDatepickerEffects {
|
|
1626
|
+
constructor(_actions) {
|
|
1627
|
+
this._actions = _actions;
|
|
1628
|
+
this._subs = [];
|
|
1629
|
+
}
|
|
1630
|
+
init(_bsDatepickerStore) {
|
|
1631
|
+
this._store = _bsDatepickerStore;
|
|
1632
|
+
return this;
|
|
1633
|
+
}
|
|
1634
|
+
/** setters */
|
|
1635
|
+
setValue(value) {
|
|
1636
|
+
this._store?.dispatch(this._actions.select(value));
|
|
1637
|
+
}
|
|
1638
|
+
setRangeValue(value) {
|
|
1639
|
+
this._store?.dispatch(this._actions.selectRange(value));
|
|
1640
|
+
}
|
|
1641
|
+
setMinDate(value) {
|
|
1642
|
+
this._store?.dispatch(this._actions.minDate(value));
|
|
1643
|
+
return this;
|
|
1644
|
+
}
|
|
1645
|
+
setMaxDate(value) {
|
|
1646
|
+
this._store?.dispatch(this._actions.maxDate(value));
|
|
1647
|
+
return this;
|
|
1648
|
+
}
|
|
1649
|
+
setDisabled(value) {
|
|
1650
|
+
this._store?.dispatch(this._actions.isDisabled(value));
|
|
1651
|
+
return this;
|
|
1652
|
+
}
|
|
1653
|
+
/* Set rendering options */
|
|
1654
|
+
setOptions(_config) {
|
|
1655
|
+
const _options = Object.assign({ locale: 'en' }, _config);
|
|
1656
|
+
this._store?.dispatch(this._actions.setOptions(_options));
|
|
1657
|
+
return this;
|
|
1658
|
+
}
|
|
1659
|
+
/** view to mode bindings */
|
|
1660
|
+
setBindings(container) {
|
|
1661
|
+
if (!this._store)
|
|
1662
|
+
return this;
|
|
1663
|
+
container.daysCalendar$ = this._store.select(state => state.flaggedMonths).pipe(filter(months => !!months));
|
|
1664
|
+
container.monthsCalendar = this._store.select(state => state.flaggedMonthsCalendar).pipe(filter(months => !!months));
|
|
1665
|
+
container.yearsCalendar = this._store.select(state => state.yearsCalendarFlagged).pipe(filter(years => !!years));
|
|
1666
|
+
container.viewMode = this._store.select(state => state.view?.mode);
|
|
1667
|
+
container.options$ = combineLatest([this._store.select(state => state.displayMonths)]).pipe(map((latest) => ({ displayMonths: latest[0] })));
|
|
1668
|
+
return this;
|
|
1669
|
+
}
|
|
1670
|
+
/** event handlers */
|
|
1671
|
+
setEventHandlers(container) {
|
|
1672
|
+
container.setViewMode = (event) => {
|
|
1673
|
+
this._store?.dispatch(this._actions.changeViewMode(event));
|
|
1674
|
+
};
|
|
1675
|
+
container.navigateTo = (event) => {
|
|
1676
|
+
this._store?.dispatch(this._actions.navigateStep(event.step));
|
|
1677
|
+
};
|
|
1678
|
+
container.dayHoverHandler = (event) => {
|
|
1679
|
+
const _cell = event.cell;
|
|
1680
|
+
if (_cell.isOtherMonth || _cell.isDisabled)
|
|
1681
|
+
return;
|
|
1682
|
+
this._store?.dispatch(this._actions.hoverDay(event));
|
|
1683
|
+
_cell.isHovered = event.isHovered;
|
|
1684
|
+
};
|
|
1685
|
+
container.monthHoverHandler = (event) => {
|
|
1686
|
+
event.cell.isHovered = event.isHovered;
|
|
1687
|
+
};
|
|
1688
|
+
container.yearHoverHandler = (event) => {
|
|
1689
|
+
event.cell.isHovered = event.isHovered;
|
|
1690
|
+
};
|
|
1691
|
+
return this;
|
|
1692
|
+
}
|
|
1693
|
+
registerDatepickerSideEffects() {
|
|
1694
|
+
if (!this._store)
|
|
1695
|
+
return this;
|
|
1696
|
+
this._subs.push(this._store.select(state => state.view).subscribe(() => {
|
|
1697
|
+
this._store?.dispatch(this._actions.calculate());
|
|
1698
|
+
}));
|
|
1699
|
+
// format calendar values on month model change
|
|
1700
|
+
this._subs.push(this._store
|
|
1701
|
+
.select(state => state.monthsModel)
|
|
1702
|
+
.pipe(filter(monthModel => !!monthModel))
|
|
1703
|
+
.subscribe(() => this._store?.dispatch(this._actions.format())));
|
|
1704
|
+
// flag day values
|
|
1705
|
+
this._subs.push(this._store
|
|
1706
|
+
.select(state => state.formattedMonths)
|
|
1707
|
+
.pipe(filter(month => !!month))
|
|
1708
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1709
|
+
// flag day values
|
|
1710
|
+
this._subs.push(this._store
|
|
1711
|
+
.select(state => state.selectedDate)
|
|
1712
|
+
.pipe(filter(selectedDate => !!selectedDate))
|
|
1713
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1714
|
+
// flag for date range picker
|
|
1715
|
+
this._subs.push(this._store
|
|
1716
|
+
.select(state => state.selectedRange)
|
|
1717
|
+
.pipe(filter(selectedRange => !!selectedRange))
|
|
1718
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1719
|
+
// monthsCalendar
|
|
1720
|
+
this._subs.push(this._store
|
|
1721
|
+
.select(state => state.monthsCalendar)
|
|
1722
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1723
|
+
// years calendar
|
|
1724
|
+
this._subs.push(this._store
|
|
1725
|
+
.select(state => state.yearsCalendarModel)
|
|
1726
|
+
.pipe(filter(state => !!state))
|
|
1727
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1728
|
+
// on hover
|
|
1729
|
+
this._subs.push(this._store
|
|
1730
|
+
.select(state => state.hoveredDate)
|
|
1731
|
+
.pipe(filter(hoveredDate => !!hoveredDate))
|
|
1732
|
+
.subscribe(() => this._store?.dispatch(this._actions.flag())));
|
|
1733
|
+
return this;
|
|
1734
|
+
}
|
|
1735
|
+
destroy() {
|
|
1736
|
+
for (const sub of this._subs) {
|
|
1737
|
+
sub.unsubscribe();
|
|
1738
|
+
}
|
|
1739
|
+
}
|
|
1740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerEffects, deps: [{ token: BsDatepickerActions }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1741
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerEffects, providedIn: 'platform' }); }
|
|
1742
|
+
}
|
|
1743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerEffects, decorators: [{
|
|
1744
|
+
type: Injectable,
|
|
1745
|
+
args: [{ providedIn: 'platform' }]
|
|
1746
|
+
}], ctorParameters: function () { return [{ type: BsDatepickerActions }]; } });
|
|
1747
|
+
|
|
1748
|
+
const defaultMonthOptions = {
|
|
1749
|
+
width: 7,
|
|
1750
|
+
height: 6
|
|
1751
|
+
};
|
|
1752
|
+
const dayInMilliseconds = 24 * 60 * 60 * 1000;
|
|
1753
|
+
|
|
1754
|
+
class BsDatepickerState {
|
|
1755
|
+
constructor() {
|
|
1756
|
+
// DatepickerRenderOptions
|
|
1757
|
+
this.displayMonths = 1;
|
|
1758
|
+
}
|
|
1759
|
+
}
|
|
1760
|
+
const _initialView = { date: new Date(), mode: 'day' };
|
|
1761
|
+
const initialDatepickerState = Object.assign(new BsDatepickerConfig(), {
|
|
1762
|
+
locale: 'en',
|
|
1763
|
+
view: _initialView,
|
|
1764
|
+
selectedRange: [],
|
|
1765
|
+
monthViewOptions: defaultMonthOptions
|
|
1766
|
+
});
|
|
1767
|
+
|
|
1768
|
+
function getStartingDayOfCalendar(date, options) {
|
|
1769
|
+
if (isFirstDayOfWeek(date, options.firstDayOfWeek))
|
|
1770
|
+
return date;
|
|
1771
|
+
const weekDay = getDay(date);
|
|
1772
|
+
const offset = calculateDateOffset(weekDay, options.firstDayOfWeek);
|
|
1773
|
+
return shiftDate(date, { day: -offset });
|
|
1774
|
+
}
|
|
1775
|
+
function calculateDateOffset(weekday, startingDayOffset) {
|
|
1776
|
+
const _startingDayOffset = Number(startingDayOffset);
|
|
1777
|
+
if (isNaN(_startingDayOffset))
|
|
1778
|
+
return 0;
|
|
1779
|
+
if (_startingDayOffset === 0)
|
|
1780
|
+
return weekday;
|
|
1781
|
+
const offset = weekday - _startingDayOffset % 7;
|
|
1782
|
+
return offset < 0 ? offset + 7 : offset;
|
|
1783
|
+
}
|
|
1784
|
+
function isMonthDisabled(date, min, max) {
|
|
1785
|
+
const minBound = min && isBefore(endOf(date, 'month'), min, 'day');
|
|
1786
|
+
const maxBound = max && isAfter(startOf(date, 'month'), max, 'day');
|
|
1787
|
+
return minBound || maxBound;
|
|
1788
|
+
}
|
|
1789
|
+
function isYearDisabled(date, min, max) {
|
|
1790
|
+
const minBound = min && isBefore(endOf(date, 'year'), min, 'day');
|
|
1791
|
+
const maxBound = max && isAfter(startOf(date, 'year'), max, 'day');
|
|
1792
|
+
return minBound || maxBound;
|
|
1793
|
+
}
|
|
1794
|
+
function getYearsCalendarInitialDate(state, calendarIndex = 0) {
|
|
1795
|
+
const model = state && state.yearsCalendarModel && state.yearsCalendarModel[calendarIndex];
|
|
1796
|
+
return model?.years[0] && model.years[0][0] && model.years[0][0].date;
|
|
1797
|
+
}
|
|
1798
|
+
function checkRangesWithMaxDate(ranges, maxDate) {
|
|
1799
|
+
if (!ranges)
|
|
1800
|
+
return ranges;
|
|
1801
|
+
if (!maxDate)
|
|
1802
|
+
return ranges;
|
|
1803
|
+
if (!ranges.length && !ranges[0].value)
|
|
1804
|
+
return ranges;
|
|
1805
|
+
ranges.forEach((item) => {
|
|
1806
|
+
if (!item || !item.value)
|
|
1807
|
+
return ranges;
|
|
1808
|
+
if (item.value instanceof Date)
|
|
1809
|
+
return ranges;
|
|
1810
|
+
if (!(item.value instanceof Array && item.value.length))
|
|
1811
|
+
return ranges;
|
|
1812
|
+
item.value = compareDateWithMaxDateHelper(item.value, maxDate);
|
|
1813
|
+
return ranges;
|
|
1814
|
+
});
|
|
1815
|
+
return ranges;
|
|
1816
|
+
}
|
|
1817
|
+
function checkBsValue(date, maxDate) {
|
|
1818
|
+
if (!date)
|
|
1819
|
+
return date;
|
|
1820
|
+
if (!maxDate)
|
|
1821
|
+
return date;
|
|
1822
|
+
if (date instanceof Array && !date.length)
|
|
1823
|
+
return date;
|
|
1824
|
+
if (date instanceof Date)
|
|
1825
|
+
return date;
|
|
1826
|
+
return compareDateWithMaxDateHelper(date, maxDate);
|
|
1827
|
+
}
|
|
1828
|
+
function compareDateWithMaxDateHelper(date, maxDate) {
|
|
1829
|
+
if (date instanceof Array) {
|
|
1830
|
+
return date.map(item => {
|
|
1831
|
+
if (!item)
|
|
1832
|
+
return item;
|
|
1833
|
+
if (isAfter(item, maxDate, 'date'))
|
|
1834
|
+
item = maxDate;
|
|
1835
|
+
return item;
|
|
1836
|
+
});
|
|
1837
|
+
}
|
|
1838
|
+
return date;
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
function createMatrix(options, fn) {
|
|
1842
|
+
let prevValue = options.initialDate;
|
|
1843
|
+
const matrix = new Array(options.height);
|
|
1844
|
+
for (let i = 0; i < options.height; i++) {
|
|
1845
|
+
matrix[i] = new Array(options.width);
|
|
1846
|
+
for (let j = 0; j < options.width; j++) {
|
|
1847
|
+
matrix[i][j] = fn(prevValue);
|
|
1848
|
+
prevValue = shiftDate(prevValue, options.shift);
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
return matrix;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
function calcDaysCalendar(startingDate, options) {
|
|
1855
|
+
const firstDay = getFirstDayOfMonth(startingDate);
|
|
1856
|
+
const initialDate = getStartingDayOfCalendar(firstDay, options);
|
|
1857
|
+
const matrixOptions = {
|
|
1858
|
+
width: options.width || 0,
|
|
1859
|
+
height: options.height || 0,
|
|
1860
|
+
initialDate,
|
|
1861
|
+
shift: { day: 1 }
|
|
1862
|
+
};
|
|
1863
|
+
const daysMatrix = createMatrix(matrixOptions, (date) => date);
|
|
1864
|
+
return { daysMatrix, month: firstDay };
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
function formatDaysCalendar(daysCalendar, formatOptions, monthIndex) {
|
|
1868
|
+
return {
|
|
1869
|
+
month: daysCalendar.month,
|
|
1870
|
+
monthTitle: formatDate(daysCalendar.month, formatOptions.monthTitle, formatOptions.locale),
|
|
1871
|
+
yearTitle: formatDate(daysCalendar.month, formatOptions.yearTitle, formatOptions.locale),
|
|
1872
|
+
weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
|
1873
|
+
weeks: daysCalendar.daysMatrix.map((week, weekIndex) => ({
|
|
1874
|
+
days: week.map((date, dayIndex) => ({
|
|
1875
|
+
date,
|
|
1876
|
+
label: formatDate(date, formatOptions.dayLabel, formatOptions.locale),
|
|
1877
|
+
monthIndex,
|
|
1878
|
+
weekIndex,
|
|
1879
|
+
dayIndex
|
|
1880
|
+
}))
|
|
1881
|
+
})),
|
|
1882
|
+
hideLeftArrow: false,
|
|
1883
|
+
hideRightArrow: false,
|
|
1884
|
+
disableLeftArrow: false,
|
|
1885
|
+
disableRightArrow: false
|
|
1886
|
+
};
|
|
1887
|
+
}
|
|
1888
|
+
|
|
1889
|
+
function flagDaysCalendar(formattedMonth, options) {
|
|
1890
|
+
formattedMonth.weeks.forEach((week) => {
|
|
1891
|
+
week.days.forEach((day, dayIndex) => {
|
|
1892
|
+
// datepicker
|
|
1893
|
+
const isOtherMonth = !isSameMonth(day.date, formattedMonth.month);
|
|
1894
|
+
const isHovered = !isOtherMonth && isSameDay(day.date, options.hoveredDate);
|
|
1895
|
+
// date range picker
|
|
1896
|
+
const isSelectionStart = !isOtherMonth && options.selectedRange && isSameDay(day.date, options.selectedRange[0]);
|
|
1897
|
+
const isSelectionEnd = !isOtherMonth && options.selectedRange && isSameDay(day.date, options.selectedRange[1]);
|
|
1898
|
+
const isSelected = (!isOtherMonth && isSameDay(day.date, options.selectedDate)) || isSelectionStart || isSelectionEnd;
|
|
1899
|
+
const isInRange = !isOtherMonth && !!options.selectedRange && isDateInRange(day.date, options.selectedRange, options.hoveredDate);
|
|
1900
|
+
const isDisabled = options.isDisabled || isBefore(day.date, options.minDate, 'day') || isAfter(day.date, options.maxDate, 'day');
|
|
1901
|
+
const isToday = !isOtherMonth && isSameDay(day.date, new Date());
|
|
1902
|
+
// decide update or not
|
|
1903
|
+
const newDay = Object.assign({}, day, {
|
|
1904
|
+
isOtherMonth,
|
|
1905
|
+
isHovered,
|
|
1906
|
+
isSelected,
|
|
1907
|
+
isSelectionStart,
|
|
1908
|
+
isSelectionEnd,
|
|
1909
|
+
isInRange,
|
|
1910
|
+
isDisabled,
|
|
1911
|
+
isToday
|
|
1912
|
+
});
|
|
1913
|
+
if (day.isOtherMonth !== newDay.isOtherMonth ||
|
|
1914
|
+
day.isHovered !== newDay.isHovered ||
|
|
1915
|
+
day.isSelected !== newDay.isSelected ||
|
|
1916
|
+
day.isSelectionStart !== newDay.isSelectionStart ||
|
|
1917
|
+
day.isSelectionEnd !== newDay.isSelectionEnd ||
|
|
1918
|
+
day.isDisabled !== newDay.isDisabled ||
|
|
1919
|
+
day.isInRange !== newDay.isInRange) {
|
|
1920
|
+
week.days[dayIndex] = newDay;
|
|
1921
|
+
}
|
|
1922
|
+
});
|
|
1923
|
+
});
|
|
1924
|
+
formattedMonth.hideLeftArrow = options.isDisabled || (!!options.monthIndex && options.monthIndex > 0 && options.monthIndex !== options.displayMonths);
|
|
1925
|
+
formattedMonth.hideRightArrow = options.isDisabled || ((!!options.monthIndex || options.monthIndex === 0) && !!options.displayMonths && options.monthIndex < options.displayMonths && options.monthIndex + 1 !== options.displayMonths);
|
|
1926
|
+
formattedMonth.disableLeftArrow = isMonthDisabled(shiftDate(formattedMonth.month, { month: -1 }), options.minDate, options.maxDate);
|
|
1927
|
+
formattedMonth.disableRightArrow = isMonthDisabled(shiftDate(formattedMonth.month, { month: 1 }), options.minDate, options.maxDate);
|
|
1928
|
+
return formattedMonth;
|
|
1929
|
+
}
|
|
1930
|
+
function isDateInRange(date, selectedRange, hoveredDate) {
|
|
1931
|
+
if (!date || !selectedRange || !selectedRange[0])
|
|
1932
|
+
return false;
|
|
1933
|
+
if (selectedRange[1])
|
|
1934
|
+
return date > selectedRange[0] && date <= selectedRange[1];
|
|
1935
|
+
if (hoveredDate)
|
|
1936
|
+
return date > selectedRange[0] && date <= hoveredDate;
|
|
1937
|
+
return false;
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
function canSwitchMode(mode, minMode) {
|
|
1941
|
+
return minMode ? mode >= minMode : true;
|
|
1942
|
+
}
|
|
1943
|
+
|
|
1944
|
+
const height$1 = 4;
|
|
1945
|
+
const width$1 = 3;
|
|
1946
|
+
const shift$1 = { month: 1 };
|
|
1947
|
+
function formatMonthsCalendar(viewDate, formatOptions) {
|
|
1948
|
+
const initialDate = startOf(viewDate, 'year');
|
|
1949
|
+
const matrixOptions = { width: width$1, height: height$1, initialDate, shift: shift$1 };
|
|
1950
|
+
const monthMatrix = createMatrix(matrixOptions, (date) => ({
|
|
1951
|
+
date,
|
|
1952
|
+
label: formatDate(date, formatOptions.monthLabel, formatOptions.locale)
|
|
1953
|
+
}));
|
|
1954
|
+
return {
|
|
1955
|
+
months: monthMatrix,
|
|
1956
|
+
monthTitle: '',
|
|
1957
|
+
yearTitle: formatDate(viewDate, formatOptions.yearTitle, formatOptions.locale),
|
|
1958
|
+
hideRightArrow: false,
|
|
1959
|
+
hideLeftArrow: false,
|
|
1960
|
+
disableRightArrow: false,
|
|
1961
|
+
disableLeftArrow: false
|
|
1962
|
+
};
|
|
1963
|
+
}
|
|
1964
|
+
|
|
1965
|
+
function flagMonthsCalendar(monthCalendar, options) {
|
|
1966
|
+
monthCalendar.months.forEach((months, rowIndex) => {
|
|
1967
|
+
months.forEach((month, monthIndex) => {
|
|
1968
|
+
const isHovered = isSameMonth(month.date, options.hoveredMonth);
|
|
1969
|
+
const isToday = isSameMonth(month.date, new Date());
|
|
1970
|
+
const isDisabled = options.isDisabled || isMonthDisabled(month.date, options.minDate, options.maxDate);
|
|
1971
|
+
let isSelected;
|
|
1972
|
+
if (!options.selectedDate && options.selectedRange) {
|
|
1973
|
+
isSelected = isSameMonth(month.date, options.selectedRange[0]);
|
|
1974
|
+
if (!isSelected) {
|
|
1975
|
+
isSelected = isSameMonth(month.date, options.selectedRange[1]);
|
|
1976
|
+
}
|
|
1977
|
+
}
|
|
1978
|
+
else {
|
|
1979
|
+
isSelected = isSameMonth(month.date, options.selectedDate);
|
|
1980
|
+
}
|
|
1981
|
+
const newMonth = Object.assign(month, {
|
|
1982
|
+
isHovered,
|
|
1983
|
+
isToday,
|
|
1984
|
+
isDisabled,
|
|
1985
|
+
isSelected
|
|
1986
|
+
});
|
|
1987
|
+
if (month.isHovered !== newMonth.isHovered ||
|
|
1988
|
+
month.isToday !== newMonth.isToday ||
|
|
1989
|
+
month.isDisabled !== newMonth.isDisabled ||
|
|
1990
|
+
month.isSelected !== newMonth.isSelected) {
|
|
1991
|
+
monthCalendar.months[rowIndex][monthIndex] = newMonth;
|
|
1992
|
+
}
|
|
1993
|
+
});
|
|
1994
|
+
});
|
|
1995
|
+
monthCalendar.hideLeftArrow = !!options.monthIndex && options.monthIndex > 0 && options.monthIndex !== options.displayMonths;
|
|
1996
|
+
monthCalendar.hideRightArrow = (!!options.monthIndex || options.monthIndex === 0) && (!!options.displayMonths || options.displayMonths === 0) && options.monthIndex < options.displayMonths && options.monthIndex + 1 !== options.displayMonths;
|
|
1997
|
+
monthCalendar.disableLeftArrow = isYearDisabled(shiftDate(monthCalendar.months[0][0].date, { year: -1 }), options.minDate, options.maxDate);
|
|
1998
|
+
monthCalendar.disableRightArrow = isYearDisabled(shiftDate(monthCalendar.months[0][0].date, { year: 1 }), options.minDate, options.maxDate);
|
|
1999
|
+
return monthCalendar;
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
const height = 3;
|
|
2003
|
+
const width = 4;
|
|
2004
|
+
const yearsPerCalendar = height * width;
|
|
2005
|
+
const initialYearShift = (yearsPerCalendar - 1) * -1; // -1 to display current year; * -1 to show previous years
|
|
2006
|
+
const shift = { year: 1 };
|
|
2007
|
+
function formatYearsCalendar(viewDate, formatOptions, previousInitialDate, currentSelectedYear) {
|
|
2008
|
+
const initialDate = calculateInitialDate(viewDate, previousInitialDate);
|
|
2009
|
+
const matrixOptions = { width, height, initialDate, shift };
|
|
2010
|
+
const yearsMatrix = createMatrix(matrixOptions, date => ({
|
|
2011
|
+
date,
|
|
2012
|
+
label: formatDate(date, formatOptions.yearLabel, formatOptions.locale)
|
|
2013
|
+
}));
|
|
2014
|
+
let yearTitle;
|
|
2015
|
+
if (currentSelectedYear) {
|
|
2016
|
+
yearTitle = formatDate(currentSelectedYear, formatOptions.yearLabel, formatOptions.locale);
|
|
2017
|
+
}
|
|
2018
|
+
else {
|
|
2019
|
+
yearTitle = formatYearRangeTitle(yearsMatrix, formatOptions);
|
|
2020
|
+
}
|
|
2021
|
+
return {
|
|
2022
|
+
years: yearsMatrix,
|
|
2023
|
+
monthTitle: '',
|
|
2024
|
+
yearTitle,
|
|
2025
|
+
hideLeftArrow: false,
|
|
2026
|
+
hideRightArrow: false,
|
|
2027
|
+
disableLeftArrow: false,
|
|
2028
|
+
disableRightArrow: false
|
|
2029
|
+
};
|
|
2030
|
+
}
|
|
2031
|
+
function calculateInitialDate(viewDate, previousInitialDate) {
|
|
2032
|
+
if (previousInitialDate && viewDate.getFullYear() >= previousInitialDate.getFullYear() && viewDate.getFullYear() < previousInitialDate.getFullYear() + yearsPerCalendar) {
|
|
2033
|
+
return previousInitialDate;
|
|
2034
|
+
}
|
|
2035
|
+
return shiftDate(viewDate, { year: initialYearShift });
|
|
2036
|
+
}
|
|
2037
|
+
function formatYearRangeTitle(yearsMatrix, formatOptions) {
|
|
2038
|
+
const from = formatDate(yearsMatrix[0][0].date, formatOptions.yearTitle, formatOptions.locale);
|
|
2039
|
+
const to = formatDate(yearsMatrix[height - 1][width - 1].date, formatOptions.yearTitle, formatOptions.locale);
|
|
2040
|
+
return `${from} - ${to}`;
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
function flagYearsCalendar(yearsCalendar, options) {
|
|
2044
|
+
yearsCalendar.years.forEach((years, rowIndex) => {
|
|
2045
|
+
years.forEach((year, yearIndex) => {
|
|
2046
|
+
const isHovered = isSameYear(year.date, options.hoveredYear);
|
|
2047
|
+
const isToday = isSameYear(year.date, new Date());
|
|
2048
|
+
const isDisabled = options.isDisabled || isYearDisabled(year.date, options.minDate, options.maxDate);
|
|
2049
|
+
let isSelected;
|
|
2050
|
+
if (!options.selectedDate && options.selectedRange) {
|
|
2051
|
+
isSelected = isSameYear(year.date, options.selectedRange[0]);
|
|
2052
|
+
if (!isSelected) {
|
|
2053
|
+
isSelected = isSameYear(year.date, options.selectedRange[1]);
|
|
2054
|
+
}
|
|
2055
|
+
}
|
|
2056
|
+
else {
|
|
2057
|
+
isSelected = isSameYear(year.date, options.selectedDate);
|
|
2058
|
+
}
|
|
2059
|
+
const newMonth = Object.assign(year, { isHovered, isDisabled, isSelected, isToday });
|
|
2060
|
+
if (year.isHovered !== newMonth.isHovered ||
|
|
2061
|
+
year.isDisabled !== newMonth.isDisabled ||
|
|
2062
|
+
year.isToday !== newMonth.isToday ||
|
|
2063
|
+
year.isSelected !== newMonth.isSelected) {
|
|
2064
|
+
yearsCalendar.years[rowIndex][yearIndex] = newMonth;
|
|
2065
|
+
}
|
|
2066
|
+
});
|
|
2067
|
+
});
|
|
2068
|
+
yearsCalendar.hideLeftArrow = !!options.yearIndex && options.yearIndex > 0 && options.yearIndex !== options.displayMonths;
|
|
2069
|
+
yearsCalendar.hideRightArrow = !!options.yearIndex && !!options.displayMonths && options.yearIndex < options.displayMonths && options.yearIndex + 1 !== options.displayMonths;
|
|
2070
|
+
const i = yearsCalendar.years.length - 1;
|
|
2071
|
+
const j = yearsCalendar.years[i].length - 1;
|
|
2072
|
+
yearsCalendar.disableLeftArrow = isYearDisabled(shiftDate(yearsCalendar.years[0][0].date, { year: -1 }), options.minDate, options.maxDate);
|
|
2073
|
+
yearsCalendar.disableRightArrow = isYearDisabled(shiftDate(yearsCalendar.years[i][j].date, { year: 1 }), options.minDate, options.maxDate);
|
|
2074
|
+
return yearsCalendar;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
function bsDatepickerReducer(state = initialDatepickerState, action) {
|
|
2078
|
+
switch (action.type) {
|
|
2079
|
+
case BsDatepickerActions.CALCULATE: {
|
|
2080
|
+
return calculateReducer(state);
|
|
2081
|
+
}
|
|
2082
|
+
case BsDatepickerActions.FORMAT: {
|
|
2083
|
+
return formatReducer(state);
|
|
2084
|
+
}
|
|
2085
|
+
case BsDatepickerActions.FLAG: {
|
|
2086
|
+
return flagReducer(state);
|
|
2087
|
+
}
|
|
2088
|
+
case BsDatepickerActions.NAVIGATE_OFFSET: {
|
|
2089
|
+
return navigateOffsetReducer(state, action);
|
|
2090
|
+
}
|
|
2091
|
+
case BsDatepickerActions.NAVIGATE_TO: {
|
|
2092
|
+
const payload = action.payload;
|
|
2093
|
+
if (!state.view || !payload.unit)
|
|
2094
|
+
return state;
|
|
2095
|
+
const date = setFullDate(state.view.date, payload.unit);
|
|
2096
|
+
let newState;
|
|
2097
|
+
let mode;
|
|
2098
|
+
if (canSwitchMode(payload.viewMode, state.minMode)) {
|
|
2099
|
+
mode = payload.viewMode;
|
|
2100
|
+
newState = { view: { date, mode } };
|
|
2101
|
+
}
|
|
2102
|
+
else {
|
|
2103
|
+
mode = state.view.mode;
|
|
2104
|
+
newState = { selectedDate: date, view: { date, mode } };
|
|
2105
|
+
}
|
|
2106
|
+
return Object.assign({}, state, newState);
|
|
2107
|
+
}
|
|
2108
|
+
case BsDatepickerActions.CHANGE_VIEWMODE: {
|
|
2109
|
+
if (!canSwitchMode(action.payload, state.minMode) || !state.view)
|
|
2110
|
+
return state;
|
|
2111
|
+
const date = state.view.date;
|
|
2112
|
+
const mode = action.payload;
|
|
2113
|
+
const newState = { view: { date, mode } };
|
|
2114
|
+
return Object.assign({}, state, newState);
|
|
2115
|
+
}
|
|
2116
|
+
case BsDatepickerActions.HOVER: {
|
|
2117
|
+
return Object.assign({}, state, { hoveredDate: action.payload });
|
|
2118
|
+
}
|
|
2119
|
+
case BsDatepickerActions.SELECT: {
|
|
2120
|
+
if (!state.view)
|
|
2121
|
+
return state;
|
|
2122
|
+
const newState = {
|
|
2123
|
+
selectedDate: action.payload,
|
|
2124
|
+
view: state.view
|
|
2125
|
+
};
|
|
2126
|
+
const mode = state.view.mode;
|
|
2127
|
+
const _date = action.payload || state.view.date;
|
|
2128
|
+
const date = getViewDate(_date, state.minDate, state.maxDate);
|
|
2129
|
+
newState.view = { mode, date };
|
|
2130
|
+
return Object.assign({}, state, newState);
|
|
2131
|
+
}
|
|
2132
|
+
case BsDatepickerActions.SET_OPTIONS: {
|
|
2133
|
+
if (!state.view)
|
|
2134
|
+
return state;
|
|
2135
|
+
const newState = action.payload;
|
|
2136
|
+
// preserve view mode
|
|
2137
|
+
const mode = newState.minMode ? newState.minMode : state.view.mode;
|
|
2138
|
+
const _viewDate = isDateValid(newState.value) && newState.value || isArray(newState.value) && isDateValid(newState.value[0]) && newState.value[0] || state.view.date;
|
|
2139
|
+
const date = getViewDate(_viewDate, newState.minDate, newState.maxDate);
|
|
2140
|
+
newState.view = { mode, date };
|
|
2141
|
+
// update selected value
|
|
2142
|
+
if (newState.value) {
|
|
2143
|
+
// if new value is array we work with date range
|
|
2144
|
+
if (isArray(newState.value)) {
|
|
2145
|
+
newState.selectedRange = newState.value;
|
|
2146
|
+
}
|
|
2147
|
+
// if new value is a date -> datepicker
|
|
2148
|
+
if (newState.value instanceof Date) {
|
|
2149
|
+
newState.selectedDate = newState.value;
|
|
2150
|
+
}
|
|
2151
|
+
}
|
|
2152
|
+
return Object.assign({}, state, newState);
|
|
2153
|
+
}
|
|
2154
|
+
// date range picker
|
|
2155
|
+
case BsDatepickerActions.SELECT_RANGE: {
|
|
2156
|
+
if (!state.view)
|
|
2157
|
+
return state;
|
|
2158
|
+
const newState = {
|
|
2159
|
+
selectedRange: action.payload,
|
|
2160
|
+
view: state.view
|
|
2161
|
+
};
|
|
2162
|
+
const mode = state.view.mode;
|
|
2163
|
+
const _date = action.payload && action.payload[0] || state.view.date;
|
|
2164
|
+
const date = getViewDate(_date, state.minDate, state.maxDate);
|
|
2165
|
+
newState.view = { mode, date };
|
|
2166
|
+
return Object.assign({}, state, newState);
|
|
2167
|
+
}
|
|
2168
|
+
case BsDatepickerActions.SET_MIN_DATE: {
|
|
2169
|
+
return Object.assign({}, state, {
|
|
2170
|
+
minDate: action.payload
|
|
2171
|
+
});
|
|
2172
|
+
}
|
|
2173
|
+
case BsDatepickerActions.SET_MAX_DATE: {
|
|
2174
|
+
return Object.assign({}, state, {
|
|
2175
|
+
maxDate: action.payload
|
|
2176
|
+
});
|
|
2177
|
+
}
|
|
2178
|
+
case BsDatepickerActions.SET_IS_DISABLED: {
|
|
2179
|
+
return Object.assign({}, state, {
|
|
2180
|
+
isDisabled: action.payload
|
|
2181
|
+
});
|
|
2182
|
+
}
|
|
2183
|
+
default:
|
|
2184
|
+
return state;
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2187
|
+
function calculateReducer(state) {
|
|
2188
|
+
if (!state.view)
|
|
2189
|
+
return state;
|
|
2190
|
+
// how many calendars
|
|
2191
|
+
let displayMonths = state.displayMonths;
|
|
2192
|
+
// use selected date on initial rendering if set
|
|
2193
|
+
let viewDate = state.view.date;
|
|
2194
|
+
if (state.view.mode === 'day' && state.monthViewOptions) {
|
|
2195
|
+
state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek();
|
|
2196
|
+
let monthsModel = new Array(displayMonths);
|
|
2197
|
+
for (let monthIndex = 0; monthIndex < displayMonths; monthIndex++) {
|
|
2198
|
+
monthsModel[monthIndex] = calcDaysCalendar(viewDate, state.monthViewOptions);
|
|
2199
|
+
viewDate = shiftDate(viewDate, { month: 1 });
|
|
2200
|
+
}
|
|
2201
|
+
// Check if parameter enabled and check if it's not months navigation event
|
|
2202
|
+
if (state.preventChangeToNextMonth && state.flaggedMonths && state.hoveredDate) {
|
|
2203
|
+
const viewMonth = calcDaysCalendar(state.view.date, state.monthViewOptions);
|
|
2204
|
+
// Check if viewed right month same as in flaggedMonths state, then override months model with flaggedMonths
|
|
2205
|
+
if (state.flaggedMonths.length >= 2) {
|
|
2206
|
+
if (state.flaggedMonths[1].month.getMonth() === viewMonth.month.getMonth()) {
|
|
2207
|
+
monthsModel = state.flaggedMonths.map((item) => {
|
|
2208
|
+
return state.monthViewOptions ? calcDaysCalendar(item.month, state.monthViewOptions) : null;
|
|
2209
|
+
}).filter(item => item !== null);
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2212
|
+
else {
|
|
2213
|
+
monthsModel = state.flaggedMonths.map((item) => {
|
|
2214
|
+
return state.monthViewOptions ? calcDaysCalendar(item.month, state.monthViewOptions) : null;
|
|
2215
|
+
}).filter(item => item !== null);
|
|
2216
|
+
}
|
|
2217
|
+
}
|
|
2218
|
+
return Object.assign({}, state, { monthsModel });
|
|
2219
|
+
}
|
|
2220
|
+
if (state.view.mode === 'month') {
|
|
2221
|
+
const monthsCalendar = new Array(displayMonths);
|
|
2222
|
+
for (let calendarIndex = 0; calendarIndex < displayMonths; calendarIndex++) {
|
|
2223
|
+
monthsCalendar[calendarIndex] = formatMonthsCalendar(viewDate, getFormatOptions(state));
|
|
2224
|
+
viewDate = shiftDate(viewDate, { year: 1 });
|
|
2225
|
+
}
|
|
2226
|
+
return Object.assign({}, state, { monthsCalendar });
|
|
2227
|
+
}
|
|
2228
|
+
if (state.view.mode === 'year') {
|
|
2229
|
+
const yearsCalendarModel = new Array(displayMonths);
|
|
2230
|
+
for (let calendarIndex = 0; calendarIndex < displayMonths; calendarIndex++) {
|
|
2231
|
+
yearsCalendarModel[calendarIndex] = formatYearsCalendar(viewDate, getFormatOptions(state), state.minMode === 'year' ? getYearsCalendarInitialDate(state, calendarIndex) : undefined, state.selectedDate ? state.selectedDate : new Date());
|
|
2232
|
+
viewDate = shiftDate(viewDate, { year: yearsPerCalendar });
|
|
2233
|
+
}
|
|
2234
|
+
return Object.assign({}, state, { yearsCalendarModel });
|
|
2235
|
+
}
|
|
2236
|
+
return state;
|
|
2237
|
+
}
|
|
2238
|
+
function formatReducer(state) {
|
|
2239
|
+
if (!state.view)
|
|
2240
|
+
return state;
|
|
2241
|
+
if (state.view.mode === 'day' && state.monthsModel) {
|
|
2242
|
+
const formattedMonths = state.monthsModel.map((month, monthIndex) => formatDaysCalendar(month, getFormatOptions(state), monthIndex));
|
|
2243
|
+
return Object.assign({}, state, { formattedMonths });
|
|
2244
|
+
}
|
|
2245
|
+
// how many calendars
|
|
2246
|
+
const displayMonths = state.displayMonths || 1;
|
|
2247
|
+
// check initial rendering
|
|
2248
|
+
// use selected date on initial rendering if set
|
|
2249
|
+
let viewDate = state.view.date;
|
|
2250
|
+
if (state.view.mode === 'month') {
|
|
2251
|
+
const monthsCalendar = new Array(displayMonths);
|
|
2252
|
+
for (let calendarIndex = 0; calendarIndex < displayMonths; calendarIndex++) {
|
|
2253
|
+
monthsCalendar[calendarIndex] = formatMonthsCalendar(viewDate, getFormatOptions(state));
|
|
2254
|
+
viewDate = shiftDate(viewDate, { year: 1 });
|
|
2255
|
+
}
|
|
2256
|
+
return Object.assign({}, state, { monthsCalendar });
|
|
2257
|
+
}
|
|
2258
|
+
if (state.view.mode === 'year') {
|
|
2259
|
+
const yearsCalendarModel = new Array(displayMonths);
|
|
2260
|
+
for (let calendarIndex = 0; calendarIndex < displayMonths; calendarIndex++) {
|
|
2261
|
+
yearsCalendarModel[calendarIndex] = formatYearsCalendar(viewDate, getFormatOptions(state), undefined, state.selectedDate ? state.selectedDate : new Date());
|
|
2262
|
+
viewDate = shiftDate(viewDate, { year: 16 });
|
|
2263
|
+
}
|
|
2264
|
+
return Object.assign({}, state, { yearsCalendarModel });
|
|
2265
|
+
}
|
|
2266
|
+
return state;
|
|
2267
|
+
}
|
|
2268
|
+
function flagReducer(state) {
|
|
2269
|
+
if (!state.view)
|
|
2270
|
+
return state;
|
|
2271
|
+
const displayMonths = isDisplayOneMonth(state.view.date, state.minDate, state.maxDate) ? 1 : state.displayMonths;
|
|
2272
|
+
if (state.formattedMonths && state.view.mode === 'day') {
|
|
2273
|
+
const flaggedMonths = state.formattedMonths.map((formattedMonth, monthIndex) => flagDaysCalendar(formattedMonth, {
|
|
2274
|
+
isDisabled: state.isDisabled,
|
|
2275
|
+
minDate: state.minDate,
|
|
2276
|
+
maxDate: state.maxDate,
|
|
2277
|
+
hoveredDate: state.hoveredDate,
|
|
2278
|
+
selectedDate: state.selectedDate,
|
|
2279
|
+
selectedRange: state.selectedRange,
|
|
2280
|
+
displayMonths,
|
|
2281
|
+
monthIndex
|
|
2282
|
+
}));
|
|
2283
|
+
return Object.assign({}, state, { flaggedMonths });
|
|
2284
|
+
}
|
|
2285
|
+
if (state.view.mode === 'month' && state.monthsCalendar) {
|
|
2286
|
+
const flaggedMonthsCalendar = state.monthsCalendar.map((formattedMonth, monthIndex) => flagMonthsCalendar(formattedMonth, {
|
|
2287
|
+
isDisabled: state.isDisabled,
|
|
2288
|
+
minDate: state.minDate,
|
|
2289
|
+
maxDate: state.maxDate,
|
|
2290
|
+
hoveredMonth: state.hoveredMonth,
|
|
2291
|
+
selectedDate: state.selectedDate,
|
|
2292
|
+
selectedRange: state.selectedRange,
|
|
2293
|
+
displayMonths,
|
|
2294
|
+
monthIndex
|
|
2295
|
+
}));
|
|
2296
|
+
return Object.assign({}, state, { flaggedMonthsCalendar });
|
|
2297
|
+
}
|
|
2298
|
+
if (state.view.mode === 'year' && state.yearsCalendarModel) {
|
|
2299
|
+
const yearsCalendarFlagged = state.yearsCalendarModel.map((formattedMonth, yearIndex) => flagYearsCalendar(formattedMonth, {
|
|
2300
|
+
isDisabled: state.isDisabled,
|
|
2301
|
+
minDate: state.minDate,
|
|
2302
|
+
maxDate: state.maxDate,
|
|
2303
|
+
hoveredYear: state.hoveredYear,
|
|
2304
|
+
selectedDate: state.selectedDate,
|
|
2305
|
+
selectedRange: state.selectedRange,
|
|
2306
|
+
displayMonths,
|
|
2307
|
+
yearIndex
|
|
2308
|
+
}));
|
|
2309
|
+
return Object.assign({}, state, { yearsCalendarFlagged });
|
|
2310
|
+
}
|
|
2311
|
+
return state;
|
|
2312
|
+
}
|
|
2313
|
+
function navigateOffsetReducer(state, action) {
|
|
2314
|
+
if (!state.view)
|
|
2315
|
+
return state;
|
|
2316
|
+
const date = shiftViewDate(state, action);
|
|
2317
|
+
if (!date)
|
|
2318
|
+
return state;
|
|
2319
|
+
const newState = {
|
|
2320
|
+
view: { mode: state.view.mode, date }
|
|
2321
|
+
};
|
|
2322
|
+
return Object.assign({}, state, newState);
|
|
2323
|
+
}
|
|
2324
|
+
function shiftViewDate(state, action) {
|
|
2325
|
+
if (!state.view)
|
|
2326
|
+
return undefined;
|
|
2327
|
+
if (state.view.mode === 'year' && state.minMode === 'year') {
|
|
2328
|
+
const initialDate = getYearsCalendarInitialDate(state, 0);
|
|
2329
|
+
if (initialDate) {
|
|
2330
|
+
const middleDate = shiftDate(initialDate, { year: -initialYearShift });
|
|
2331
|
+
return shiftDate(middleDate, action.payload);
|
|
2332
|
+
}
|
|
2333
|
+
}
|
|
2334
|
+
return shiftDate(startOf(state.view.date, 'month'), action.payload);
|
|
2335
|
+
}
|
|
2336
|
+
function getFormatOptions(state) {
|
|
2337
|
+
return {
|
|
2338
|
+
locale: state.locale,
|
|
2339
|
+
monthTitle: state.monthTitle,
|
|
2340
|
+
yearTitle: state.yearTitle,
|
|
2341
|
+
dayLabel: state.dayLabel,
|
|
2342
|
+
monthLabel: state.monthLabel,
|
|
2343
|
+
yearLabel: state.yearLabel
|
|
2344
|
+
};
|
|
2345
|
+
}
|
|
2346
|
+
/**
|
|
2347
|
+
* if view date is provided (bsValue|ngModel) it should be shown
|
|
2348
|
+
* if view date is not provider:
|
|
2349
|
+
* if minDate>currentDate (default view value), show minDate
|
|
2350
|
+
* if maxDate<currentDate(default view value) show maxDate
|
|
2351
|
+
*/
|
|
2352
|
+
function getViewDate(viewDate, minDate, maxDate) {
|
|
2353
|
+
const _date = Array.isArray(viewDate) ? viewDate[0] : viewDate;
|
|
2354
|
+
if (minDate && isAfter(minDate, _date, 'day'))
|
|
2355
|
+
return minDate;
|
|
2356
|
+
if (maxDate && isBefore(maxDate, _date, 'day'))
|
|
2357
|
+
return maxDate;
|
|
2358
|
+
return _date;
|
|
2359
|
+
}
|
|
2360
|
+
function isDisplayOneMonth(viewDate, minDate, maxDate) {
|
|
2361
|
+
if (maxDate && isSame(maxDate, viewDate, 'day'))
|
|
2362
|
+
return true;
|
|
2363
|
+
return minDate && maxDate && minDate.getMonth() === maxDate.getMonth();
|
|
2364
|
+
}
|
|
2365
|
+
|
|
2366
|
+
class BsDatepickerStore extends MiniStore {
|
|
2367
|
+
constructor() {
|
|
2368
|
+
const _dispatcher = new BehaviorSubject({ type: '[datepicker] dispatcher init' });
|
|
2369
|
+
const state = new MiniState(initialDatepickerState, _dispatcher, bsDatepickerReducer);
|
|
2370
|
+
super(_dispatcher, bsDatepickerReducer, state);
|
|
2371
|
+
}
|
|
2372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2373
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerStore, providedIn: 'platform' }); }
|
|
2374
|
+
}
|
|
2375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerStore, decorators: [{
|
|
2376
|
+
type: Injectable,
|
|
2377
|
+
args: [{ providedIn: 'platform' }]
|
|
2378
|
+
}], ctorParameters: function () { return []; } });
|
|
2379
|
+
|
|
2380
|
+
class BsDatepickerCallbacks {
|
|
2381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerCallbacks, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2382
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerCallbacks, providedIn: 'root' }); }
|
|
2383
|
+
}
|
|
2384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerCallbacks, decorators: [{
|
|
2385
|
+
type: Injectable,
|
|
2386
|
+
args: [{
|
|
2387
|
+
providedIn: 'root'
|
|
2388
|
+
}]
|
|
2389
|
+
}] });
|
|
2390
|
+
|
|
2391
|
+
/** *************** */
|
|
2392
|
+
var BsNavigationDirection;
|
|
2393
|
+
(function (BsNavigationDirection) {
|
|
2394
|
+
BsNavigationDirection[BsNavigationDirection["UP"] = 0] = "UP";
|
|
2395
|
+
BsNavigationDirection[BsNavigationDirection["DOWN"] = 1] = "DOWN";
|
|
2396
|
+
})(BsNavigationDirection || (BsNavigationDirection = {}));
|
|
2397
|
+
|
|
2398
|
+
class BsDatepickerDayDecoratorComponent {
|
|
2399
|
+
constructor() {
|
|
2400
|
+
this.day = { date: new Date(), label: '' };
|
|
2401
|
+
}
|
|
2402
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDayDecoratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: { day: "day" }, host: { properties: { "class.disabled": "day.isDisabled", "class.is-highlighted": "day.isHovered", "class.is-other-month": "day.isOtherMonth", "class.in-range": "day.isInRange", "class.select-start": "day.isSelectionStart", "class.select-end": "day.isSelectionEnd", "class.selected": "day.isSelected", "class.today": "day.isToday" } }, ngImport: i0, template: `{{ day && day.label || '' }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2404
|
+
}
|
|
2405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDayDecoratorComponent, decorators: [{
|
|
2406
|
+
type: Component,
|
|
2407
|
+
args: [{
|
|
2408
|
+
selector: '[bsDatepickerDayDecorator]',
|
|
2409
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2410
|
+
host: {
|
|
2411
|
+
'[class.disabled]': 'day.isDisabled',
|
|
2412
|
+
'[class.is-highlighted]': 'day.isHovered',
|
|
2413
|
+
'[class.is-other-month]': 'day.isOtherMonth',
|
|
2414
|
+
'[class.in-range]': 'day.isInRange',
|
|
2415
|
+
'[class.select-start]': 'day.isSelectionStart',
|
|
2416
|
+
'[class.select-end]': 'day.isSelectionEnd',
|
|
2417
|
+
'[class.selected]': 'day.isSelected',
|
|
2418
|
+
'[class.today]': 'day.isToday',
|
|
2419
|
+
},
|
|
2420
|
+
template: `{{ day && day.label || '' }}`
|
|
2421
|
+
}]
|
|
2422
|
+
}], propDecorators: { day: [{
|
|
2423
|
+
type: Input
|
|
2424
|
+
}] } });
|
|
2425
|
+
|
|
2426
|
+
class BsDatepickerNavigationViewComponent {
|
|
2427
|
+
constructor() {
|
|
2428
|
+
this.showNavigationArrows = false;
|
|
2429
|
+
this.isDisabled = false;
|
|
2430
|
+
this.onNavigate = new EventEmitter();
|
|
2431
|
+
this.onViewMode = new EventEmitter();
|
|
2432
|
+
}
|
|
2433
|
+
navTo(down, disabled) {
|
|
2434
|
+
if (disabled)
|
|
2435
|
+
return;
|
|
2436
|
+
this.onNavigate.emit(down ? BsNavigationDirection.DOWN : BsNavigationDirection.UP);
|
|
2437
|
+
}
|
|
2438
|
+
view(viewMode) {
|
|
2439
|
+
if (this.isDisabled)
|
|
2440
|
+
return;
|
|
2441
|
+
this.onViewMode.emit(viewMode);
|
|
2442
|
+
}
|
|
2443
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerNavigationViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", isDisabled: "isDisabled", type: "type" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode" }, ngImport: i0, template: "<ng-container *ngIf=\"calendar\">\n <ng-container *ngIf=\"type == 'days'\">\n <div class=\"previous gravity-icon-button\"\n (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n </div>\n\n <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n *ngIf=\"calendar?.monthTitle\">\n {{ calendar.monthTitle }}\n <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.monthTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\"\n (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == 'months'\">\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.yearTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"arrows\">\n <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n (click)=\"navTo(true, calendar.disableLeftArrow)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n (click)=\"navTo(false, calendar.disableRightArrow)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == 'years'\">\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.yearTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"arrows\">\n <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n (click)=\"navTo(true, calendar.disableLeftArrow)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n (click)=\"navTo(false, calendar.disableRightArrow)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary);cursor:pointer}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2445
|
+
}
|
|
2446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerNavigationViewComponent, decorators: [{
|
|
2447
|
+
type: Component,
|
|
2448
|
+
args: [{ selector: 'bs-datepicker-navigation-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"calendar\">\n <ng-container *ngIf=\"type == 'days'\">\n <div class=\"previous gravity-icon-button\"\n (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n </div>\n\n <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n *ngIf=\"calendar?.monthTitle\">\n {{ calendar.monthTitle }}\n <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.monthTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\"\n (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == 'months'\">\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.yearTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"arrows\">\n <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n (click)=\"navTo(true, calendar.disableLeftArrow)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n (click)=\"navTo(false, calendar.disableRightArrow)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == 'years'\">\n <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n *ngIf=\"calendar?.yearTitle\">\n {{ calendar.yearTitle }}\n <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"arrows\">\n <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n (click)=\"navTo(true, calendar.disableLeftArrow)\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n\n <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n (click)=\"navTo(false, calendar.disableRightArrow)\">\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary);cursor:pointer}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"] }]
|
|
2449
|
+
}], propDecorators: { calendar: [{
|
|
2450
|
+
type: Input
|
|
2451
|
+
}], calendarIndex: [{
|
|
2452
|
+
type: Input
|
|
2453
|
+
}], showNavigationArrows: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}], isDisabled: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}], type: [{
|
|
2458
|
+
type: Input
|
|
2459
|
+
}], onNavigate: [{
|
|
2460
|
+
type: Output
|
|
2461
|
+
}], onViewMode: [{
|
|
2462
|
+
type: Output
|
|
2463
|
+
}] } });
|
|
2464
|
+
|
|
2465
|
+
class BsDaysCalendarViewComponent {
|
|
2466
|
+
constructor() {
|
|
2467
|
+
this.onNavigate = new EventEmitter();
|
|
2468
|
+
this.onViewMode = new EventEmitter();
|
|
2469
|
+
this.onSelect = new EventEmitter();
|
|
2470
|
+
this.onHover = new EventEmitter();
|
|
2471
|
+
this.isiOS = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
|
|
2472
|
+
}
|
|
2473
|
+
navigateTo(event) {
|
|
2474
|
+
this.onNavigate.emit({ step: { month: BsNavigationDirection.DOWN === event ? -1 : 1 } });
|
|
2475
|
+
}
|
|
2476
|
+
changeViewMode(event) {
|
|
2477
|
+
this.onViewMode.emit(event);
|
|
2478
|
+
}
|
|
2479
|
+
selectDay(event) {
|
|
2480
|
+
this.onSelect.emit(event);
|
|
2481
|
+
}
|
|
2482
|
+
hoverDay(cell, isHovered) {
|
|
2483
|
+
this.onHover.emit({ cell, isHovered });
|
|
2484
|
+
}
|
|
2485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaysCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", isDisabled: "isDisabled", options: "options", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\"\n [type]=\"'days'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <div class=\"weekdays\">\n <article aria-label=\"weekday\" class=\"hr-body-text {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n {{ weekday }}\n </article>\n </div>\n <hr>\n <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n <ng-container *ngFor=\"let day of week.days\">\n <article bsDatepickerDayDecorator class=\"hr-body-text {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n (mouseleave)=\"hoverDay(day, false)\"></article>\n\n <article bsDatepickerDayDecorator class=\"hr-body-text {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n *ngIf=\"isiOS\"></article>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:2px solid var(--divider-menu-active-primary);margin:8px 0;opacity:1}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: ["day"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
|
|
2487
|
+
}
|
|
2488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaysCalendarViewComponent, decorators: [{
|
|
2489
|
+
type: Component,
|
|
2490
|
+
args: [{ selector: 'bs-days-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\"\n [type]=\"'days'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <div class=\"weekdays\">\n <article aria-label=\"weekday\" class=\"hr-body-text {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n {{ weekday }}\n </article>\n </div>\n <hr>\n <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n <ng-container *ngFor=\"let day of week.days\">\n <article bsDatepickerDayDecorator class=\"hr-body-text {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n (mouseleave)=\"hoverDay(day, false)\"></article>\n\n <article bsDatepickerDayDecorator class=\"hr-body-text {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n *ngIf=\"isiOS\"></article>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:2px solid var(--divider-menu-active-primary);margin:8px 0;opacity:1}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\n"] }]
|
|
2491
|
+
}], ctorParameters: function () { return []; }, propDecorators: { calendar: [{
|
|
2492
|
+
type: Input
|
|
2493
|
+
}], calendarIndex: [{
|
|
2494
|
+
type: Input
|
|
2495
|
+
}], isDisabled: [{
|
|
2496
|
+
type: Input
|
|
2497
|
+
}], options: [{
|
|
2498
|
+
type: Input
|
|
2499
|
+
}], showNavigationArrows: [{
|
|
2500
|
+
type: Input
|
|
2501
|
+
}], size: [{
|
|
2502
|
+
type: Input
|
|
2503
|
+
}], onNavigate: [{
|
|
2504
|
+
type: Output
|
|
2505
|
+
}], onViewMode: [{
|
|
2506
|
+
type: Output
|
|
2507
|
+
}], onSelect: [{
|
|
2508
|
+
type: Output
|
|
2509
|
+
}], onHover: [{
|
|
2510
|
+
type: Output
|
|
2511
|
+
}] } });
|
|
2512
|
+
|
|
2513
|
+
class BsMonthCalendarViewComponent {
|
|
2514
|
+
constructor() {
|
|
2515
|
+
this.onNavigate = new EventEmitter();
|
|
2516
|
+
this.onViewMode = new EventEmitter();
|
|
2517
|
+
this.onSelect = new EventEmitter();
|
|
2518
|
+
this.onHover = new EventEmitter();
|
|
2519
|
+
}
|
|
2520
|
+
navigateTo(event) {
|
|
2521
|
+
const step = BsNavigationDirection.DOWN === event ? -1 : 1;
|
|
2522
|
+
this.onNavigate.emit({ step: { year: step } });
|
|
2523
|
+
}
|
|
2524
|
+
viewMonth(month) {
|
|
2525
|
+
this.onSelect.emit(month);
|
|
2526
|
+
}
|
|
2527
|
+
hoverMonth(cell, isHovered) {
|
|
2528
|
+
this.onHover.emit({ cell, isHovered });
|
|
2529
|
+
}
|
|
2530
|
+
changeViewMode(event) {
|
|
2531
|
+
this.onViewMode.emit(event);
|
|
2532
|
+
}
|
|
2533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsMonthCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"changeViewMode($event)\"\n [type]=\"'months'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <hr>\n <div class=\"months\" *ngFor=\"let row of calendar?.months\">\n <article class=\"hr-body-text sm-regular\"\n [class.disabled]=\"month.isDisabled\"\n [class.is-highlighted]=\"month.isHovered\"\n [class.selected]=\"month.isSelected\"\n [class.today]=\"month.isToday\"\n\n (click)=\"viewMonth(month)\" *ngFor=\"let month of row\"\n (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n {{ month.label }}\n </article>\n </div>\n </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.months{align-items:center;display:flex;justify-content:space-between}.months article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--month-article-height);justify-content:center;width:var(--month-article-width)}.months article.disabled{color:var(--on-bg-disabled);cursor:default}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
|
|
2535
|
+
}
|
|
2536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsMonthCalendarViewComponent, decorators: [{
|
|
2537
|
+
type: Component,
|
|
2538
|
+
args: [{ selector: 'bs-month-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"changeViewMode($event)\"\n [type]=\"'months'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <hr>\n <div class=\"months\" *ngFor=\"let row of calendar?.months\">\n <article class=\"hr-body-text sm-regular\"\n [class.disabled]=\"month.isDisabled\"\n [class.is-highlighted]=\"month.isHovered\"\n [class.selected]=\"month.isSelected\"\n [class.today]=\"month.isToday\"\n\n (click)=\"viewMonth(month)\" *ngFor=\"let month of row\"\n (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n {{ month.label }}\n </article>\n </div>\n </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.months{align-items:center;display:flex;justify-content:space-between}.months article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--month-article-height);justify-content:center;width:var(--month-article-width)}.months article.disabled{color:var(--on-bg-disabled);cursor:default}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
|
|
2539
|
+
}], propDecorators: { calendar: [{
|
|
2540
|
+
type: Input
|
|
2541
|
+
}], calendarIndex: [{
|
|
2542
|
+
type: Input
|
|
2543
|
+
}], showNavigationArrows: [{
|
|
2544
|
+
type: Input
|
|
2545
|
+
}], size: [{
|
|
2546
|
+
type: Input
|
|
2547
|
+
}], onNavigate: [{
|
|
2548
|
+
type: Output
|
|
2549
|
+
}], onViewMode: [{
|
|
2550
|
+
type: Output
|
|
2551
|
+
}], onSelect: [{
|
|
2552
|
+
type: Output
|
|
2553
|
+
}], onHover: [{
|
|
2554
|
+
type: Output
|
|
2555
|
+
}] } });
|
|
2556
|
+
|
|
2557
|
+
class BsYearsCalendarViewComponent {
|
|
2558
|
+
constructor() {
|
|
2559
|
+
this.onNavigate = new EventEmitter();
|
|
2560
|
+
this.onViewMode = new EventEmitter();
|
|
2561
|
+
this.onSelect = new EventEmitter();
|
|
2562
|
+
this.onHover = new EventEmitter();
|
|
2563
|
+
}
|
|
2564
|
+
navigateTo(event) {
|
|
2565
|
+
const step = BsNavigationDirection.DOWN === event ? -1 : 1;
|
|
2566
|
+
this.onNavigate.emit({ step: { year: step * yearsPerCalendar } });
|
|
2567
|
+
}
|
|
2568
|
+
viewYear(year) {
|
|
2569
|
+
this.onSelect.emit(year);
|
|
2570
|
+
}
|
|
2571
|
+
hoverYear(cell, isHovered) {
|
|
2572
|
+
this.onHover.emit({ cell, isHovered });
|
|
2573
|
+
}
|
|
2574
|
+
changeViewMode(event) {
|
|
2575
|
+
this.onViewMode.emit(event);
|
|
2576
|
+
}
|
|
2577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsYearsCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2578
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <hr>\n <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n <article class=\"hr-body-text sm-regular\"\n [class.disabled]=\"year.isDisabled\"\n [class.is-highlighted]=\"year.isHovered\"\n [class.selected]=\"year.isSelected\"\n [class.today]=\"year.isToday\"\n\n (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n {{ year.label }}\n </article>\n </div>\n </div>\n</div>\n", styles: [".calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.years{align-items:center;display:flex;justify-content:space-between}.years article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:35px;justify-content:center;width:45px}.years article.disabled{color:var(--on-bg-disabled);cursor:default}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
|
|
2579
|
+
}
|
|
2580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsYearsCalendarViewComponent, decorators: [{
|
|
2581
|
+
type: Component,
|
|
2582
|
+
args: [{ selector: 'bs-years-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n <div class=\"calendar-body\">\n <hr>\n <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n <article class=\"hr-body-text sm-regular\"\n [class.disabled]=\"year.isDisabled\"\n [class.is-highlighted]=\"year.isHovered\"\n [class.selected]=\"year.isSelected\"\n [class.today]=\"year.isToday\"\n\n (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n {{ year.label }}\n </article>\n </div>\n </div>\n</div>\n", styles: [".calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.years{align-items:center;display:flex;justify-content:space-between}.years article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:35px;justify-content:center;width:45px}.years article.disabled{color:var(--on-bg-disabled);cursor:default}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
|
|
2583
|
+
}], propDecorators: { calendar: [{
|
|
2584
|
+
type: Input
|
|
2585
|
+
}], calendarIndex: [{
|
|
2586
|
+
type: Input
|
|
2587
|
+
}], showNavigationArrows: [{
|
|
2588
|
+
type: Input
|
|
2589
|
+
}], size: [{
|
|
2590
|
+
type: Input
|
|
2591
|
+
}], onNavigate: [{
|
|
2592
|
+
type: Output
|
|
2593
|
+
}], onViewMode: [{
|
|
2594
|
+
type: Output
|
|
2595
|
+
}], onSelect: [{
|
|
2596
|
+
type: Output
|
|
2597
|
+
}], onHover: [{
|
|
2598
|
+
type: Output
|
|
2599
|
+
}] } });
|
|
2600
|
+
|
|
2601
|
+
class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
2602
|
+
set value(value) {
|
|
2603
|
+
this._effects?.setValue(value);
|
|
2604
|
+
}
|
|
2605
|
+
constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
|
|
2606
|
+
super(_config);
|
|
2607
|
+
this._config = _config;
|
|
2608
|
+
this._callbacks = _callbacks;
|
|
2609
|
+
this._store = _store;
|
|
2610
|
+
this._element = _element;
|
|
2611
|
+
this._actions = _actions;
|
|
2612
|
+
this._positionService = _positionService;
|
|
2613
|
+
this.isRangePicker = false;
|
|
2614
|
+
this.onApplyChange = new EventEmitter();
|
|
2615
|
+
this.valueChange = new EventEmitter();
|
|
2616
|
+
this._effects = _effects;
|
|
2617
|
+
_renderer.setStyle(_element.nativeElement, 'display', 'block');
|
|
2618
|
+
_renderer.setStyle(_element.nativeElement, 'position', 'absolute');
|
|
2619
|
+
}
|
|
2620
|
+
ngOnInit() {
|
|
2621
|
+
this._positionService.setOptions({
|
|
2622
|
+
modifiers: {
|
|
2623
|
+
flip: { enabled: this._config.adaptivePosition },
|
|
2624
|
+
preventOverflow: { enabled: this._config.adaptivePosition }
|
|
2625
|
+
},
|
|
2626
|
+
allowedPositions: ['top', 'bottom']
|
|
2627
|
+
});
|
|
2628
|
+
this._positionService.event$?.pipe(take(1)).subscribe(() => {
|
|
2629
|
+
this._positionService.disable();
|
|
2630
|
+
if (this._config.isAnimated) {
|
|
2631
|
+
this.animationState = this.isTopPosition ? 'animated-up' : 'animated-down';
|
|
2632
|
+
}
|
|
2633
|
+
else {
|
|
2634
|
+
this.animationState = 'unanimated';
|
|
2635
|
+
}
|
|
2636
|
+
});
|
|
2637
|
+
this.isOtherMonthsActive = this._config.selectFromOtherMonth;
|
|
2638
|
+
this._effects?.init(this._store)
|
|
2639
|
+
// intial state options
|
|
2640
|
+
.setOptions(this._config)
|
|
2641
|
+
// data binding view --> model
|
|
2642
|
+
.setBindings(this)
|
|
2643
|
+
// set event handlers
|
|
2644
|
+
.setEventHandlers(this)
|
|
2645
|
+
.registerDatepickerSideEffects();
|
|
2646
|
+
// on selected date change
|
|
2647
|
+
this._subs.push(this._store.select((state) => state.selectedDate).subscribe((date) => {
|
|
2648
|
+
this.valueChange.emit(date);
|
|
2649
|
+
}));
|
|
2650
|
+
this._store.dispatch(this._actions.changeViewMode(this._config.startView));
|
|
2651
|
+
}
|
|
2652
|
+
get isTopPosition() {
|
|
2653
|
+
return this._element.nativeElement.classList.contains('top');
|
|
2654
|
+
}
|
|
2655
|
+
positionServiceEnable() {
|
|
2656
|
+
this._positionService.enable();
|
|
2657
|
+
}
|
|
2658
|
+
daySelectHandler(day) {
|
|
2659
|
+
if (!day)
|
|
2660
|
+
return;
|
|
2661
|
+
const isDisabled = this.isOtherMonthsActive ? day.isDisabled : day.isOtherMonth || day.isDisabled;
|
|
2662
|
+
if (isDisabled)
|
|
2663
|
+
return;
|
|
2664
|
+
this._store.dispatch(this._actions.select(day.date));
|
|
2665
|
+
}
|
|
2666
|
+
monthSelectHandler(day) {
|
|
2667
|
+
if (!day || day.isDisabled)
|
|
2668
|
+
return;
|
|
2669
|
+
this._store.dispatch(this._actions.navigateTo({
|
|
2670
|
+
unit: { month: getMonth(day.date), year: getFullYear(day.date) },
|
|
2671
|
+
viewMode: 'day'
|
|
2672
|
+
}));
|
|
2673
|
+
}
|
|
2674
|
+
yearSelectHandler(day) {
|
|
2675
|
+
if (!day || day.isDisabled)
|
|
2676
|
+
return;
|
|
2677
|
+
this._store.dispatch(this._actions.navigateTo({
|
|
2678
|
+
unit: { year: getFullYear(day.date) },
|
|
2679
|
+
viewMode: 'month'
|
|
2680
|
+
}));
|
|
2681
|
+
}
|
|
2682
|
+
ngOnDestroy() {
|
|
2683
|
+
for (const sub of this._subs) {
|
|
2684
|
+
sub.unsubscribe();
|
|
2685
|
+
}
|
|
2686
|
+
this._effects?.destroy();
|
|
2687
|
+
}
|
|
2688
|
+
clearDate() {
|
|
2689
|
+
if (!this.isEmpty) {
|
|
2690
|
+
this._store.dispatch(this._actions.select(undefined));
|
|
2691
|
+
}
|
|
2692
|
+
}
|
|
2693
|
+
apply() {
|
|
2694
|
+
if (!this.isEmpty) {
|
|
2695
|
+
if (this.onApplyChange) {
|
|
2696
|
+
this.onApplyChange.emit();
|
|
2697
|
+
}
|
|
2698
|
+
if (this._callbacks?.hide) {
|
|
2699
|
+
this._callbacks.hide();
|
|
2700
|
+
}
|
|
2701
|
+
}
|
|
2702
|
+
}
|
|
2703
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerContainerComponent, selector: "gt-datepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
|
|
2705
|
+
}
|
|
2706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerContainerComponent, decorators: [{
|
|
2707
|
+
type: Component,
|
|
2708
|
+
args: [{ selector: 'gt-datepicker-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
|
|
2709
|
+
'aria-label': 'calendar',
|
|
2710
|
+
class: 'bottom',
|
|
2711
|
+
'(click)': '$event.stopPropagation()',
|
|
2712
|
+
role: 'dialog'
|
|
2713
|
+
}, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
|
|
2714
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
|
|
2715
|
+
|
|
2716
|
+
let previousDate$1;
|
|
2717
|
+
class BsDatepickerDirective {
|
|
2718
|
+
/** Returns whether or not the datepicker is currently being shown */
|
|
2719
|
+
get isOpen() {
|
|
2720
|
+
return this._datepicker.isShown;
|
|
2721
|
+
}
|
|
2722
|
+
set isOpen(value) {
|
|
2723
|
+
this.isOpen$.next(value);
|
|
2724
|
+
}
|
|
2725
|
+
/** Initial value of datepicker */
|
|
2726
|
+
set bsValue(value) {
|
|
2727
|
+
if (this._bsValue && value && this._bsValue.getTime() === value.getTime())
|
|
2728
|
+
return;
|
|
2729
|
+
this.initPreviousValue();
|
|
2730
|
+
this._bsValue = value;
|
|
2731
|
+
this.bsValueChange.emit(value);
|
|
2732
|
+
}
|
|
2733
|
+
constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) {
|
|
2734
|
+
this._config = _config;
|
|
2735
|
+
this._elementRef = _elementRef;
|
|
2736
|
+
this._renderer = _renderer;
|
|
2737
|
+
/** A selector specifying the element the datepicker should be appended to. */
|
|
2738
|
+
this.container = 'body';
|
|
2739
|
+
/** Indicates whether datepicker's content is enabled or not */
|
|
2740
|
+
this.isDisabled = false;
|
|
2741
|
+
this.isMobile = false;
|
|
2742
|
+
/** Emits when datepicker value has been changed */
|
|
2743
|
+
this.bsValueChange = new EventEmitter();
|
|
2744
|
+
this.onApplyEmit = new EventEmitter();
|
|
2745
|
+
this._subs = [];
|
|
2746
|
+
this.isDestroy$ = new Subject();
|
|
2747
|
+
this._dateInputFormat$ = new Subject();
|
|
2748
|
+
Object.assign(this, this._config);
|
|
2749
|
+
this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
|
|
2750
|
+
this.isOpen$ = new BehaviorSubject(this.isOpen);
|
|
2751
|
+
this.onHidden = this._datepicker.onHidden;
|
|
2752
|
+
this.onShown = this._datepicker.onShown;
|
|
2753
|
+
}
|
|
2754
|
+
ngOnInit() {
|
|
2755
|
+
this._datepicker.listen({
|
|
2756
|
+
outsideClick: true,
|
|
2757
|
+
outsideEsc: true,
|
|
2758
|
+
triggers: 'click',
|
|
2759
|
+
show: () => this.show()
|
|
2760
|
+
});
|
|
2761
|
+
this.initPreviousValue();
|
|
2762
|
+
this.setConfig();
|
|
2763
|
+
}
|
|
2764
|
+
initPreviousValue() {
|
|
2765
|
+
previousDate$1 = this._bsValue;
|
|
2766
|
+
}
|
|
2767
|
+
ngOnChanges(changes) {
|
|
2768
|
+
if (changes["bsConfig"]) {
|
|
2769
|
+
this.setConfig();
|
|
2770
|
+
this._dateInputFormat$.next('L');
|
|
2771
|
+
}
|
|
2772
|
+
if (!this._datepickerRef || !this._datepickerRef.instance)
|
|
2773
|
+
return;
|
|
2774
|
+
if (changes["minDate"]) {
|
|
2775
|
+
this._datepickerRef.instance.minDate = this.minDate;
|
|
2776
|
+
}
|
|
2777
|
+
if (changes["maxDate"]) {
|
|
2778
|
+
this._datepickerRef.instance.maxDate = this.maxDate;
|
|
2779
|
+
}
|
|
2780
|
+
if (changes["isDisabled"]) {
|
|
2781
|
+
this._datepickerRef.instance.isDisabled = this.isDisabled;
|
|
2782
|
+
}
|
|
2783
|
+
}
|
|
2784
|
+
ngAfterViewInit() {
|
|
2785
|
+
this.isOpen$.pipe(filter(isOpen => isOpen !== this.isOpen), takeUntil(this.isDestroy$)).subscribe(() => this.toggle());
|
|
2786
|
+
}
|
|
2787
|
+
initSubscribes() {
|
|
2788
|
+
// if date changes from external source (model -> view)
|
|
2789
|
+
this._subs.push(this.bsValueChange.subscribe((value) => {
|
|
2790
|
+
if (this._datepickerRef) {
|
|
2791
|
+
this._datepickerRef.instance.value = value;
|
|
2792
|
+
}
|
|
2793
|
+
}));
|
|
2794
|
+
// if date changes from picker (view -> model)
|
|
2795
|
+
if (this._datepickerRef) {
|
|
2796
|
+
this._subs.push(this._datepickerRef.instance.valueChange.subscribe((value) => {
|
|
2797
|
+
this.initPreviousValue();
|
|
2798
|
+
this.bsValue = value;
|
|
2799
|
+
// TODO ebiazzetti keep modal open after select a date
|
|
2800
|
+
if (this.keepDatepickerModalOpened())
|
|
2801
|
+
return;
|
|
2802
|
+
this.hide();
|
|
2803
|
+
}));
|
|
2804
|
+
this._subs.push(this._datepickerRef.instance.onApplyChange.subscribe(() => {
|
|
2805
|
+
this.onApplyEmit.emit();
|
|
2806
|
+
}));
|
|
2807
|
+
}
|
|
2808
|
+
}
|
|
2809
|
+
keepDatepickerModalOpened() {
|
|
2810
|
+
if (!previousDate$1 || !this.bsConfig?.keepDatepickerOpened)
|
|
2811
|
+
return false;
|
|
2812
|
+
return this.isDateSame();
|
|
2813
|
+
}
|
|
2814
|
+
isDateSame() {
|
|
2815
|
+
return (previousDate$1 instanceof Date
|
|
2816
|
+
&& (this._bsValue?.getDate() === previousDate$1?.getDate())
|
|
2817
|
+
&& (this._bsValue?.getMonth() === previousDate$1?.getMonth())
|
|
2818
|
+
&& (this._bsValue?.getFullYear() === previousDate$1?.getFullYear()));
|
|
2819
|
+
}
|
|
2820
|
+
/** Opens an element’s datepicker. This is considered a “manual” triggering of the datepicker. */
|
|
2821
|
+
show() {
|
|
2822
|
+
if (this._datepicker.isShown)
|
|
2823
|
+
return;
|
|
2824
|
+
this.setConfig();
|
|
2825
|
+
const callbacks = new BsDatepickerCallbacks();
|
|
2826
|
+
callbacks.hide = this.hide.bind(this);
|
|
2827
|
+
this._datepickerRef = this._datepicker
|
|
2828
|
+
.provide({ provide: BsDatepickerConfig, useValue: this._config })
|
|
2829
|
+
.provide({ provide: BsDatepickerCallbacks, useValue: callbacks })
|
|
2830
|
+
.attach(BsDatepickerContainerComponent)
|
|
2831
|
+
.to(this.container)
|
|
2832
|
+
.position({ attachment: 'bottom' })
|
|
2833
|
+
.show({ placement: 'bottom' });
|
|
2834
|
+
this.initSubscribes();
|
|
2835
|
+
}
|
|
2836
|
+
/** Closes an element’s datepicker. This is considered a “manual” triggering of the datepicker. */
|
|
2837
|
+
hide() {
|
|
2838
|
+
if (this.isOpen) {
|
|
2839
|
+
this._datepicker.hide();
|
|
2840
|
+
}
|
|
2841
|
+
for (const sub of this._subs) {
|
|
2842
|
+
sub.unsubscribe();
|
|
2843
|
+
}
|
|
2844
|
+
}
|
|
2845
|
+
/** Toggles an element’s datepicker. This is considered a “manual” triggering of the datepicker. */
|
|
2846
|
+
toggle() {
|
|
2847
|
+
if (this.isOpen) {
|
|
2848
|
+
return this.hide();
|
|
2849
|
+
}
|
|
2850
|
+
this.show();
|
|
2851
|
+
}
|
|
2852
|
+
/** Set config for datepicker */
|
|
2853
|
+
setConfig() {
|
|
2854
|
+
this._config = Object.assign({}, this._config, this.bsConfig, {
|
|
2855
|
+
value: checkBsValue(this._bsValue, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
2856
|
+
isDisabled: this.isDisabled,
|
|
2857
|
+
isMobile: this.isMobile || this.bsConfig && this.bsConfig.isMobile,
|
|
2858
|
+
minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
|
|
2859
|
+
maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
|
|
2860
|
+
minMode: this.minMode || this.bsConfig && this.bsConfig.minMode,
|
|
2861
|
+
keepDatepickerOpened: this.bsConfig?.keepDatepickerOpened
|
|
2862
|
+
});
|
|
2863
|
+
}
|
|
2864
|
+
unsubscribeSubscriptions() {
|
|
2865
|
+
if (this._subs?.length) {
|
|
2866
|
+
this._subs.map((sub) => sub.unsubscribe());
|
|
2867
|
+
this._subs.length = 0;
|
|
2868
|
+
}
|
|
2869
|
+
}
|
|
2870
|
+
ngOnDestroy() {
|
|
2871
|
+
this._datepicker.dispose();
|
|
2872
|
+
this.isOpen$.next(false);
|
|
2873
|
+
if (this.isDestroy$) {
|
|
2874
|
+
this.isDestroy$.next(null);
|
|
2875
|
+
this.isDestroy$.complete();
|
|
2876
|
+
}
|
|
2877
|
+
this.unsubscribeSubscriptions();
|
|
2878
|
+
}
|
|
2879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDirective, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2880
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: { bsConfig: "bsConfig", container: "container", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", minMode: "minMode", isOpen: "isOpen", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit", onHidden: "onHidden", onShown: "onShown" }, exportAs: ["gravityDatePicker"], usesOnChanges: true, ngImport: i0 }); }
|
|
2881
|
+
}
|
|
2882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDirective, decorators: [{
|
|
2883
|
+
type: Directive,
|
|
2884
|
+
args: [{
|
|
2885
|
+
selector: '[gravityDatePicker]',
|
|
2886
|
+
exportAs: 'gravityDatePicker'
|
|
2887
|
+
}]
|
|
2888
|
+
}], ctorParameters: function () { return [{ type: BsDatepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
|
|
2889
|
+
type: Input
|
|
2890
|
+
}], container: [{
|
|
2891
|
+
type: Input
|
|
2892
|
+
}], isDisabled: [{
|
|
2893
|
+
type: Input
|
|
2894
|
+
}], isMobile: [{
|
|
2895
|
+
type: Input
|
|
2896
|
+
}], maxDate: [{
|
|
2897
|
+
type: Input
|
|
2898
|
+
}], minDate: [{
|
|
2899
|
+
type: Input
|
|
2900
|
+
}], minMode: [{
|
|
2901
|
+
type: Input
|
|
2902
|
+
}], bsValueChange: [{
|
|
2903
|
+
type: Output
|
|
2904
|
+
}], onApplyEmit: [{
|
|
2905
|
+
type: Output
|
|
2906
|
+
}], onHidden: [{
|
|
2907
|
+
type: Output
|
|
2908
|
+
}], onShown: [{
|
|
2909
|
+
type: Output
|
|
2910
|
+
}], isOpen: [{
|
|
2911
|
+
type: Input
|
|
2912
|
+
}], bsValue: [{
|
|
2913
|
+
type: Input
|
|
2914
|
+
}] } });
|
|
2915
|
+
|
|
2916
|
+
class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponent {
|
|
2917
|
+
constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
|
|
2918
|
+
super(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
|
|
2919
|
+
_renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
|
|
2920
|
+
_renderer.setStyle(_element.nativeElement, 'position', 'static');
|
|
2921
|
+
}
|
|
2922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerInlineContainerComponent, selector: "gt-datepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
|
|
2924
|
+
}
|
|
2925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineContainerComponent, decorators: [{
|
|
2926
|
+
type: Component,
|
|
2927
|
+
args: [{ selector: 'gt-datepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
|
|
2928
|
+
'(click)': '$event.stopPropagation()'
|
|
2929
|
+
}, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
|
|
2930
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
|
|
2931
|
+
|
|
2932
|
+
class BsDatepickerInlineConfig extends BsDatepickerConfig {
|
|
2933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2934
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineConfig, providedIn: 'root' }); }
|
|
2935
|
+
}
|
|
2936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineConfig, decorators: [{
|
|
2937
|
+
type: Injectable,
|
|
2938
|
+
args: [{
|
|
2939
|
+
providedIn: 'root'
|
|
2940
|
+
}]
|
|
2941
|
+
}] });
|
|
2942
|
+
|
|
2943
|
+
class BsDatepickerInlineDirective {
|
|
2944
|
+
/** Initial value of datepicker */
|
|
2945
|
+
set bsValue(value) {
|
|
2946
|
+
if (this._bsValue === value)
|
|
2947
|
+
return;
|
|
2948
|
+
this._bsValue = value;
|
|
2949
|
+
this.bsValueChange.emit(value);
|
|
2950
|
+
}
|
|
2951
|
+
constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) {
|
|
2952
|
+
this._config = _config;
|
|
2953
|
+
this._elementRef = _elementRef;
|
|
2954
|
+
/** Indicates whether datepicker is enabled or not */
|
|
2955
|
+
this.isDisabled = false;
|
|
2956
|
+
this.isMobile = false;
|
|
2957
|
+
/** Emits when datepicker value has been changed */
|
|
2958
|
+
this.bsValueChange = new EventEmitter();
|
|
2959
|
+
this.onApplyEmit = new EventEmitter();
|
|
2960
|
+
this._subs = [];
|
|
2961
|
+
Object.assign(this, this._config);
|
|
2962
|
+
this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
|
|
2963
|
+
}
|
|
2964
|
+
ngOnInit() {
|
|
2965
|
+
this.setConfig();
|
|
2966
|
+
this.initSubscribes();
|
|
2967
|
+
}
|
|
2968
|
+
ngOnChanges(changes) {
|
|
2969
|
+
if (changes["bsConfig"]) {
|
|
2970
|
+
this.setConfig();
|
|
2971
|
+
}
|
|
2972
|
+
if (!this._datepickerRef || !this._datepickerRef.instance)
|
|
2973
|
+
return;
|
|
2974
|
+
if (changes["isMobile"]) {
|
|
2975
|
+
this.setConfig();
|
|
2976
|
+
}
|
|
2977
|
+
if (changes["minDate"]) {
|
|
2978
|
+
this._datepickerRef.instance.minDate = this.minDate;
|
|
2979
|
+
}
|
|
2980
|
+
if (changes["maxDate"]) {
|
|
2981
|
+
this._datepickerRef.instance.maxDate = this.maxDate;
|
|
2982
|
+
}
|
|
2983
|
+
if (changes["isDisabled"]) {
|
|
2984
|
+
this._datepickerRef.instance.isDisabled = this.isDisabled;
|
|
2985
|
+
}
|
|
2986
|
+
this.setConfig();
|
|
2987
|
+
}
|
|
2988
|
+
initSubscribes() {
|
|
2989
|
+
this.unsubscribeSubscriptions();
|
|
2990
|
+
// if date changes from external source (model -> view)
|
|
2991
|
+
this._subs.push(this.bsValueChange.subscribe((value) => {
|
|
2992
|
+
if (this._datepickerRef) {
|
|
2993
|
+
this._datepickerRef.instance.value = value;
|
|
2994
|
+
}
|
|
2995
|
+
}));
|
|
2996
|
+
// if date changes from picker (view -> model)
|
|
2997
|
+
if (this._datepickerRef) {
|
|
2998
|
+
this._subs.push(this._datepickerRef.instance.valueChange.subscribe((value) => {
|
|
2999
|
+
this.bsValue = value;
|
|
3000
|
+
}));
|
|
3001
|
+
this._subs.push(this._datepickerRef.instance.onApplyChange.subscribe(() => {
|
|
3002
|
+
this.onApplyEmit.emit();
|
|
3003
|
+
}));
|
|
3004
|
+
}
|
|
3005
|
+
}
|
|
3006
|
+
unsubscribeSubscriptions() {
|
|
3007
|
+
if (this._subs?.length) {
|
|
3008
|
+
this._subs.map((sub) => sub.unsubscribe());
|
|
3009
|
+
this._subs.length = 0;
|
|
3010
|
+
}
|
|
3011
|
+
}
|
|
3012
|
+
/** Set config for datepicker */
|
|
3013
|
+
setConfig() {
|
|
3014
|
+
if (this._datepicker) {
|
|
3015
|
+
this._datepicker.hide();
|
|
3016
|
+
}
|
|
3017
|
+
this._config = Object.assign({}, this._config, this.bsConfig, {
|
|
3018
|
+
value: checkBsValue(this._bsValue, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
3019
|
+
isDisabled: this.isDisabled,
|
|
3020
|
+
isMobile: this.isMobile || this.bsConfig && this.bsConfig.isMobile,
|
|
3021
|
+
minMode: this.minMode || this.bsConfig && this.bsConfig.minMode,
|
|
3022
|
+
minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
|
|
3023
|
+
maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate
|
|
3024
|
+
});
|
|
3025
|
+
this._datepickerRef = this._datepicker
|
|
3026
|
+
.provide({ provide: BsDatepickerConfig, useValue: this._config })
|
|
3027
|
+
.attach(BsDatepickerInlineContainerComponent)
|
|
3028
|
+
.to(this._elementRef)
|
|
3029
|
+
.show();
|
|
3030
|
+
this.initSubscribes();
|
|
3031
|
+
}
|
|
3032
|
+
ngOnDestroy() {
|
|
3033
|
+
this._datepicker.dispose();
|
|
3034
|
+
this.unsubscribeSubscriptions();
|
|
3035
|
+
}
|
|
3036
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineDirective, deps: [{ token: BsDatepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3037
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", minMode: "minMode", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit" }, exportAs: ["gravityDatePickerInline"], usesOnChanges: true, ngImport: i0 }); }
|
|
3038
|
+
}
|
|
3039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineDirective, decorators: [{
|
|
3040
|
+
type: Directive,
|
|
3041
|
+
args: [{
|
|
3042
|
+
selector: '[gravityDatePickerInline]',
|
|
3043
|
+
exportAs: 'gravityDatePickerInline'
|
|
3044
|
+
}]
|
|
3045
|
+
}], ctorParameters: function () { return [{ type: BsDatepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
|
|
3046
|
+
type: Input
|
|
3047
|
+
}], isDisabled: [{
|
|
3048
|
+
type: Input
|
|
3049
|
+
}], isMobile: [{
|
|
3050
|
+
type: Input
|
|
3051
|
+
}], maxDate: [{
|
|
3052
|
+
type: Input
|
|
3053
|
+
}], minDate: [{
|
|
3054
|
+
type: Input
|
|
3055
|
+
}], minMode: [{
|
|
3056
|
+
type: Input
|
|
3057
|
+
}], bsValueChange: [{
|
|
3058
|
+
type: Output
|
|
3059
|
+
}], onApplyEmit: [{
|
|
3060
|
+
type: Output
|
|
3061
|
+
}], bsValue: [{
|
|
3062
|
+
type: Input
|
|
3063
|
+
}] } });
|
|
3064
|
+
|
|
3065
|
+
class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
3066
|
+
set value(value) {
|
|
3067
|
+
this._effects?.setRangeValue(value);
|
|
3068
|
+
}
|
|
3069
|
+
constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
|
|
3070
|
+
super(_config);
|
|
3071
|
+
this._config = _config;
|
|
3072
|
+
this._callbacks = _callbacks;
|
|
3073
|
+
this._store = _store;
|
|
3074
|
+
this._element = _element;
|
|
3075
|
+
this._actions = _actions;
|
|
3076
|
+
this._positionService = _positionService;
|
|
3077
|
+
this.chosenRange = [];
|
|
3078
|
+
this.isRangePicker = true;
|
|
3079
|
+
this._rangeStack = [];
|
|
3080
|
+
this.valueChange = new EventEmitter();
|
|
3081
|
+
this.onApplyChange = new EventEmitter();
|
|
3082
|
+
this._effects = _effects;
|
|
3083
|
+
_renderer.setStyle(_element.nativeElement, 'display', 'block');
|
|
3084
|
+
_renderer.setStyle(_element.nativeElement, 'position', 'absolute');
|
|
3085
|
+
}
|
|
3086
|
+
ngOnInit() {
|
|
3087
|
+
this._positionService.setOptions({
|
|
3088
|
+
modifiers: {
|
|
3089
|
+
flip: { enabled: this._config.adaptivePosition },
|
|
3090
|
+
preventOverflow: { enabled: this._config.adaptivePosition }
|
|
3091
|
+
},
|
|
3092
|
+
allowedPositions: ['top', 'bottom']
|
|
3093
|
+
});
|
|
3094
|
+
this._positionService.event$?.pipe(take(1)).subscribe(() => {
|
|
3095
|
+
this._positionService.disable();
|
|
3096
|
+
if (this._config.isAnimated) {
|
|
3097
|
+
this.animationState = this.isTopPosition ? 'animated-up' : 'animated-down';
|
|
3098
|
+
}
|
|
3099
|
+
else {
|
|
3100
|
+
this.animationState = 'unanimated';
|
|
3101
|
+
}
|
|
3102
|
+
});
|
|
3103
|
+
this.isOtherMonthsActive = this._config.selectFromOtherMonth;
|
|
3104
|
+
this._effects?.init(this._store)
|
|
3105
|
+
// intial state options
|
|
3106
|
+
.setOptions(this._config)
|
|
3107
|
+
// data binding view --> model
|
|
3108
|
+
.setBindings(this)
|
|
3109
|
+
// set event handlers
|
|
3110
|
+
.setEventHandlers(this)
|
|
3111
|
+
.registerDatepickerSideEffects();
|
|
3112
|
+
// on selected date change
|
|
3113
|
+
this._subs.push(this._store.select((state) => state.selectedRange).subscribe((dateRange) => {
|
|
3114
|
+
this.valueChange.emit(dateRange);
|
|
3115
|
+
this.chosenRange = dateRange || [];
|
|
3116
|
+
}));
|
|
3117
|
+
}
|
|
3118
|
+
get isTopPosition() {
|
|
3119
|
+
return this._element.nativeElement.classList.contains('top');
|
|
3120
|
+
}
|
|
3121
|
+
positionServiceEnable() {
|
|
3122
|
+
this._positionService.enable();
|
|
3123
|
+
}
|
|
3124
|
+
daySelectHandler(day) {
|
|
3125
|
+
if (!day)
|
|
3126
|
+
return;
|
|
3127
|
+
const isDisabled = this.isOtherMonthsActive ? day.isDisabled : day.isOtherMonth || day.isDisabled;
|
|
3128
|
+
if (isDisabled)
|
|
3129
|
+
return;
|
|
3130
|
+
this.rangesProcessing(day);
|
|
3131
|
+
}
|
|
3132
|
+
monthSelectHandler(day) {
|
|
3133
|
+
if (!day || day.isDisabled)
|
|
3134
|
+
return;
|
|
3135
|
+
day.isSelected = true;
|
|
3136
|
+
if (this._config.minMode !== 'month') {
|
|
3137
|
+
if (day.isDisabled)
|
|
3138
|
+
return;
|
|
3139
|
+
this._store.dispatch(this._actions.navigateTo({
|
|
3140
|
+
unit: { month: getMonth(day.date), year: getFullYear(day.date) },
|
|
3141
|
+
viewMode: 'day'
|
|
3142
|
+
}));
|
|
3143
|
+
return;
|
|
3144
|
+
}
|
|
3145
|
+
this.rangesProcessing(day);
|
|
3146
|
+
}
|
|
3147
|
+
yearSelectHandler(day) {
|
|
3148
|
+
if (!day || day.isDisabled)
|
|
3149
|
+
return;
|
|
3150
|
+
day.isSelected = true;
|
|
3151
|
+
if (this._config.minMode !== 'year') {
|
|
3152
|
+
if (day.isDisabled)
|
|
3153
|
+
return;
|
|
3154
|
+
this._store.dispatch(this._actions.navigateTo({
|
|
3155
|
+
unit: { year: getFullYear(day.date) },
|
|
3156
|
+
viewMode: 'month'
|
|
3157
|
+
}));
|
|
3158
|
+
return;
|
|
3159
|
+
}
|
|
3160
|
+
this.rangesProcessing(day);
|
|
3161
|
+
}
|
|
3162
|
+
rangesProcessing(day) {
|
|
3163
|
+
// if only one date is already selected and user clicks on previous date
|
|
3164
|
+
// start selection from new date but if new date is after initial one
|
|
3165
|
+
// than finish selection
|
|
3166
|
+
if (this._rangeStack.length === 1) {
|
|
3167
|
+
this._rangeStack = day.date >= this._rangeStack[0] ? [this._rangeStack[0], day.date] : [day.date];
|
|
3168
|
+
}
|
|
3169
|
+
if (this._config.maxDateRange) {
|
|
3170
|
+
this.setMaxDateRangeOnCalendar(day.date);
|
|
3171
|
+
}
|
|
3172
|
+
if (this._rangeStack.length === 0) {
|
|
3173
|
+
this._rangeStack = [day.date];
|
|
3174
|
+
if (this._config.maxDateRange) {
|
|
3175
|
+
this.setMaxDateRangeOnCalendar(day.date);
|
|
3176
|
+
}
|
|
3177
|
+
}
|
|
3178
|
+
this._store.dispatch(this._actions.selectRange(this._rangeStack));
|
|
3179
|
+
if (this._rangeStack.length === 2) {
|
|
3180
|
+
this._rangeStack = [];
|
|
3181
|
+
}
|
|
3182
|
+
}
|
|
3183
|
+
ngOnDestroy() {
|
|
3184
|
+
for (const sub of this._subs) {
|
|
3185
|
+
sub.unsubscribe();
|
|
3186
|
+
}
|
|
3187
|
+
this._effects?.destroy();
|
|
3188
|
+
}
|
|
3189
|
+
setRangeOnCalendar(dates) {
|
|
3190
|
+
if (dates) {
|
|
3191
|
+
this._rangeStack = dates.value instanceof Date ? [dates.value] : dates.value;
|
|
3192
|
+
}
|
|
3193
|
+
this._store.dispatch(this._actions.selectRange(this._rangeStack));
|
|
3194
|
+
}
|
|
3195
|
+
setMaxDateRangeOnCalendar(currentSelection) {
|
|
3196
|
+
let maxDateRange = new Date(currentSelection);
|
|
3197
|
+
if (this._config.maxDate) {
|
|
3198
|
+
const maxDateValueInMilliseconds = this._config.maxDate.getTime();
|
|
3199
|
+
const maxDateRangeInMilliseconds = currentSelection.getTime() + (this._config.maxDateRange || 0) * dayInMilliseconds;
|
|
3200
|
+
maxDateRange = maxDateRangeInMilliseconds > maxDateValueInMilliseconds ? new Date(this._config.maxDate) : new Date(maxDateRangeInMilliseconds);
|
|
3201
|
+
}
|
|
3202
|
+
else {
|
|
3203
|
+
maxDateRange.setDate(currentSelection.getDate() + (this._config.maxDateRange || 0));
|
|
3204
|
+
}
|
|
3205
|
+
this._effects?.setMaxDate(maxDateRange);
|
|
3206
|
+
}
|
|
3207
|
+
clearDate() {
|
|
3208
|
+
if (!this.isEmpty) {
|
|
3209
|
+
this._store.dispatch(this._actions.selectRange([]));
|
|
3210
|
+
}
|
|
3211
|
+
}
|
|
3212
|
+
apply() {
|
|
3213
|
+
if (!this.isEmpty) {
|
|
3214
|
+
if (this.onApplyChange) {
|
|
3215
|
+
this.onApplyChange.emit();
|
|
3216
|
+
}
|
|
3217
|
+
if (this._callbacks?.hide) {
|
|
3218
|
+
this._callbacks.hide();
|
|
3219
|
+
}
|
|
3220
|
+
}
|
|
3221
|
+
}
|
|
3222
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerContainerComponent, selector: "gt-daterangepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
|
|
3224
|
+
}
|
|
3225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerContainerComponent, decorators: [{
|
|
3226
|
+
type: Component,
|
|
3227
|
+
args: [{ selector: 'gt-daterangepicker-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
|
|
3228
|
+
'aria-label': 'calendar',
|
|
3229
|
+
class: 'bottom',
|
|
3230
|
+
'(click)': '$event.stopPropagation()',
|
|
3231
|
+
role: 'dialog',
|
|
3232
|
+
}, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
|
|
3233
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
|
|
3234
|
+
|
|
3235
|
+
class BsDaterangepickerConfig extends BsDatepickerConfig {
|
|
3236
|
+
constructor() {
|
|
3237
|
+
super(...arguments);
|
|
3238
|
+
this.displayMonths = 2;
|
|
3239
|
+
}
|
|
3240
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3241
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerConfig, providedIn: 'root' }); }
|
|
3242
|
+
}
|
|
3243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerConfig, decorators: [{
|
|
3244
|
+
type: Injectable,
|
|
3245
|
+
args: [{
|
|
3246
|
+
providedIn: 'root'
|
|
3247
|
+
}]
|
|
3248
|
+
}] });
|
|
3249
|
+
|
|
3250
|
+
let previousDate;
|
|
3251
|
+
class BsDaterangepickerDirective {
|
|
3252
|
+
/** Returns whether or not the daterangepicker is currently being shown */
|
|
3253
|
+
get isOpen() {
|
|
3254
|
+
return this._datepicker.isShown;
|
|
3255
|
+
}
|
|
3256
|
+
set isOpen(value) {
|
|
3257
|
+
this.isOpen$.next(value);
|
|
3258
|
+
}
|
|
3259
|
+
/** Initial value of daterangepicker */
|
|
3260
|
+
set bsValue(value) {
|
|
3261
|
+
if (this._bsValue === value)
|
|
3262
|
+
return;
|
|
3263
|
+
this.initPreviousValue();
|
|
3264
|
+
this._bsValue = value;
|
|
3265
|
+
this.bsValueChange.emit(value);
|
|
3266
|
+
}
|
|
3267
|
+
constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) {
|
|
3268
|
+
this._config = _config;
|
|
3269
|
+
this._elementRef = _elementRef;
|
|
3270
|
+
this._renderer = _renderer;
|
|
3271
|
+
/** A selector specifying the element the daterangepicker should be appended to. */
|
|
3272
|
+
this.container = 'body';
|
|
3273
|
+
/** Indicates whether daterangepicker's content is enabled or not */
|
|
3274
|
+
this.isDisabled = false;
|
|
3275
|
+
this.isMobile = false;
|
|
3276
|
+
/** Emits when daterangepicker value has been changed */
|
|
3277
|
+
this.bsValueChange = new EventEmitter();
|
|
3278
|
+
this.onApplyEmit = new EventEmitter();
|
|
3279
|
+
this._subs = [];
|
|
3280
|
+
this.isDestroy$ = new Subject();
|
|
3281
|
+
this._rangeInputFormat$ = new Subject();
|
|
3282
|
+
Object.assign(this, _config);
|
|
3283
|
+
this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
|
|
3284
|
+
this.isOpen$ = new BehaviorSubject(this.isOpen);
|
|
3285
|
+
this.onHidden = this._datepicker.onHidden;
|
|
3286
|
+
this.onShown = this._datepicker.onShown;
|
|
3287
|
+
}
|
|
3288
|
+
ngOnInit() {
|
|
3289
|
+
this._datepicker.listen({
|
|
3290
|
+
outsideClick: true,
|
|
3291
|
+
outsideEsc: true,
|
|
3292
|
+
triggers: 'click',
|
|
3293
|
+
show: () => this.show()
|
|
3294
|
+
});
|
|
3295
|
+
this.initPreviousValue();
|
|
3296
|
+
this.setConfig();
|
|
3297
|
+
}
|
|
3298
|
+
initPreviousValue() {
|
|
3299
|
+
previousDate = this._bsValue;
|
|
3300
|
+
}
|
|
3301
|
+
ngOnChanges(changes) {
|
|
3302
|
+
if (changes["bsConfig"]) {
|
|
3303
|
+
this.setConfig();
|
|
3304
|
+
this._rangeInputFormat$.next('L');
|
|
3305
|
+
}
|
|
3306
|
+
if (!this._datepickerRef || !this._datepickerRef.instance)
|
|
3307
|
+
return;
|
|
3308
|
+
if (changes["minDate"]) {
|
|
3309
|
+
this._datepickerRef.instance.minDate = this.minDate;
|
|
3310
|
+
}
|
|
3311
|
+
if (changes["maxDate"]) {
|
|
3312
|
+
this._datepickerRef.instance.maxDate = this.maxDate;
|
|
3313
|
+
}
|
|
3314
|
+
if (changes["isDisabled"]) {
|
|
3315
|
+
this._datepickerRef.instance.isDisabled = this.isDisabled;
|
|
3316
|
+
}
|
|
3317
|
+
}
|
|
3318
|
+
ngAfterViewInit() {
|
|
3319
|
+
this.isOpen$.pipe(filter(isOpen => isOpen !== this.isOpen), takeUntil(this.isDestroy$)).subscribe(() => this.toggle());
|
|
3320
|
+
}
|
|
3321
|
+
initSubscribes() {
|
|
3322
|
+
// if date changes from external source (model -> view)
|
|
3323
|
+
this._subs.push(this.bsValueChange.subscribe((value) => {
|
|
3324
|
+
if (this._datepickerRef) {
|
|
3325
|
+
this._datepickerRef.instance.value = value;
|
|
3326
|
+
}
|
|
3327
|
+
}));
|
|
3328
|
+
// if date changes from picker (view -> model)
|
|
3329
|
+
if (this._datepickerRef) {
|
|
3330
|
+
this._subs.push(this._datepickerRef.instance.valueChange
|
|
3331
|
+
.pipe(filter((range) => {
|
|
3332
|
+
if (range.length == 0)
|
|
3333
|
+
return true;
|
|
3334
|
+
if (range.length == 2)
|
|
3335
|
+
return range && range[0] && !!range[1];
|
|
3336
|
+
}))
|
|
3337
|
+
.subscribe((value) => {
|
|
3338
|
+
this.initPreviousValue();
|
|
3339
|
+
this.bsValue = value;
|
|
3340
|
+
// TODO ebiazzetti keep modal open after select the dates
|
|
3341
|
+
if (this.keepDatepickerModalOpened())
|
|
3342
|
+
return;
|
|
3343
|
+
this.hide();
|
|
3344
|
+
}));
|
|
3345
|
+
this._subs.push(this._datepickerRef.instance.onApplyChange.subscribe(() => {
|
|
3346
|
+
this.onApplyEmit.emit();
|
|
3347
|
+
}));
|
|
3348
|
+
}
|
|
3349
|
+
}
|
|
3350
|
+
keepDatepickerModalOpened() {
|
|
3351
|
+
if (!previousDate || !this.bsConfig?.keepDatepickerOpened)
|
|
3352
|
+
return false;
|
|
3353
|
+
return this.isDateSame();
|
|
3354
|
+
}
|
|
3355
|
+
isDateSame() {
|
|
3356
|
+
return ((this._bsValue?.[0]?.getDate() === previousDate?.[0]?.getDate())
|
|
3357
|
+
&& (this._bsValue?.[0]?.getMonth() === previousDate?.[0]?.getMonth())
|
|
3358
|
+
&& (this._bsValue?.[0]?.getFullYear() === previousDate?.[0]?.getFullYear())
|
|
3359
|
+
&& (this._bsValue?.[1]?.getDate() === previousDate?.[1]?.getDate())
|
|
3360
|
+
&& (this._bsValue?.[1]?.getMonth() === previousDate?.[1]?.getMonth())
|
|
3361
|
+
&& (this._bsValue?.[1]?.getFullYear() === previousDate?.[1]?.getFullYear()));
|
|
3362
|
+
}
|
|
3363
|
+
/** Opens an element’s datepicker. This is considered a “manual” triggering of the datepicker */
|
|
3364
|
+
show() {
|
|
3365
|
+
if (this._datepicker.isShown)
|
|
3366
|
+
return;
|
|
3367
|
+
this.setConfig();
|
|
3368
|
+
const callbacks = new BsDatepickerCallbacks();
|
|
3369
|
+
callbacks.hide = this.hide.bind(this);
|
|
3370
|
+
this._datepickerRef = this._datepicker
|
|
3371
|
+
.provide({ provide: BsDatepickerConfig, useValue: this._config })
|
|
3372
|
+
.provide({ provide: BsDatepickerCallbacks, useValue: callbacks })
|
|
3373
|
+
.attach(BsDaterangepickerContainerComponent)
|
|
3374
|
+
.to(this.container)
|
|
3375
|
+
.position({ attachment: 'bottom' })
|
|
3376
|
+
.show({ placement: 'bottom' });
|
|
3377
|
+
this.initSubscribes();
|
|
3378
|
+
}
|
|
3379
|
+
/** Closes an element’s datepicker. This is considered a “manual” triggering of the datepicker. */
|
|
3380
|
+
hide() {
|
|
3381
|
+
if (this.isOpen) {
|
|
3382
|
+
this._datepicker.hide();
|
|
3383
|
+
}
|
|
3384
|
+
for (const sub of this._subs) {
|
|
3385
|
+
sub.unsubscribe();
|
|
3386
|
+
}
|
|
3387
|
+
}
|
|
3388
|
+
/** Toggles an element’s datepicker. This is considered a “manual” triggering of the datepicker. */
|
|
3389
|
+
toggle() {
|
|
3390
|
+
if (this.isOpen) {
|
|
3391
|
+
return this.hide();
|
|
3392
|
+
}
|
|
3393
|
+
this.show();
|
|
3394
|
+
}
|
|
3395
|
+
/** Set config for daterangepicker */
|
|
3396
|
+
setConfig() {
|
|
3397
|
+
this._config = Object.assign({}, this._config, this.bsConfig, {
|
|
3398
|
+
value: checkBsValue(this._bsValue, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
3399
|
+
isDisabled: this.isDisabled,
|
|
3400
|
+
isMobile: this.isMobile || this.bsConfig && this.bsConfig.isMobile,
|
|
3401
|
+
minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
|
|
3402
|
+
maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
|
|
3403
|
+
ranges: checkRangesWithMaxDate(this.bsConfig && this.bsConfig.ranges, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
3404
|
+
maxDateRange: this.bsConfig && this.bsConfig.maxDateRange,
|
|
3405
|
+
keepDatepickerOpened: this.bsConfig?.keepDatepickerOpened
|
|
3406
|
+
});
|
|
3407
|
+
}
|
|
3408
|
+
unsubscribeSubscriptions() {
|
|
3409
|
+
if (this._subs?.length) {
|
|
3410
|
+
this._subs.map((sub) => sub.unsubscribe());
|
|
3411
|
+
this._subs.length = 0;
|
|
3412
|
+
}
|
|
3413
|
+
}
|
|
3414
|
+
ngOnDestroy() {
|
|
3415
|
+
this._datepicker.dispose();
|
|
3416
|
+
this.isOpen$.next(false);
|
|
3417
|
+
if (this.isDestroy$) {
|
|
3418
|
+
this.isDestroy$.next(null);
|
|
3419
|
+
this.isDestroy$.complete();
|
|
3420
|
+
}
|
|
3421
|
+
this.unsubscribeSubscriptions();
|
|
3422
|
+
}
|
|
3423
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerDirective, deps: [{ token: BsDaterangepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3424
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: { bsConfig: "bsConfig", container: "container", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", isOpen: "isOpen", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit", onHidden: "onHidden", onShown: "onShown" }, exportAs: ["gravityRangePicker"], usesOnChanges: true, ngImport: i0 }); }
|
|
3425
|
+
}
|
|
3426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerDirective, decorators: [{
|
|
3427
|
+
type: Directive,
|
|
3428
|
+
args: [{
|
|
3429
|
+
selector: '[gravityRangePicker]',
|
|
3430
|
+
exportAs: 'gravityRangePicker'
|
|
3431
|
+
}]
|
|
3432
|
+
}], ctorParameters: function () { return [{ type: BsDaterangepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
|
|
3433
|
+
type: Input
|
|
3434
|
+
}], container: [{
|
|
3435
|
+
type: Input
|
|
3436
|
+
}], isDisabled: [{
|
|
3437
|
+
type: Input
|
|
3438
|
+
}], isMobile: [{
|
|
3439
|
+
type: Input
|
|
3440
|
+
}], maxDate: [{
|
|
3441
|
+
type: Input
|
|
3442
|
+
}], minDate: [{
|
|
3443
|
+
type: Input
|
|
3444
|
+
}], bsValueChange: [{
|
|
3445
|
+
type: Output
|
|
3446
|
+
}], onApplyEmit: [{
|
|
3447
|
+
type: Output
|
|
3448
|
+
}], onHidden: [{
|
|
3449
|
+
type: Output
|
|
3450
|
+
}], onShown: [{
|
|
3451
|
+
type: Output
|
|
3452
|
+
}], isOpen: [{
|
|
3453
|
+
type: Input
|
|
3454
|
+
}], bsValue: [{
|
|
3455
|
+
type: Input
|
|
3456
|
+
}] } });
|
|
3457
|
+
|
|
3458
|
+
class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContainerComponent {
|
|
3459
|
+
constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
|
|
3460
|
+
super(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
|
|
3461
|
+
_renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
|
|
3462
|
+
_renderer.setStyle(_element.nativeElement, 'position', 'static');
|
|
3463
|
+
}
|
|
3464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerInlineContainerComponent, selector: "gt-daterangepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
|
|
3466
|
+
}
|
|
3467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, decorators: [{
|
|
3468
|
+
type: Component,
|
|
3469
|
+
args: [{ selector: 'gt-daterangepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
|
|
3470
|
+
'(click)': '$event.stopPropagation()'
|
|
3471
|
+
}, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n <div class=\"gt-calendar-topbar-indicator\">\n <ng-container *ngIf=\"isRangePicker\">\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n [class.sm-bold]=\"chosenRange?.length == 0\">\n <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n </p>\n <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n [class.sm-bold]=\"chosenRange?.length == 1\">\n <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n <ng-container *ngIf=\"!isRangePicker\">\n <p class=\"hr-title sm-bold\">\n <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n </p>\n </ng-container>\n </div>\n\n <hr class=\"gt-calendar-topbar-line\">\n </ng-container>\n\n <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n <!--days calendar-->\n <ng-container *ngSwitchCase=\"'day'\">\n <bs-days-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [isDisabled]=\"isDisabled\"\n [options]=\"options$ | async\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n (onHover)=\"dayHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"daySelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n </ng-container>\n\n <!--months calendar-->\n <ng-container *ngSwitchCase=\"'month'\">\n <bs-month-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n (onHover)=\"monthHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"monthSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n </ng-container>\n\n <!--years calendar-->\n <ng-container *ngSwitchCase=\"'year'\">\n <bs-years-calendar-view [calendar]=\"calendar\"\n [calendarIndex]=\"i\"\n [showNavigationArrows]=\"showNavigationArrows\"\n [size]=\"calendarSize\"\n\n *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n (onHover)=\"yearHoverHandler($event)\"\n (onNavigate)=\"navigateTo($event)\"\n (onSelect)=\"yearSelectHandler($event)\"\n (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n </ng-container>\n </div>\n\n <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n [class.not-clearable]=\"!_config.clearable\">\n <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n *ngIf=\"_config.clearable\">\n Clear selection\n </p>\n <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.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-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:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{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-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:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
|
|
3472
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
|
|
3473
|
+
|
|
3474
|
+
class BsDaterangepickerInlineConfig extends BsDatepickerConfig {
|
|
3475
|
+
constructor() {
|
|
3476
|
+
super(...arguments);
|
|
3477
|
+
this.displayMonths = 2;
|
|
3478
|
+
}
|
|
3479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3480
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineConfig, providedIn: 'root' }); }
|
|
3481
|
+
}
|
|
3482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineConfig, decorators: [{
|
|
3483
|
+
type: Injectable,
|
|
3484
|
+
args: [{
|
|
3485
|
+
providedIn: 'root'
|
|
3486
|
+
}]
|
|
3487
|
+
}] });
|
|
3488
|
+
|
|
3489
|
+
class BsDaterangepickerInlineDirective {
|
|
3490
|
+
/** Initial value of datepicker */
|
|
3491
|
+
set bsValue(value) {
|
|
3492
|
+
if (this._bsValue === value)
|
|
3493
|
+
return;
|
|
3494
|
+
this._bsValue = value;
|
|
3495
|
+
this.bsValueChange.emit(value);
|
|
3496
|
+
}
|
|
3497
|
+
constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) {
|
|
3498
|
+
this._config = _config;
|
|
3499
|
+
this._elementRef = _elementRef;
|
|
3500
|
+
/** Indicates whether datepicker is enabled or not */
|
|
3501
|
+
this.isDisabled = false;
|
|
3502
|
+
this.isMobile = false;
|
|
3503
|
+
/** Emits when daterangepicker value has been changed */
|
|
3504
|
+
this.bsValueChange = new EventEmitter();
|
|
3505
|
+
this.onApplyEmit = new EventEmitter();
|
|
3506
|
+
this._subs = [];
|
|
3507
|
+
Object.assign(this, this._config);
|
|
3508
|
+
this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
|
|
3509
|
+
}
|
|
3510
|
+
ngOnInit() {
|
|
3511
|
+
this.setConfig();
|
|
3512
|
+
this.initSubscribes();
|
|
3513
|
+
}
|
|
3514
|
+
ngOnChanges(changes) {
|
|
3515
|
+
if (!this._datepickerRef || !this._datepickerRef.instance)
|
|
3516
|
+
return;
|
|
3517
|
+
if (changes["minDate"]) {
|
|
3518
|
+
this._datepickerRef.instance.minDate = this.minDate;
|
|
3519
|
+
}
|
|
3520
|
+
if (changes["maxDate"]) {
|
|
3521
|
+
this._datepickerRef.instance.maxDate = this.maxDate;
|
|
3522
|
+
}
|
|
3523
|
+
if (changes["isDisabled"]) {
|
|
3524
|
+
this._datepickerRef.instance.isDisabled = this.isDisabled;
|
|
3525
|
+
}
|
|
3526
|
+
this.setConfig();
|
|
3527
|
+
}
|
|
3528
|
+
initSubscribes() {
|
|
3529
|
+
this.unsubscribeSubscriptions();
|
|
3530
|
+
// if date changes from external source (model -> view)
|
|
3531
|
+
this._subs.push(this.bsValueChange.subscribe((value) => {
|
|
3532
|
+
if (this._datepickerRef) {
|
|
3533
|
+
this._datepickerRef.instance.value = value;
|
|
3534
|
+
}
|
|
3535
|
+
}));
|
|
3536
|
+
// if date changes from picker (view -> model)
|
|
3537
|
+
if (this._datepickerRef) {
|
|
3538
|
+
this._subs.push(this._datepickerRef.instance.valueChange
|
|
3539
|
+
.pipe(filter((range) => {
|
|
3540
|
+
if (range?.length == 0)
|
|
3541
|
+
return true;
|
|
3542
|
+
if (range?.length == 2)
|
|
3543
|
+
return range && range[0] && !!range[1];
|
|
3544
|
+
}))
|
|
3545
|
+
.subscribe((value) => {
|
|
3546
|
+
this.bsValue = value;
|
|
3547
|
+
}));
|
|
3548
|
+
this._subs.push(this._datepickerRef.instance.onApplyChange.subscribe(() => {
|
|
3549
|
+
this.onApplyEmit.emit();
|
|
3550
|
+
}));
|
|
3551
|
+
}
|
|
3552
|
+
}
|
|
3553
|
+
unsubscribeSubscriptions() {
|
|
3554
|
+
if (this._subs?.length) {
|
|
3555
|
+
this._subs.map((sub) => sub.unsubscribe());
|
|
3556
|
+
this._subs.length = 0;
|
|
3557
|
+
}
|
|
3558
|
+
}
|
|
3559
|
+
/** Set config for datepicker */
|
|
3560
|
+
setConfig() {
|
|
3561
|
+
if (this._datepicker) {
|
|
3562
|
+
this._datepicker.hide();
|
|
3563
|
+
}
|
|
3564
|
+
this._config = Object.assign({}, this._config, this.bsConfig, {
|
|
3565
|
+
value: checkBsValue(this._bsValue, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
3566
|
+
isDisabled: this.isDisabled,
|
|
3567
|
+
isMobile: this.isMobile || this.bsConfig && this.bsConfig.isMobile,
|
|
3568
|
+
minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
|
|
3569
|
+
maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
|
|
3570
|
+
ranges: checkRangesWithMaxDate(this.bsConfig && this.bsConfig.ranges, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
|
|
3571
|
+
maxDateRange: this.bsConfig && this.bsConfig.maxDateRange
|
|
3572
|
+
});
|
|
3573
|
+
this._datepickerRef = this._datepicker
|
|
3574
|
+
.provide({ provide: BsDatepickerConfig, useValue: this._config })
|
|
3575
|
+
.attach(BsDaterangepickerInlineContainerComponent)
|
|
3576
|
+
.to(this._elementRef)
|
|
3577
|
+
.show();
|
|
3578
|
+
this.initSubscribes();
|
|
3579
|
+
}
|
|
3580
|
+
ngOnDestroy() {
|
|
3581
|
+
this._datepicker.dispose();
|
|
3582
|
+
this.unsubscribeSubscriptions();
|
|
3583
|
+
}
|
|
3584
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineDirective, deps: [{ token: BsDaterangepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3585
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit" }, exportAs: ["gravityRangePickerInline"], usesOnChanges: true, ngImport: i0 }); }
|
|
3586
|
+
}
|
|
3587
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineDirective, decorators: [{
|
|
3588
|
+
type: Directive,
|
|
3589
|
+
args: [{
|
|
3590
|
+
selector: '[gravityRangePickerInline]',
|
|
3591
|
+
exportAs: 'gravityRangePickerInline'
|
|
3592
|
+
}]
|
|
3593
|
+
}], ctorParameters: function () { return [{ type: BsDaterangepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
|
|
3594
|
+
type: Input
|
|
3595
|
+
}], isDisabled: [{
|
|
3596
|
+
type: Input
|
|
3597
|
+
}], isMobile: [{
|
|
3598
|
+
type: Input
|
|
3599
|
+
}], maxDate: [{
|
|
3600
|
+
type: Input
|
|
3601
|
+
}], minDate: [{
|
|
3602
|
+
type: Input
|
|
3603
|
+
}], bsValueChange: [{
|
|
3604
|
+
type: Output
|
|
3605
|
+
}], onApplyEmit: [{
|
|
3606
|
+
type: Output
|
|
3607
|
+
}], bsValue: [{
|
|
3608
|
+
type: Input
|
|
3609
|
+
}] } });
|
|
3610
|
+
|
|
3611
|
+
class GravityCalendarV2Component {
|
|
3612
|
+
constructor() {
|
|
3613
|
+
// Component configuration
|
|
3614
|
+
this.clearable = true;
|
|
3615
|
+
this.currentLang = 'en';
|
|
3616
|
+
this.hasError = false;
|
|
3617
|
+
this.isDisabled = false;
|
|
3618
|
+
this.isReadonly = false;
|
|
3619
|
+
this.required = false;
|
|
3620
|
+
// Input size
|
|
3621
|
+
this.size = 'sm';
|
|
3622
|
+
this.width = 'short';
|
|
3623
|
+
// Calendar
|
|
3624
|
+
this.calendarType = 'day';
|
|
3625
|
+
this.calendarMode = 'single';
|
|
3626
|
+
this.selectionMode = 'date';
|
|
3627
|
+
this.calendarResponse = new EventEmitter();
|
|
3628
|
+
this.calendarConfiguration = {
|
|
3629
|
+
displayMonths: 1
|
|
3630
|
+
};
|
|
3631
|
+
this.displayRangePicker = false;
|
|
3632
|
+
this.focusInput = false;
|
|
3633
|
+
this.isMobile = false;
|
|
3634
|
+
this.inputLabel = '';
|
|
3635
|
+
this.maxDate = new Date();
|
|
3636
|
+
this.minDate = new Date(new Date().getUTCFullYear() - 11, 0, 1);
|
|
3637
|
+
this.showMobileCalendar = false;
|
|
3638
|
+
let milliseconds = new Date().getTime();
|
|
3639
|
+
let randomNumber = Math.random() * 10;
|
|
3640
|
+
this.elementId = '' + (milliseconds * randomNumber / 2);
|
|
3641
|
+
}
|
|
3642
|
+
ngOnInit() {
|
|
3643
|
+
this.onResize();
|
|
3644
|
+
this.updateConfig();
|
|
3645
|
+
this.calendarConfiguration.calendarSize = this.size;
|
|
3646
|
+
this.calendarConfiguration.clearable = this.clearable;
|
|
3647
|
+
if (this.customDate) {
|
|
3648
|
+
this.selectedDate = this.customDate;
|
|
3649
|
+
}
|
|
3650
|
+
if (this.customDates) {
|
|
3651
|
+
this.selectedDates = this.customDates;
|
|
3652
|
+
}
|
|
3653
|
+
}
|
|
3654
|
+
ngOnChanges(changes) {
|
|
3655
|
+
if (changes['selectionMode']) {
|
|
3656
|
+
this.selectionMode = changes['selectionMode'].currentValue;
|
|
3657
|
+
this.updateConfig();
|
|
3658
|
+
}
|
|
3659
|
+
if (changes['calendarMode']) {
|
|
3660
|
+
this.calendarMode = changes['calendarMode'].currentValue;
|
|
3661
|
+
this.updateConfig();
|
|
3662
|
+
}
|
|
3663
|
+
if (changes['clearable']) {
|
|
3664
|
+
this.calendarConfiguration.clearable = changes['clearable'].currentValue;
|
|
3665
|
+
}
|
|
3666
|
+
if (changes['size']) {
|
|
3667
|
+
this.calendarConfiguration.calendarSize = changes['size'].currentValue;
|
|
3668
|
+
}
|
|
3669
|
+
if (changes['customDate']) {
|
|
3670
|
+
this.selectedDate = changes['customDate'].currentValue;
|
|
3671
|
+
}
|
|
3672
|
+
if (changes['customDates']) {
|
|
3673
|
+
this.selectedDates = changes['customDates'].currentValue;
|
|
3674
|
+
}
|
|
3675
|
+
}
|
|
3676
|
+
updateConfig() {
|
|
3677
|
+
if (this.calendarMode == 'single' && this.selectionMode == 'date') {
|
|
3678
|
+
this.calendarConfiguration.displayMonths = 1;
|
|
3679
|
+
this.displayRangePicker = false;
|
|
3680
|
+
}
|
|
3681
|
+
if (this.calendarMode == 'single' && this.selectionMode == 'range') {
|
|
3682
|
+
this.calendarConfiguration.displayMonths = 1;
|
|
3683
|
+
this.displayRangePicker = true;
|
|
3684
|
+
}
|
|
3685
|
+
if (this.calendarMode == 'double' && this.selectionMode == 'date') {
|
|
3686
|
+
this.calendarConfiguration.displayMonths = 2;
|
|
3687
|
+
this.displayRangePicker = true;
|
|
3688
|
+
}
|
|
3689
|
+
if (this.calendarMode == 'double' && this.selectionMode == 'range') {
|
|
3690
|
+
this.calendarConfiguration.displayMonths = 2;
|
|
3691
|
+
this.displayRangePicker = true;
|
|
3692
|
+
}
|
|
3693
|
+
}
|
|
3694
|
+
updateSelectedDate($event) {
|
|
3695
|
+
if (!$event || (Array.isArray($event) && $event.length == 0)) {
|
|
3696
|
+
this.selectedDate = null;
|
|
3697
|
+
this.selectedDates = null;
|
|
3698
|
+
this.inputLabel = '';
|
|
3699
|
+
this.calendarResponse.emit(undefined);
|
|
3700
|
+
}
|
|
3701
|
+
else if ($event instanceof Date) {
|
|
3702
|
+
this.selectedDate = $event;
|
|
3703
|
+
this.inputLabel = this.formatDate($event);
|
|
3704
|
+
this.calendarResponse.emit(this.selectedDate);
|
|
3705
|
+
}
|
|
3706
|
+
else {
|
|
3707
|
+
this.selectedDates = $event;
|
|
3708
|
+
const date1 = this.formatDate($event[0]);
|
|
3709
|
+
const date2 = this.formatDate($event[1]);
|
|
3710
|
+
this.inputLabel = date1 + ' - ' + date2;
|
|
3711
|
+
this.calendarResponse.emit(this.selectedDates);
|
|
3712
|
+
}
|
|
3713
|
+
this.closeMobileCalendar();
|
|
3714
|
+
}
|
|
3715
|
+
resetCalendar() {
|
|
3716
|
+
this.selectedDate = this.customDate ? this.customDate : undefined;
|
|
3717
|
+
this.selectedDates = this.customDates ? this.customDates : undefined;
|
|
3718
|
+
if (this.selectionMode == 'date') {
|
|
3719
|
+
this.calendarResponse.emit(this.selectedDate);
|
|
3720
|
+
}
|
|
3721
|
+
else {
|
|
3722
|
+
this.calendarResponse.emit(this.selectedDates);
|
|
3723
|
+
}
|
|
3724
|
+
}
|
|
3725
|
+
getGtCalendarContainer() {
|
|
3726
|
+
return '.gravity-calendar-field[elementId="' + this.elementId + '"]';
|
|
3727
|
+
}
|
|
3728
|
+
getStatus() {
|
|
3729
|
+
if (this.isDisabled) {
|
|
3730
|
+
return 'disabled';
|
|
3731
|
+
}
|
|
3732
|
+
else if (this.isReadonly) {
|
|
3733
|
+
return 'readonly';
|
|
3734
|
+
}
|
|
3735
|
+
else if (this.hasError) {
|
|
3736
|
+
return 'error';
|
|
3737
|
+
}
|
|
3738
|
+
else if (this.focusInput) {
|
|
3739
|
+
return 'open';
|
|
3740
|
+
}
|
|
3741
|
+
else if (this.selectedDates?.length > 0 || this.selectedDate) {
|
|
3742
|
+
return 'selected';
|
|
3743
|
+
}
|
|
3744
|
+
else {
|
|
3745
|
+
return 'active';
|
|
3746
|
+
}
|
|
3747
|
+
}
|
|
3748
|
+
formatDate(date) {
|
|
3749
|
+
let formattedDate = '';
|
|
3750
|
+
let month;
|
|
3751
|
+
let day;
|
|
3752
|
+
switch (this.calendarType) {
|
|
3753
|
+
case "day":
|
|
3754
|
+
month = date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : ('' + (date.getMonth() + 1));
|
|
3755
|
+
day = date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate();
|
|
3756
|
+
formattedDate = month + '/' + day + '/' + date.getFullYear();
|
|
3757
|
+
break;
|
|
3758
|
+
case "month":
|
|
3759
|
+
month = date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : ('' + (date.getMonth() + 1));
|
|
3760
|
+
formattedDate = month + '/' + date.getFullYear();
|
|
3761
|
+
break;
|
|
3762
|
+
case "year":
|
|
3763
|
+
formattedDate = date.getFullYear().toString();
|
|
3764
|
+
break;
|
|
3765
|
+
}
|
|
3766
|
+
return formattedDate;
|
|
3767
|
+
}
|
|
3768
|
+
onResize() {
|
|
3769
|
+
this.isMobile = window.innerWidth <= 992;
|
|
3770
|
+
this.calendarConfiguration.isAnimated = !this.isMobile;
|
|
3771
|
+
this.calendarConfiguration.isMobile = this.isMobile;
|
|
3772
|
+
}
|
|
3773
|
+
openMobileCalendar() {
|
|
3774
|
+
this.showMobileCalendar = true;
|
|
3775
|
+
this.focusInput = true;
|
|
3776
|
+
}
|
|
3777
|
+
closeMobileCalendar() {
|
|
3778
|
+
this.showMobileCalendar = false;
|
|
3779
|
+
this.focusInput = false;
|
|
3780
|
+
}
|
|
3781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarV2Component, selector: "gravity-calendar-v2", inputs: { clearable: "clearable", currentLang: "currentLang", cypressTag: "cypressTag", hasError: "hasError", isDisabled: "isDisabled", isReadonly: "isReadonly", label: "label", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", width: "width", calendarType: "calendarType", calendarMode: "calendarMode", selectionMode: "selectionMode", customDate: "customDate", customDates: "customDates" }, outputs: { calendarResponse: "response" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}}\">\n <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n <div class=\"mobile-calendar-topbar\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n <div class=\"mobile-calendar-body\">\n <div class=\"calendar-container\"\n gravityDatePickerInline\n\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n\n *ngIf=\"!displayRangePicker\"></div>\n\n <div class=\"calendar-container\"\n gravityRangePickerInline\n\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n\n [(bsValue)]=\"selectedDates\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n\n *ngIf=\"displayRangePicker\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"isMobile\">\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n\n (click)=\"openMobileCalendar()\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select your dates' : 'Select your dates' + calendarType\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n gravityDatePicker\n\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n *ngIf=\"!displayRangePicker\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your ' + calendarType\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled\"\n [class.readonly]=\"isReadonly\"\n gravityRangePicker\n\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n\n [(bsValue)]=\"selectedDates\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n *ngIf=\"displayRangePicker\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your dates'\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n</p>\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{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{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);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger 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);margin-left:var(--icon-margin)}.gravity-calendar-field input{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-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-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-calendar-field.sm{--icon-margin: 5px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width{--text-field-input-field-width: 416px}.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-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)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--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-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-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(--icon-active-primary)}.gravity-calendar-field.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)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--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)}.gravity-calendar-field.readonly{cursor:initial;--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)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--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.error{--text-field-supporting-text-color: var(--negative-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}.mobile-calendar-container{background-color:var(--surface-secondary);height:100%;overflow:auto;position:fixed;width:100%;z-index:1}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{left:0;top:0;visibility:visible}.mobile-calendar-container .mobile-calendar-topbar{height:54px;padding:14px 19px 24px}.mobile-calendar-container .mobile-calendar-topbar gravity-icon{--icon-color: var(--bg-calendar-nav-primary);margin-left:auto}.mobile-calendar-container .mobile-calendar-body{height:calc(100vh - 65px);width:100%}.mobile-calendar-container .mobile-calendar-body .calendar-container{height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }, { kind: "directive", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityDatePicker"] }, { kind: "directive", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityDatePickerInline"] }, { kind: "directive", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityRangePicker"] }, { kind: "directive", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityRangePickerInline"] }] }); }
|
|
3783
|
+
}
|
|
3784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarV2Component, decorators: [{
|
|
3785
|
+
type: Component,
|
|
3786
|
+
args: [{ selector: 'gravity-calendar-v2', template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}}\">\n <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n <div class=\"mobile-calendar-topbar\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n <div class=\"mobile-calendar-body\">\n <div class=\"calendar-container\"\n gravityDatePickerInline\n\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n\n *ngIf=\"!displayRangePicker\"></div>\n\n <div class=\"calendar-container\"\n gravityRangePickerInline\n\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n\n [(bsValue)]=\"selectedDates\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n\n *ngIf=\"displayRangePicker\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"isMobile\">\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n\n (click)=\"openMobileCalendar()\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select your dates' : 'Select your dates' + calendarType\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n gravityDatePicker\n\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n *ngIf=\"!displayRangePicker\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your ' + calendarType\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled\"\n [class.readonly]=\"isReadonly\"\n gravityRangePicker\n\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n\n [(bsValue)]=\"selectedDates\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n *ngIf=\"displayRangePicker\">\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n [(ngModel)]=\"inputLabel\"\n\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your dates'\">\n <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n</p>\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{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{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);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger 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);margin-left:var(--icon-margin)}.gravity-calendar-field input{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-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-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-calendar-field.sm{--icon-margin: 5px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width{--text-field-input-field-width: 416px}.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-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)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--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-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-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(--icon-active-primary)}.gravity-calendar-field.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)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--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)}.gravity-calendar-field.readonly{cursor:initial;--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)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--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.error{--text-field-supporting-text-color: var(--negative-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}.mobile-calendar-container{background-color:var(--surface-secondary);height:100%;overflow:auto;position:fixed;width:100%;z-index:1}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{left:0;top:0;visibility:visible}.mobile-calendar-container .mobile-calendar-topbar{height:54px;padding:14px 19px 24px}.mobile-calendar-container .mobile-calendar-topbar gravity-icon{--icon-color: var(--bg-calendar-nav-primary);margin-left:auto}.mobile-calendar-container .mobile-calendar-body{height:calc(100vh - 65px);width:100%}.mobile-calendar-container .mobile-calendar-body .calendar-container{height:100%;width:100%}\n"] }]
|
|
3787
|
+
}], ctorParameters: function () { return []; }, propDecorators: { clearable: [{
|
|
3788
|
+
type: Input
|
|
3789
|
+
}], currentLang: [{
|
|
3790
|
+
type: Input
|
|
3791
|
+
}], cypressTag: [{
|
|
3792
|
+
type: Input
|
|
3793
|
+
}], hasError: [{
|
|
3794
|
+
type: Input
|
|
3795
|
+
}], isDisabled: [{
|
|
3796
|
+
type: Input
|
|
3797
|
+
}], isReadonly: [{
|
|
3798
|
+
type: Input
|
|
3799
|
+
}], label: [{
|
|
3800
|
+
type: Input
|
|
3801
|
+
}], placeholder: [{
|
|
3802
|
+
type: Input
|
|
3803
|
+
}], required: [{
|
|
3804
|
+
type: Input
|
|
3805
|
+
}], supportText: [{
|
|
3806
|
+
type: Input
|
|
3807
|
+
}], size: [{
|
|
3808
|
+
type: Input
|
|
3809
|
+
}], width: [{
|
|
3810
|
+
type: Input
|
|
3811
|
+
}], calendarType: [{
|
|
3812
|
+
type: Input
|
|
3813
|
+
}], calendarMode: [{
|
|
3814
|
+
type: Input
|
|
3815
|
+
}], selectionMode: [{
|
|
3816
|
+
type: Input
|
|
3817
|
+
}], customDate: [{
|
|
3818
|
+
type: Input
|
|
3819
|
+
}], customDates: [{
|
|
3820
|
+
type: Input
|
|
3821
|
+
}], calendarResponse: [{
|
|
3822
|
+
type: Output,
|
|
3823
|
+
args: ['response']
|
|
3824
|
+
}], onResize: [{
|
|
3825
|
+
type: HostListener,
|
|
3826
|
+
args: ['window:resize', ['$event']]
|
|
3827
|
+
}] } });
|
|
3828
|
+
|
|
1434
3829
|
class GravityRadioButtonComponent {
|
|
1435
3830
|
constructor() {
|
|
1436
3831
|
this.checked = false;
|
|
@@ -1485,7 +3880,7 @@ class GravitySwitchComponent {
|
|
|
1485
3880
|
}
|
|
1486
3881
|
}
|
|
1487
3882
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { checked: "checked", cypressTag: "cypressTag", disabled: "disabled", size: "size", textOptions: "textOptions" }, outputs: { response: "response" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-switch size-{{size}}\" [class.with-above-text]=\"textOptions?.above\"\n [class.with-below-text]=\"textOptions?.below\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"textOptions?.left\">{{ textOptions.left }}</span>\n <div [attr.data-cy]=\"cypressTag\" class=\"switch\" [class.disabled]=\"disabled\" (click)=\"toggleSwitch()\">\n <span class=\"hr-body-text sm-regular above-text\" *ngIf=\"textOptions?.above\">{{ textOptions.above }}</span>\n <input type=\"checkbox\" [checked]=\"isSwitchActive\">\n <span class=\"slider\"></span>\n <span class=\"hr-body-text sm-regular below-text\" *ngIf=\"textOptions?.below\">{{ textOptions.below }}</span>\n </div>\n <span class=\"hr-body-text sm-regular\" *ngIf=\"textOptions?.right\">{{ textOptions.right }}</span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-switch{align-items:center;display:flex;gap:8px}.gravity-switch.with-above-text{padding-top:calc(var(--above-text-top) * -1)}.gravity-switch.with-below-text{padding-bottom:calc(var(--below-text-bottom) * -1)}.gravity-switch .switch{height:var(--switch-height);position:relative;width:var(--switch-width)}.gravity-switch .switch span.above-text{left:0;position:absolute;top:var(--above-text-top)}.gravity-switch .switch span.below-text{bottom:var(--below-text-bottom);left:0;position:absolute}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border:1px solid;border-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:var(--switch-slider-size);inset:var(--switch-slider-position) auto auto var(--switch-slider-position);position:absolute;transition:.4s;width:var(--switch-slider-size);-webkit-transition:.4s}.gravity-switch .switch input:checked+.slider:before{inset:var(--switch-slider-position) var(--switch-slider-position) auto auto}.gravity-switch .switch.disabled span.slider{background-color:transparent;border-color:var(--bg-switch-disabled-primary)!important;cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)!important}.gravity-switch .switch:not(.disabled) input:checked+.slider{background-color:var(--bg-switch-on-primary);border-color:var(--bg-switch-on-primary)}.gravity-switch .switch:not(.disabled) input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary)}.gravity-switch.size-sm{--above-text-top: calc((var(--switch-slider-size) * -1) - 7.5px);--below-text-bottom: calc((var(--switch-slider-size) * -1) - 7.5px);--switch-height: 18px;--switch-slider-position: 1px;--switch-slider-size: 13.5px;--switch-width: 31.5px}.gravity-switch.size-md{--above-text-top: calc((var(--switch-slider-size) * -1) - 8px);--below-text-bottom: calc((var(--switch-slider-size) * -1) - 8px);--switch-height: 24px;--switch-slider-position: 2px;--switch-slider-size: 18px;--switch-width: 42px}\n"], dependencies: [{ kind: "directive", type:
|
|
3883
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { checked: "checked", cypressTag: "cypressTag", disabled: "disabled", size: "size", textOptions: "textOptions" }, outputs: { response: "response" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-switch size-{{size}}\" [class.with-above-text]=\"textOptions?.above\"\n [class.with-below-text]=\"textOptions?.below\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"textOptions?.left\">{{ textOptions.left }}</span>\n <div [attr.data-cy]=\"cypressTag\" class=\"switch\" [class.disabled]=\"disabled\" (click)=\"toggleSwitch()\">\n <span class=\"hr-body-text sm-regular above-text\" *ngIf=\"textOptions?.above\">{{ textOptions.above }}</span>\n <input type=\"checkbox\" [checked]=\"isSwitchActive\">\n <span class=\"slider\"></span>\n <span class=\"hr-body-text sm-regular below-text\" *ngIf=\"textOptions?.below\">{{ textOptions.below }}</span>\n </div>\n <span class=\"hr-body-text sm-regular\" *ngIf=\"textOptions?.right\">{{ textOptions.right }}</span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-switch{align-items:center;display:flex;gap:8px}.gravity-switch.with-above-text{padding-top:calc(var(--above-text-top) * -1)}.gravity-switch.with-below-text{padding-bottom:calc(var(--below-text-bottom) * -1)}.gravity-switch .switch{height:var(--switch-height);position:relative;width:var(--switch-width)}.gravity-switch .switch span.above-text{left:0;position:absolute;top:var(--above-text-top)}.gravity-switch .switch span.below-text{bottom:var(--below-text-bottom);left:0;position:absolute}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border:1px solid;border-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:var(--switch-slider-size);inset:var(--switch-slider-position) auto auto var(--switch-slider-position);position:absolute;transition:.4s;width:var(--switch-slider-size);-webkit-transition:.4s}.gravity-switch .switch input:checked+.slider:before{inset:var(--switch-slider-position) var(--switch-slider-position) auto auto}.gravity-switch .switch.disabled span.slider{background-color:transparent;border-color:var(--bg-switch-disabled-primary)!important;cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)!important}.gravity-switch .switch:not(.disabled) input:checked+.slider{background-color:var(--bg-switch-on-primary);border-color:var(--bg-switch-on-primary)}.gravity-switch .switch:not(.disabled) input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary)}.gravity-switch.size-sm{--above-text-top: calc((var(--switch-slider-size) * -1) - 7.5px);--below-text-bottom: calc((var(--switch-slider-size) * -1) - 7.5px);--switch-height: 18px;--switch-slider-position: 1px;--switch-slider-size: 13.5px;--switch-width: 31.5px}.gravity-switch.size-md{--above-text-top: calc((var(--switch-slider-size) * -1) - 8px);--below-text-bottom: calc((var(--switch-slider-size) * -1) - 8px);--switch-height: 24px;--switch-slider-position: 2px;--switch-slider-size: 18px;--switch-width: 42px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1489
3884
|
}
|
|
1490
3885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, decorators: [{
|
|
1491
3886
|
type: Component,
|
|
@@ -1514,13 +3909,13 @@ class GravityDialogComponent {
|
|
|
1514
3909
|
isNewIcon(iconName) {
|
|
1515
3910
|
return GravityIconComponent.isNewIcon(iconName);
|
|
1516
3911
|
}
|
|
1517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$
|
|
1518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n {{ dialogContent.title }}\n </div>\n <gravity-icon [attr.data-cy]=\"dialogContent.closeIconCypressTag\" class=\"close\" (click)=\"closeModal()\"\n [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n <ng-container\n *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type:
|
|
3912
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3913
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n {{ dialogContent.title }}\n </div>\n <gravity-icon [attr.data-cy]=\"dialogContent.closeIconCypressTag\" class=\"close\" (click)=\"closeModal()\"\n [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n <ng-container\n *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i7.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1519
3914
|
}
|
|
1520
3915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, decorators: [{
|
|
1521
3916
|
type: Component,
|
|
1522
3917
|
args: [{ template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n {{ dialogContent.title }}\n </div>\n <gravity-icon [attr.data-cy]=\"dialogContent.closeIconCypressTag\" class=\"close\" (click)=\"closeModal()\"\n [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n <ng-container\n *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
|
|
1523
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
3918
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
|
|
1524
3919
|
type: Input
|
|
1525
3920
|
}] } });
|
|
1526
3921
|
|
|
@@ -1531,13 +3926,13 @@ class GravityNotificationComponent {
|
|
|
1531
3926
|
closeModal() {
|
|
1532
3927
|
this.ngbActiveModal.close();
|
|
1533
3928
|
}
|
|
1534
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$
|
|
1535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationComponent, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\"></gravity-icon>\n\n <div class=\"title\">\n <!--TODO ebiazzetti change icons-->\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\" [size]=\"'md'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type:
|
|
3929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationComponent, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\"></gravity-icon>\n\n <div class=\"title\">\n <!--TODO ebiazzetti change icons-->\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\" [size]=\"'md'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1536
3931
|
}
|
|
1537
3932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationComponent, decorators: [{
|
|
1538
3933
|
type: Component,
|
|
1539
3934
|
args: [{ template: "<main class=\"alert-content {{notificationContent.state}}\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\"></gravity-icon>\n\n <div class=\"title\">\n <!--TODO ebiazzetti change icons-->\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\" [size]=\"'md'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
|
|
1540
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
3935
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { notificationContent: [{
|
|
1541
3936
|
type: Input
|
|
1542
3937
|
}] } });
|
|
1543
3938
|
|
|
@@ -1568,7 +3963,7 @@ class GravityNotificationInstantContainerComponent {
|
|
|
1568
3963
|
this.delay = 5000;
|
|
1569
3964
|
}
|
|
1570
3965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <!--TODO ebiazzetti change icons-->\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type:
|
|
3966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <!--TODO ebiazzetti change icons-->\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$1.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1572
3967
|
}
|
|
1573
3968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
|
|
1574
3969
|
type: Component,
|
|
@@ -1627,7 +4022,7 @@ class GravityAttachFileComponent {
|
|
|
1627
4022
|
this.fileValueAsBase64StringResponse.emit('');
|
|
1628
4023
|
}
|
|
1629
4024
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAttachFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAttachFileComponent, selector: "gravity-attach-file", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", inputId: "inputId", label: "label", required: "required", state: "state", supportedDocumentTypes: "supportedDocumentTypes", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { fileValueAsBase64StringResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-attach-file {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\">\n <ng-container *ngIf=\"!file\">\n <input autocomplete=\"off\" class=\"hr-label md-regular\" hidden id=\"fileInput-{{inputId}}\" type=\"file\"\n [accept]=\"supportedTypes\"\n [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n\n (change)=\"handleFileInput($event)\">\n <label for=\"fileInput-{{inputId}}\">\n <gravity-button [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{label}}\n </gravity-button>\n </label>\n </ng-container>\n <ng-container *ngIf=\"file\">\n <label>\n <gravity-button (click)=\"removeFile()\" [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{currentLang == 'en' ? 'Remove file' : 'Remover archivo'}}\n </gravity-button>\n </label>\n <h3 class=\"hr-body-text sm-bold\">{{currentLang == 'en' ? 'File' : 'Archivo'}}: {{file.name}}</h3>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".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);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-attach-file{align-items:center;display:flex}.gravity-attach-file label{cursor:pointer}.gravity-attach-file label:hover gravity-button ::ng-deep button{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}gravity-button,gravity-button ::ng-deep button{pointer-events:none}\n"], dependencies: [{ kind: "directive", type:
|
|
4025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityAttachFileComponent, selector: "gravity-attach-file", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", inputId: "inputId", label: "label", required: "required", state: "state", supportedDocumentTypes: "supportedDocumentTypes", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { fileValueAsBase64StringResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-attach-file {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\">\n <ng-container *ngIf=\"!file\">\n <input autocomplete=\"off\" class=\"hr-label md-regular\" hidden id=\"fileInput-{{inputId}}\" type=\"file\"\n [accept]=\"supportedTypes\"\n [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n\n (change)=\"handleFileInput($event)\">\n <label for=\"fileInput-{{inputId}}\">\n <gravity-button [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{label}}\n </gravity-button>\n </label>\n </ng-container>\n <ng-container *ngIf=\"file\">\n <label>\n <gravity-button (click)=\"removeFile()\" [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{currentLang == 'en' ? 'Remove file' : 'Remover archivo'}}\n </gravity-button>\n </label>\n <h3 class=\"hr-body-text sm-bold\">{{currentLang == 'en' ? 'File' : 'Archivo'}}: {{file.name}}</h3>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".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);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-attach-file{align-items:center;display:flex}.gravity-attach-file label{cursor:pointer}.gravity-attach-file label:hover gravity-button ::ng-deep button{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}gravity-button,gravity-button ::ng-deep button{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconPosition", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
|
|
1631
4026
|
}
|
|
1632
4027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityAttachFileComponent, decorators: [{
|
|
1633
4028
|
type: Component,
|
|
@@ -2086,7 +4481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2086
4481
|
|
|
2087
4482
|
class NodeToggleComponent {
|
|
2088
4483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToggleComponent, selector: "node-toggle", inputs: { state: "state" }, ngImport: i0, template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n (click)=\"state.expanded = !state.expanded\">\n <gravity-icon [iconName]=\"state.expanded ? 'arrow-down' : 'arrow-right'\" [iconSize]=\"'md-16'\"\n *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type:
|
|
4484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToggleComponent, selector: "node-toggle", inputs: { state: "state" }, ngImport: i0, template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n (click)=\"state.expanded = !state.expanded\">\n <gravity-icon [iconName]=\"state.expanded ? 'arrow-down' : 'arrow-right'\" [iconSize]=\"'md-16'\"\n *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
2090
4485
|
}
|
|
2091
4486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, decorators: [{
|
|
2092
4487
|
type: Component,
|
|
@@ -2130,7 +4525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2130
4525
|
|
|
2131
4526
|
class NodeComponent {
|
|
2132
4527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\" *ngIf=\"nodeState.showCheckbox\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"], dependencies: [{ kind: "directive", type:
|
|
4528
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\" *ngIf=\"nodeState.showCheckbox\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }, { kind: "component", type: NodeToggleComponent, selector: "node-toggle", inputs: ["state"] }, { kind: "component", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: ["state"] }, { kind: "component", type: NodeNameComponent, selector: "node-name", inputs: ["state"] }] }); }
|
|
2134
4529
|
}
|
|
2135
4530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
|
|
2136
4531
|
type: Component,
|
|
@@ -2185,7 +4580,7 @@ class GravityTreeViewComponent {
|
|
|
2185
4580
|
this.treeService.filterChanged(newValue.toLowerCase());
|
|
2186
4581
|
}
|
|
2187
4582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type:
|
|
4583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["currentLang", "customInputValue", "customState", "cypressTag", "label", "prefix", "required", "supportText", "textFieldType", "clickOnLeftIcon", "clickOnRightIcon", "iconLeft", "iconRight", "autocomplete", "inputContentType", "placeholder", "validations", "size", "width"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
|
|
2189
4584
|
}
|
|
2190
4585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, decorators: [{
|
|
2191
4586
|
type: Component,
|
|
@@ -2219,7 +4614,7 @@ class GravityStepperComponent {
|
|
|
2219
4614
|
this.currentStepResponse.emit(this.currentStep);
|
|
2220
4615
|
}
|
|
2221
4616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type:
|
|
4617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
2223
4618
|
}
|
|
2224
4619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, decorators: [{
|
|
2225
4620
|
type: Component,
|
|
@@ -2331,7 +4726,7 @@ class GravityTextFieldNumberOnlyComponent {
|
|
|
2331
4726
|
}
|
|
2332
4727
|
}
|
|
2333
4728
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldNumberOnlyComponent, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n <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=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n #textAreaElement\n\n autocomplete=\"off\"\n class=\"hr-label {{size}}-regular\"\n cols=\"6\"\n maxlength=\"6\"\n minlength=\"6\"\n inputmode=\"numeric\"\n placeholder=\"______\"\n rows=\"1\"\n type=\"text\"\n\n [(ngModel)]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (click)=\"setFocus(textAreaElement)\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n <div class=\"digit-container\" #digitContainer0></div>\n <div class=\"digit-container\" #digitContainer1></div>\n <div class=\"digit-container\" #digitContainer2></div>\n <div class=\"digit-container\" #digitContainer3></div>\n <div class=\"digit-container\" #digitContainer4></div>\n <div class=\"digit-container\" #digitContainer5></div>\n <div class=\"overflow\"></div>\n </div>\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n {{supportText}}\n </p>\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n </p>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}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)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
4729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldNumberOnlyComponent, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n <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=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n #textAreaElement\n\n autocomplete=\"off\"\n class=\"hr-label {{size}}-regular\"\n cols=\"6\"\n maxlength=\"6\"\n minlength=\"6\"\n inputmode=\"numeric\"\n placeholder=\"______\"\n rows=\"1\"\n type=\"text\"\n\n [(ngModel)]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (click)=\"setFocus(textAreaElement)\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n <div class=\"digit-container\" #digitContainer0></div>\n <div class=\"digit-container\" #digitContainer1></div>\n <div class=\"digit-container\" #digitContainer2></div>\n <div class=\"digit-container\" #digitContainer3></div>\n <div class=\"digit-container\" #digitContainer4></div>\n <div class=\"digit-container\" #digitContainer5></div>\n <div class=\"overflow\"></div>\n </div>\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"supportText\">\n <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n {{supportText}}\n </p>\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n </p>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}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)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
2335
4730
|
}
|
|
2336
4731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, decorators: [{
|
|
2337
4732
|
type: Component,
|
|
@@ -2405,7 +4800,7 @@ class GravityStatusIndicatorComponent {
|
|
|
2405
4800
|
this.status = 'neutro';
|
|
2406
4801
|
}
|
|
2407
4802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2408
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", status: "status", text: "text" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body-text sm-regular {{status}}\">\n {{text}}\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator{align-items:center;background-color:var(--gravity-status-indicator-background-color);border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);display:flex;gap:4px;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content}.gravity-status-indicator gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-background-color: var(--bg-button-active-positive);--gravity-status-indicator-text-color: var(--on-bg-button-active-positive) }.gravity-status-indicator.negative{--gravity-status-indicator-background-color: var(--bg-button-active-negative);--gravity-status-indicator-text-color: var(--on-bg-button-active-negative)}.gravity-status-indicator.neutro{--gravity-status-indicator-background-color: var(--bg-button-active-tertiary);--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary)}\n"], dependencies: [{ kind: "directive", type:
|
|
4803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", status: "status", text: "text" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body-text sm-regular {{status}}\">\n {{text}}\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-status-indicator{align-items:center;background-color:var(--gravity-status-indicator-background-color);border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);display:flex;gap:4px;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content}.gravity-status-indicator gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-background-color: var(--bg-button-active-positive);--gravity-status-indicator-text-color: var(--on-bg-button-active-positive) }.gravity-status-indicator.negative{--gravity-status-indicator-background-color: var(--bg-button-active-negative);--gravity-status-indicator-text-color: var(--on-bg-button-active-negative)}.gravity-status-indicator.neutro{--gravity-status-indicator-background-color: var(--bg-button-active-tertiary);--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary)}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
2409
4804
|
}
|
|
2410
4805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
|
|
2411
4806
|
type: Component,
|
|
@@ -2423,6 +4818,7 @@ class GravityDesignSystemModule {
|
|
|
2423
4818
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
2424
4819
|
GravityButtonComponent,
|
|
2425
4820
|
GravityCalendarComponent,
|
|
4821
|
+
GravityCalendarV2Component,
|
|
2426
4822
|
GravityCheckboxComponent,
|
|
2427
4823
|
GravityDialogComponent,
|
|
2428
4824
|
GravityDropdownListComponent,
|
|
@@ -2443,7 +4839,20 @@ class GravityDesignSystemModule {
|
|
|
2443
4839
|
NodeToggleComponent,
|
|
2444
4840
|
NodeCheckboxComponent,
|
|
2445
4841
|
NodeNameComponent,
|
|
2446
|
-
FilterByPipe
|
|
4842
|
+
FilterByPipe,
|
|
4843
|
+
BsDatepickerDayDecoratorComponent,
|
|
4844
|
+
BsDatepickerNavigationViewComponent,
|
|
4845
|
+
BsDaysCalendarViewComponent,
|
|
4846
|
+
BsMonthCalendarViewComponent,
|
|
4847
|
+
BsYearsCalendarViewComponent,
|
|
4848
|
+
BsDatepickerContainerComponent,
|
|
4849
|
+
BsDatepickerDirective,
|
|
4850
|
+
BsDatepickerInlineContainerComponent,
|
|
4851
|
+
BsDatepickerInlineDirective,
|
|
4852
|
+
BsDaterangepickerContainerComponent,
|
|
4853
|
+
BsDaterangepickerDirective,
|
|
4854
|
+
BsDaterangepickerInlineContainerComponent,
|
|
4855
|
+
BsDaterangepickerInlineDirective], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, BsDatepickerModule,
|
|
2447
4856
|
CommonModule,
|
|
2448
4857
|
FormsModule, GravityTooltipModule, NgbDatepickerModule,
|
|
2449
4858
|
NgbOffcanvasModule,
|
|
@@ -2452,6 +4861,7 @@ class GravityDesignSystemModule {
|
|
|
2452
4861
|
ReactiveFormsModule], exports: [GravityAttachFileComponent,
|
|
2453
4862
|
GravityButtonComponent,
|
|
2454
4863
|
GravityCalendarComponent,
|
|
4864
|
+
GravityCalendarV2Component,
|
|
2455
4865
|
GravityCheckboxComponent,
|
|
2456
4866
|
GravityDialogComponent,
|
|
2457
4867
|
GravityDropdownListComponent,
|
|
@@ -2489,6 +4899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2489
4899
|
GravityAttachFileComponent,
|
|
2490
4900
|
GravityButtonComponent,
|
|
2491
4901
|
GravityCalendarComponent,
|
|
4902
|
+
GravityCalendarV2Component,
|
|
2492
4903
|
GravityCheckboxComponent,
|
|
2493
4904
|
GravityDialogComponent,
|
|
2494
4905
|
GravityDropdownListComponent,
|
|
@@ -2509,7 +4920,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2509
4920
|
NodeToggleComponent,
|
|
2510
4921
|
NodeCheckboxComponent,
|
|
2511
4922
|
NodeNameComponent,
|
|
2512
|
-
FilterByPipe
|
|
4923
|
+
FilterByPipe,
|
|
4924
|
+
BsDatepickerDayDecoratorComponent,
|
|
4925
|
+
BsDatepickerNavigationViewComponent,
|
|
4926
|
+
BsDaysCalendarViewComponent,
|
|
4927
|
+
BsMonthCalendarViewComponent,
|
|
4928
|
+
BsYearsCalendarViewComponent,
|
|
4929
|
+
BsDatepickerContainerComponent,
|
|
4930
|
+
BsDatepickerDirective,
|
|
4931
|
+
BsDatepickerInlineContainerComponent,
|
|
4932
|
+
BsDatepickerInlineDirective,
|
|
4933
|
+
BsDaterangepickerContainerComponent,
|
|
4934
|
+
BsDaterangepickerDirective,
|
|
4935
|
+
BsDaterangepickerInlineContainerComponent,
|
|
4936
|
+
BsDaterangepickerInlineDirective
|
|
2513
4937
|
],
|
|
2514
4938
|
imports: [
|
|
2515
4939
|
AngularSvgIconModule.forRoot(),
|
|
@@ -2530,6 +4954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2530
4954
|
GravityAttachFileComponent,
|
|
2531
4955
|
GravityButtonComponent,
|
|
2532
4956
|
GravityCalendarComponent,
|
|
4957
|
+
GravityCalendarV2Component,
|
|
2533
4958
|
GravityCheckboxComponent,
|
|
2534
4959
|
GravityDialogComponent,
|
|
2535
4960
|
GravityDropdownListComponent,
|
|
@@ -2584,13 +5009,13 @@ class GravityDialogManagerService {
|
|
|
2584
5009
|
}
|
|
2585
5010
|
return true;
|
|
2586
5011
|
}
|
|
2587
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$
|
|
5012
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$1.NgbModal }, { token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2588
5013
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogManagerService, providedIn: "root" }); }
|
|
2589
5014
|
}
|
|
2590
5015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogManagerService, decorators: [{
|
|
2591
5016
|
type: Injectable,
|
|
2592
5017
|
args: [{ providedIn: "root" }]
|
|
2593
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
5018
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgbModal }, { type: GravityInstantNotificationsService }]; } });
|
|
2594
5019
|
|
|
2595
5020
|
/*
|
|
2596
5021
|
* Public API Surface of gravity-design-system
|
|
@@ -2600,5 +5025,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2600
5025
|
* Generated bundle index. Do not edit.
|
|
2601
5026
|
*/
|
|
2602
5027
|
|
|
2603
|
-
export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconButtonComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
5028
|
+
export { BsNavigationDirection, GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCalendarV2Component, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconButtonComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
2604
5029
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|