@sebgroup/green-angular 6.4.0 → 6.4.1
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/src/v-angular/datepicker/components/date-input/date-input.component.mjs +17 -5
- package/esm2022/src/v-angular/datepicker/components/datepicker/datepicker.component.mjs +64 -7
- package/esm2022/v-angular/datepicker/components/date-input/date-input.component.mjs +17 -5
- package/esm2022/v-angular/datepicker/components/datepicker/datepicker.component.mjs +64 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs +76 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +76 -7
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +20 -20
- package/src/v-angular/datepicker/components/date-input/date-input.component.d.ts +6 -3
- package/src/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +16 -2
- package/v-angular/datepicker/components/date-input/date-input.component.d.ts +6 -3
- package/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +16 -2
|
@@ -2272,7 +2272,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2272
2272
|
})();
|
|
2273
2273
|
|
|
2274
2274
|
class DatepickerComponent {
|
|
2275
|
-
|
|
2275
|
+
get positionAttr() {
|
|
2276
|
+
return this.datepickerPosition;
|
|
2277
|
+
}
|
|
2278
|
+
get sizeAttr() {
|
|
2279
|
+
return this.size;
|
|
2280
|
+
}
|
|
2281
|
+
constructor(elementRef, renderer) {
|
|
2282
|
+
this.elementRef = elementRef;
|
|
2283
|
+
this.renderer = renderer;
|
|
2276
2284
|
this.calendarTemplate = null;
|
|
2277
2285
|
/** Emits a Date upon selection. */
|
|
2278
2286
|
this.ngvDateChange = new EventEmitter();
|
|
@@ -2288,11 +2296,20 @@ class DatepickerComponent {
|
|
|
2288
2296
|
this.locale = 'en-US';
|
|
2289
2297
|
/** Set type of calendar. */
|
|
2290
2298
|
this.type = 'normal';
|
|
2299
|
+
/**
|
|
2300
|
+
* When true, the datepicker will automatically choose to open above or below the input
|
|
2301
|
+
* based on available space in the viewport, and will scale its height to fit if needed.
|
|
2302
|
+
*/
|
|
2303
|
+
this.dynamicPosition = false;
|
|
2304
|
+
/** Needed to determent where to place datepicker if dropdownPosition === 'top' */
|
|
2305
|
+
this.size = 'large';
|
|
2291
2306
|
/** @internal */
|
|
2292
2307
|
/** @internal */
|
|
2293
2308
|
this.weekdayArray = [];
|
|
2294
2309
|
/** @internal */
|
|
2295
2310
|
this.disabledDatesForActiveMonth = [];
|
|
2311
|
+
// Indicates whether the datepicker should be displayed below ('bottom') or above ('top') the input, based on available space.
|
|
2312
|
+
this.datepickerPosition = 'bottom';
|
|
2296
2313
|
this.subs = [];
|
|
2297
2314
|
}
|
|
2298
2315
|
ngOnChanges(changes) {
|
|
@@ -2315,6 +2332,8 @@ class DatepickerComponent {
|
|
|
2315
2332
|
? new Date(this.selected)
|
|
2316
2333
|
: new Date();
|
|
2317
2334
|
this.activeCalendar = new CalendarMonth(initDate);
|
|
2335
|
+
if (this.dynamicPosition)
|
|
2336
|
+
this.setDropdownPosition();
|
|
2318
2337
|
}
|
|
2319
2338
|
ngOnDestroy() {
|
|
2320
2339
|
this.subs.forEach((sub) => sub.unsubscribe());
|
|
@@ -2365,13 +2384,41 @@ class DatepickerComponent {
|
|
|
2365
2384
|
this.selected = date;
|
|
2366
2385
|
this.changeActiveCalendar(new CalendarMonth(date));
|
|
2367
2386
|
}
|
|
2368
|
-
|
|
2369
|
-
|
|
2387
|
+
setDropdownPosition() {
|
|
2388
|
+
const datePicker = this.elementRef.nativeElement;
|
|
2389
|
+
const parent = datePicker.parentElement;
|
|
2390
|
+
const rect = parent.getBoundingClientRect();
|
|
2391
|
+
const viewportHeight = window.innerHeight;
|
|
2392
|
+
const spaceBelow = viewportHeight - rect.bottom;
|
|
2393
|
+
const spaceAbove = rect.top;
|
|
2394
|
+
const MARGIN = 10;
|
|
2395
|
+
const DATEPICKER_HEIGHT = 362; // 6 ROWS OF DATES, TO BE SURE
|
|
2396
|
+
let maxDatepickerHeight;
|
|
2397
|
+
if (spaceBelow >= DATEPICKER_HEIGHT) {
|
|
2398
|
+
this.datepickerPosition = 'bottom';
|
|
2399
|
+
maxDatepickerHeight = DATEPICKER_HEIGHT;
|
|
2400
|
+
}
|
|
2401
|
+
else if (spaceAbove >= DATEPICKER_HEIGHT) {
|
|
2402
|
+
this.datepickerPosition = 'top';
|
|
2403
|
+
maxDatepickerHeight = DATEPICKER_HEIGHT;
|
|
2404
|
+
}
|
|
2405
|
+
else if (spaceBelow > spaceAbove) {
|
|
2406
|
+
this.datepickerPosition = 'bottom';
|
|
2407
|
+
maxDatepickerHeight = Math.max(spaceBelow - MARGIN, DATEPICKER_HEIGHT); // 10px margin, height 362px
|
|
2408
|
+
}
|
|
2409
|
+
else {
|
|
2410
|
+
this.datepickerPosition = 'top';
|
|
2411
|
+
maxDatepickerHeight = Math.max(spaceAbove - MARGIN, DATEPICKER_HEIGHT); // 10px margin, height 362px
|
|
2412
|
+
}
|
|
2413
|
+
this.renderer.setStyle(datePicker, 'max-height', `${maxDatepickerHeight}px`);
|
|
2414
|
+
}
|
|
2415
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "nggv-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minCalendarRows: "minCalendarRows", selected: "selected", locale: "locale", type: "type", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", dynamicPosition: "dynamicPosition", size: "size" }, outputs: { ngvDateChange: "ngvDateChange" }, host: { properties: { "attr.data-position": "this.positionAttr", "attr.data-size": "this.sizeAttr" } }, viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n [activeCalendar]=\"activeCalendar\"\n [locale]=\"locale\"\n [type]=\"type\"\n (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n <span *ngFor=\"let weekday of weekdayArray\">{{\n weekday | date: 'EEE' : undefined : locale\n }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n <ng-container\n *ngTemplateOutlet=\"\n calendarTemplate;\n context: {\n calendar: activeCalendar,\n disableDates: disabledDatesForActiveMonth,\n }\n \"\n >\n </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n <ng-content></ng-content>\n</div>\n\n<ng-template\n #calendarTemplate\n let-calendar=\"calendar\"\n let-disableDates=\"disableDates\"\n>\n <nggv-calendar\n [year]=\"calendar.year\"\n [month]=\"calendar.month\"\n [type]=\"type\"\n [locale]=\"locale\"\n [disableDates]=\"disableDates\"\n [selected]=\"selected\"\n [lastValid]=\"lastValid\"\n [firstValid]=\"firstValid\"\n [closingTime]=\"closingTime\"\n [disableWeekDays]=\"disableWeekDays\"\n [minCalendarRows]=\"minCalendarRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n (dateClick)=\"dateClickHandler($event)\"\n >\n </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalendarComponent, selector: "nggv-calendar", inputs: ["year", "month", "selected", "locale", "minCalendarRows", "firstDayOfWeek", "type", "disableDates", "disableWeekDays", "firstValid", "lastValid", "closingTime"], outputs: ["dateClick"] }, { kind: "component", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: ["activeCalendar", "locale", "type"], outputs: ["calendarChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
2370
2417
|
}
|
|
2371
2418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
2372
2419
|
type: Component,
|
|
2373
|
-
args: [{ selector: 'nggv-datepicker', template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n [activeCalendar]=\"activeCalendar\"\n [locale]=\"locale\"\n [type]=\"type\"\n (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n <span *ngFor=\"let weekday of weekdayArray\">{{\n weekday | date: 'EEE' : undefined : locale\n }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n <ng-container\n *ngTemplateOutlet=\"\n calendarTemplate;\n context: {\n calendar: activeCalendar,\n disableDates: disabledDatesForActiveMonth,\n }\n \"\n >\n </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n <ng-content></ng-content>\n</div>\n\n<ng-template\n #calendarTemplate\n let-calendar=\"calendar\"\n let-disableDates=\"disableDates\"\n>\n <nggv-calendar\n [year]=\"calendar.year\"\n [month]=\"calendar.month\"\n [type]=\"type\"\n [locale]=\"locale\"\n [disableDates]=\"disableDates\"\n [selected]=\"selected\"\n [lastValid]=\"lastValid\"\n [firstValid]=\"firstValid\"\n [closingTime]=\"closingTime\"\n [disableWeekDays]=\"disableWeekDays\"\n [minCalendarRows]=\"minCalendarRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n (dateClick)=\"dateClickHandler($event)\"\n >\n </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}\n"] }]
|
|
2374
|
-
}], propDecorators: { calendarTemplate: [{
|
|
2420
|
+
args: [{ selector: 'nggv-datepicker', template: "<!-- control for changing displayed calendar -->\n<nggv-calendar-control\n [activeCalendar]=\"activeCalendar\"\n [locale]=\"locale\"\n [type]=\"type\"\n (calendarChange)=\"changeActiveCalendar($event)\"\n>\n</nggv-calendar-control>\n\n<!-- label row for week -->\n<div class=\"nggv-weekday-row\">\n <span *ngFor=\"let weekday of weekdayArray\">{{\n weekday | date: 'EEE' : undefined : locale\n }}</span>\n</div>\n\n<!-- outlet for active calendar -->\n<div class=\"nggv-calendar-view-container\">\n <ng-container\n *ngTemplateOutlet=\"\n calendarTemplate;\n context: {\n calendar: activeCalendar,\n disableDates: disabledDatesForActiveMonth,\n }\n \"\n >\n </ng-container>\n</div>\n\n<div *ngIf=\"type === 'extended'\" class=\"gds-datepicker__controls\">\n <ng-content></ng-content>\n</div>\n\n<ng-template\n #calendarTemplate\n let-calendar=\"calendar\"\n let-disableDates=\"disableDates\"\n>\n <nggv-calendar\n [year]=\"calendar.year\"\n [month]=\"calendar.month\"\n [type]=\"type\"\n [locale]=\"locale\"\n [disableDates]=\"disableDates\"\n [selected]=\"selected\"\n [lastValid]=\"lastValid\"\n [firstValid]=\"firstValid\"\n [closingTime]=\"closingTime\"\n [disableWeekDays]=\"disableWeekDays\"\n [minCalendarRows]=\"minCalendarRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n (dateClick)=\"dateClickHandler($event)\"\n >\n </nggv-calendar>\n</ng-template>\n", styles: [":host{border-radius:4px;border:1px solid #868686;overflow:hidden;z-index:1000;background-color:#fff;position:absolute;display:block;box-shadow:0 0 12px #0000001a}:host .nggv-calendar-view-container{border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;padding:.125em;width:auto}:host .nggv-weekday-row{display:flex;font-family:SEBSansSerif,Arial,sans-serif;font-size:.875rem}:host .nggv-weekday-row:first-child{font-size:.7em;line-height:2.5rem}:host .nggv-weekday-row button,:host .nggv-weekday-row span{padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-weekday-row button:disabled,:host .nggv-weekday-row span:disabled{border-radius:0;border:0px solid transparent}:host .nggv-extended-controls{display:flex;padding:.5rem}:host[data-position=top]{top:auto;bottom:100%}:host[data-position=top][data-size=large]{transform:translateY(calc(-.5rem - 45px))}:host[data-position=top][data-size=small]{transform:translateY(calc(-.5rem - 35px))}:host[data-position=bottom]{bottom:0;transform:translateY(100%)}\n"] }]
|
|
2421
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { calendarTemplate: [{
|
|
2375
2422
|
type: ViewChild,
|
|
2376
2423
|
args: ['calendarTemplate']
|
|
2377
2424
|
}], ngvDateChange: [{
|
|
@@ -2396,6 +2443,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2396
2443
|
type: Input
|
|
2397
2444
|
}], closingTime: [{
|
|
2398
2445
|
type: Input
|
|
2446
|
+
}], dynamicPosition: [{
|
|
2447
|
+
type: Input
|
|
2448
|
+
}], size: [{
|
|
2449
|
+
type: Input
|
|
2450
|
+
}], positionAttr: [{
|
|
2451
|
+
type: HostBinding,
|
|
2452
|
+
args: ['attr.data-position']
|
|
2453
|
+
}], sizeAttr: [{
|
|
2454
|
+
type: HostBinding,
|
|
2455
|
+
args: ['attr.data-size']
|
|
2399
2456
|
}] } });
|
|
2400
2457
|
|
|
2401
2458
|
/**
|
|
@@ -2453,12 +2510,15 @@ class DateInputComponent extends DateControlValueAccessorComponent {
|
|
|
2453
2510
|
* Sets the displayed size of the date input field.
|
|
2454
2511
|
*/
|
|
2455
2512
|
this.size = 'large';
|
|
2513
|
+
this.dynamicPosition = false;
|
|
2456
2514
|
/** @internal */
|
|
2457
2515
|
// calendarIcon: IconDefinition = faCalendarDays;
|
|
2458
2516
|
/** @internal */
|
|
2459
2517
|
this.shown = false;
|
|
2460
2518
|
/** @internal */
|
|
2461
2519
|
this.showInput$ = this.showInputDateSrc.asObservable().pipe(startWith(true));
|
|
2520
|
+
/** Observable for listening to scrolls when the datepicker is open */
|
|
2521
|
+
this.documentScroll$ = fromEvent(document, 'scroll');
|
|
2462
2522
|
/** Observable for listening to clicks outside of the datepicker. */
|
|
2463
2523
|
this.documentClick$ = fromEvent(document, 'click');
|
|
2464
2524
|
/** Subject used for unsubscribe pattern on above observable. */
|
|
@@ -2529,6 +2589,13 @@ class DateInputComponent extends DateControlValueAccessorComponent {
|
|
|
2529
2589
|
}
|
|
2530
2590
|
// if shown is set to true, reset unsubscribe variable
|
|
2531
2591
|
this.datepickerClosed$.next(false);
|
|
2592
|
+
// start listen to scroll
|
|
2593
|
+
this.documentScroll$.pipe(takeUntil(this.datepickerClosed$)).subscribe({
|
|
2594
|
+
next: () => {
|
|
2595
|
+
// if document starts scrolling, close datepicker
|
|
2596
|
+
return this.setShown(false);
|
|
2597
|
+
},
|
|
2598
|
+
});
|
|
2532
2599
|
// start listening for clicks outside the component
|
|
2533
2600
|
this.documentClick$.pipe(takeUntil(this.datepickerClosed$)).subscribe({
|
|
2534
2601
|
next: (event) => {
|
|
@@ -2546,11 +2613,11 @@ class DateInputComponent extends DateControlValueAccessorComponent {
|
|
|
2546
2613
|
});
|
|
2547
2614
|
}
|
|
2548
2615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i3.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", size: "size" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
2616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", size: "size", dynamicPosition: "dynamicPosition" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime", "dynamicPosition", "size"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
2550
2617
|
}
|
|
2551
2618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
2552
2619
|
type: Component,
|
|
2553
|
-
args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
|
|
2620
|
+
args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
|
|
2554
2621
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2555
2622
|
type: Self
|
|
2556
2623
|
}, {
|
|
@@ -2596,6 +2663,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2596
2663
|
type: Input
|
|
2597
2664
|
}], size: [{
|
|
2598
2665
|
type: Input
|
|
2666
|
+
}], dynamicPosition: [{
|
|
2667
|
+
type: Input
|
|
2599
2668
|
}], keyListener: [{
|
|
2600
2669
|
type: HostListener,
|
|
2601
2670
|
args: ['keydown', ['$event']]
|