@ascentgl/ads-ui 22.0.3 → 22.7.0
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/fesm2022/ascentgl-ads-ui.mjs +360 -19
- package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ascentgl-ads-ui.d.ts +145 -12
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, output, computed, inject, model, signal, viewChild, effect, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, Injectable, ChangeDetectorRef, Renderer2, ViewChildren } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, output, computed, inject, model, signal, viewChild, effect, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, Injectable, ChangeDetectorRef, Renderer2, viewChildren, booleanAttribute, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, NgStyle, DOCUMENT, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@ascentgl/ads-icons';
|
|
6
6
|
import { AdsIconComponent, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
7
|
-
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconDrag, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew, adsIconPencil, adsIconFileAdd, adsIconCanceledShipment } from '@ascentgl/ads-icons/icons';
|
|
7
|
+
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconDuplicate, adsIconBookmarkAlt, adsIconRedo, adsIconCrossCircleOutline, adsIconChevronUp, adsIconDrag, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew, adsIconPencil, adsIconFileAdd, adsIconCanceledShipment } from '@ascentgl/ads-icons/icons';
|
|
8
8
|
import { MatBadge } from '@angular/material/badge';
|
|
9
9
|
import * as i1$2 from '@angular/router';
|
|
10
10
|
import { RouterModule, RouterLinkActive, RouterLink, NavigationStart, RouterOutlet } from '@angular/router';
|
|
@@ -39,7 +39,7 @@ import { MatDividerModule } from '@angular/material/divider';
|
|
|
39
39
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
40
40
|
import { MatIconModule } from '@angular/material/icon';
|
|
41
41
|
import * as i5$1 from '@mat-datetimepicker/core';
|
|
42
|
-
import { MAT_DATETIME_FORMATS, MatNativeDatetimeModule, MatDatetimepickerModule, MatDatetimepickerComponent } from '@mat-datetimepicker/core';
|
|
42
|
+
import { MAT_DATETIME_FORMATS, MatNativeDatetimeModule, MatDatetimepickerModule, MatDatetimepickerComponent, NativeDatetimeAdapter, DatetimeAdapter } from '@mat-datetimepicker/core';
|
|
43
43
|
import { format, add } from 'date-fns';
|
|
44
44
|
import * as i3$3 from '@angular/material/radio';
|
|
45
45
|
import { MatRadioModule } from '@angular/material/radio';
|
|
@@ -50,6 +50,8 @@ import * as i1$4 from '@angular/cdk/layout';
|
|
|
50
50
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
51
51
|
import * as i1$5 from '@angular/material/dialog';
|
|
52
52
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
53
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
54
|
+
import { ESCAPE } from '@angular/cdk/keycodes';
|
|
53
55
|
import { MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelHeader, MatExpansionPanelDescription, MatAccordion } from '@angular/material/expansion';
|
|
54
56
|
import { ModuleRegistry, AllCommunityModule, themeQuartz } from 'ag-grid-community';
|
|
55
57
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
@@ -60,7 +62,7 @@ import { MatToolbar } from '@angular/material/toolbar';
|
|
|
60
62
|
import * as i1$6 from '@angular/material/bottom-sheet';
|
|
61
63
|
import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
62
64
|
import { MatListModule } from '@angular/material/list';
|
|
63
|
-
import { MatTabNav, MatTabLink, MatTabNavPanel, MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
|
|
65
|
+
import { MatTabNav, MatTabLink, MatTabNavPanel, MatTabGroup, MatTab, MatTabLabel, MatTabContent } from '@angular/material/tabs';
|
|
64
66
|
import * as i1$7 from '@angular/common/http';
|
|
65
67
|
|
|
66
68
|
class AdsAvatarComponent {
|
|
@@ -5529,7 +5531,15 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
|
|
|
5529
5531
|
return this.removeOffset(value, this.getRequiredOffset(value));
|
|
5530
5532
|
}
|
|
5531
5533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5532
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsDatetimepickerComponent, isStandalone: true, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat", timeInterval: "timeInterval", overlayCdkClass: "overlayCdkClass" }, providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsDatetimepickerComponent, isStandalone: true, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat", timeInterval: "timeInterval", overlayCdkClass: "overlayCdkClass" }, providers: [
|
|
5535
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
5536
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
5537
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
5538
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
5539
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
5540
|
+
// blur reformatting bypasses our date-fns formatter (SCMS2-3741).
|
|
5541
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
5542
|
+
], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5533
5543
|
}
|
|
5534
5544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsDatetimepickerComponent, decorators: [{
|
|
5535
5545
|
type: Component,
|
|
@@ -5549,7 +5559,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5549
5559
|
AdsErrorComponent,
|
|
5550
5560
|
AdsHintComponent,
|
|
5551
5561
|
AdsSuccessComponent,
|
|
5552
|
-
], providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5562
|
+
], providers: [
|
|
5563
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
5564
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
5565
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
5566
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
5567
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
5568
|
+
// blur reformatting bypasses our date-fns formatter (SCMS2-3741).
|
|
5569
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
5570
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5553
5571
|
}], ctorParameters: () => [], propDecorators: { picker: [{
|
|
5554
5572
|
type: ViewChild,
|
|
5555
5573
|
args: [MatDatetimepickerComponent]
|
|
@@ -5960,7 +5978,15 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
|
|
|
5960
5978
|
date.getDate() === day;
|
|
5961
5979
|
}
|
|
5962
5980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsDatepickerComponent, isStandalone: true, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsDatepickerComponent, isStandalone: true, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, providers: [
|
|
5982
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
5983
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
5984
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
5985
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
5986
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
5987
|
+
// blur reformatting bypasses our date-fns MM/dd/yyyy formatter (SCMS2-3741).
|
|
5988
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
5989
|
+
], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5964
5990
|
}
|
|
5965
5991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsDatepickerComponent, decorators: [{
|
|
5966
5992
|
type: Component,
|
|
@@ -5981,7 +6007,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5981
6007
|
AdsErrorComponent,
|
|
5982
6008
|
AdsHintComponent,
|
|
5983
6009
|
AdsSuccessComponent,
|
|
5984
|
-
], providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6010
|
+
], providers: [
|
|
6011
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
6012
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
6013
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
6014
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
6015
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
6016
|
+
// blur reformatting bypasses our date-fns MM/dd/yyyy formatter (SCMS2-3741).
|
|
6017
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
6018
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5985
6019
|
}], propDecorators: { customDisplayFormat: [{
|
|
5986
6020
|
type: Input
|
|
5987
6021
|
}], closeOnOutOfView: [{
|
|
@@ -6040,7 +6074,15 @@ class AdsTimepickerComponent extends AdsDatetimepickerComponent {
|
|
|
6040
6074
|
super.onSyncDisplayedValue(valueToApply);
|
|
6041
6075
|
}
|
|
6042
6076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTimepickerComponent, isStandalone: true, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTimepickerComponent, isStandalone: true, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, providers: [
|
|
6078
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
6079
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
6080
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
6081
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
6082
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
6083
|
+
// blur reformatting bypasses our date-fns formatter (SCMS2-3741).
|
|
6084
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
6085
|
+
], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i5$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i5$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatNativeDatetimeModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6044
6086
|
}
|
|
6045
6087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTimepickerComponent, decorators: [{
|
|
6046
6088
|
type: Component,
|
|
@@ -6061,7 +6103,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
6061
6103
|
AdsErrorComponent,
|
|
6062
6104
|
AdsHintComponent,
|
|
6063
6105
|
AdsSuccessComponent,
|
|
6064
|
-
], providers: [{ provide: DateAdapter, useClass: CustomDatetimeAdapter }], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6106
|
+
], providers: [
|
|
6107
|
+
{ provide: DateAdapter, useClass: CustomDatetimeAdapter },
|
|
6108
|
+
// Re-provide DatetimeAdapter on this component's (node) injector so its internal
|
|
6109
|
+
// inject(DateAdapter) resolves to CustomDatetimeAdapter above. Without this, the
|
|
6110
|
+
// NativeDatetimeAdapter is built in the environment injector (from the imported
|
|
6111
|
+
// MatNativeDatetimeModule) where DateAdapter is the plain NativeDateAdapter, so
|
|
6112
|
+
// blur reformatting bypasses our date-fns formatter (SCMS2-3741).
|
|
6113
|
+
{ provide: DatetimeAdapter, useClass: NativeDatetimeAdapter },
|
|
6114
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6065
6115
|
}], ctorParameters: () => [], propDecorators: { customDisplayFormat: [{
|
|
6066
6116
|
type: Input
|
|
6067
6117
|
}] } });
|
|
@@ -6565,6 +6615,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
6565
6615
|
args: ['document:click', ['$event']]
|
|
6566
6616
|
}] } });
|
|
6567
6617
|
|
|
6618
|
+
class AdsMenuDropDownComponent {
|
|
6619
|
+
constructor(registry) {
|
|
6620
|
+
this.registry = registry;
|
|
6621
|
+
/** The list of menu items to display */
|
|
6622
|
+
this.items = input([], /* @ts-ignore */
|
|
6623
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
6624
|
+
/** Accessible label describing the menu, exposed via `aria-label` */
|
|
6625
|
+
this.ariaLabel = input('Menu', /* @ts-ignore */
|
|
6626
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6627
|
+
/** Move keyboard focus to the first item once the menu is rendered */
|
|
6628
|
+
this.autoFocus = input(true, /* @ts-ignore */
|
|
6629
|
+
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
6630
|
+
/** Emitted when an enabled item is selected (via click, Enter or Space) */
|
|
6631
|
+
this.itemSelect = output();
|
|
6632
|
+
/** Emitted when the menu requests to close (Escape key or Tab out) */
|
|
6633
|
+
this.closed = output();
|
|
6634
|
+
/** @ignore Index of the item that currently owns the roving tabindex */
|
|
6635
|
+
this.activeIndex = signal(0, /* @ts-ignore */
|
|
6636
|
+
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
6637
|
+
/** @ignore References to the rendered menu item buttons */
|
|
6638
|
+
this.itemButtons = viewChildren('menuItemRef', /* @ts-ignore */
|
|
6639
|
+
...(ngDevMode ? [{ debugName: "itemButtons" }] : /* istanbul ignore next */ []));
|
|
6640
|
+
// Register the icons used by the Figma design so the component renders out of
|
|
6641
|
+
// the box. Any additional icons referenced by `items` must be registered by
|
|
6642
|
+
// the host application via AdsIconRegistry.
|
|
6643
|
+
this.registry.register([
|
|
6644
|
+
adsIconVisibilityEye,
|
|
6645
|
+
adsIconDuplicate,
|
|
6646
|
+
adsIconBookmarkAlt,
|
|
6647
|
+
adsIconRedo,
|
|
6648
|
+
adsIconCrossCircleOutline,
|
|
6649
|
+
]);
|
|
6650
|
+
// Keep the active item in sync when the list of items changes.
|
|
6651
|
+
effect(() => {
|
|
6652
|
+
this.items();
|
|
6653
|
+
this.activeIndex.set(this.firstEnabledIndex());
|
|
6654
|
+
});
|
|
6655
|
+
}
|
|
6656
|
+
/** @ignore */
|
|
6657
|
+
ngAfterViewInit() {
|
|
6658
|
+
if (this.autoFocus()) {
|
|
6659
|
+
this.focusIndex(this.firstEnabledIndex());
|
|
6660
|
+
}
|
|
6661
|
+
}
|
|
6662
|
+
/** @ignore Handles all keyboard interaction for the menu */
|
|
6663
|
+
onKeydown(event) {
|
|
6664
|
+
switch (event.key) {
|
|
6665
|
+
case 'ArrowDown':
|
|
6666
|
+
event.preventDefault();
|
|
6667
|
+
this.moveFocus(1);
|
|
6668
|
+
break;
|
|
6669
|
+
case 'ArrowUp':
|
|
6670
|
+
event.preventDefault();
|
|
6671
|
+
this.moveFocus(-1);
|
|
6672
|
+
break;
|
|
6673
|
+
case 'Home':
|
|
6674
|
+
event.preventDefault();
|
|
6675
|
+
this.focusIndex(this.firstEnabledIndex());
|
|
6676
|
+
break;
|
|
6677
|
+
case 'End':
|
|
6678
|
+
event.preventDefault();
|
|
6679
|
+
this.focusIndex(this.lastEnabledIndex());
|
|
6680
|
+
break;
|
|
6681
|
+
case 'Enter':
|
|
6682
|
+
case ' ':
|
|
6683
|
+
case 'Spacebar':
|
|
6684
|
+
event.preventDefault();
|
|
6685
|
+
this.selectActive();
|
|
6686
|
+
break;
|
|
6687
|
+
case 'Escape':
|
|
6688
|
+
event.preventDefault();
|
|
6689
|
+
this.closed.emit();
|
|
6690
|
+
break;
|
|
6691
|
+
case 'Tab':
|
|
6692
|
+
this.closed.emit();
|
|
6693
|
+
break;
|
|
6694
|
+
}
|
|
6695
|
+
}
|
|
6696
|
+
/** @ignore */
|
|
6697
|
+
selectItem(item) {
|
|
6698
|
+
if (item.disabled) {
|
|
6699
|
+
return;
|
|
6700
|
+
}
|
|
6701
|
+
this.itemSelect.emit(item);
|
|
6702
|
+
}
|
|
6703
|
+
/** @ignore */
|
|
6704
|
+
selectActive() {
|
|
6705
|
+
const item = this.items()[this.activeIndex()];
|
|
6706
|
+
if (item) {
|
|
6707
|
+
this.selectItem(item);
|
|
6708
|
+
}
|
|
6709
|
+
}
|
|
6710
|
+
/** @ignore Moves focus to the next enabled item in the given direction, wrapping around */
|
|
6711
|
+
moveFocus(direction) {
|
|
6712
|
+
const items = this.items();
|
|
6713
|
+
const count = items.length;
|
|
6714
|
+
if (!count) {
|
|
6715
|
+
return;
|
|
6716
|
+
}
|
|
6717
|
+
let index = this.activeIndex();
|
|
6718
|
+
for (let step = 0; step < count; step++) {
|
|
6719
|
+
index = (index + direction + count) % count;
|
|
6720
|
+
if (!items[index].disabled) {
|
|
6721
|
+
this.focusIndex(index);
|
|
6722
|
+
return;
|
|
6723
|
+
}
|
|
6724
|
+
}
|
|
6725
|
+
}
|
|
6726
|
+
/** @ignore */
|
|
6727
|
+
focusIndex(index) {
|
|
6728
|
+
if (index < 0) {
|
|
6729
|
+
return;
|
|
6730
|
+
}
|
|
6731
|
+
this.activeIndex.set(index);
|
|
6732
|
+
this.itemButtons()[index]?.nativeElement.focus();
|
|
6733
|
+
}
|
|
6734
|
+
/** @ignore */
|
|
6735
|
+
firstEnabledIndex() {
|
|
6736
|
+
return this.items().findIndex((item) => !item.disabled);
|
|
6737
|
+
}
|
|
6738
|
+
/** @ignore */
|
|
6739
|
+
lastEnabledIndex() {
|
|
6740
|
+
const items = this.items();
|
|
6741
|
+
for (let index = items.length - 1; index >= 0; index--) {
|
|
6742
|
+
if (!items[index].disabled) {
|
|
6743
|
+
return index;
|
|
6744
|
+
}
|
|
6745
|
+
}
|
|
6746
|
+
return -1;
|
|
6747
|
+
}
|
|
6748
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsMenuDropDownComponent, isStandalone: true, selector: "ads-menu-drop-down", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closed: "closed" }, viewQueries: [{ propertyName: "itemButtons", predicate: ["menuItemRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ads-menu-drop-down\" role=\"menu\" [attr.aria-label]=\"ariaLabel()\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.separatorBefore && i > 0) {\n <hr class=\"ads-menu-drop-down__separator\" role=\"separator\" aria-orientation=\"horizontal\" />\n }\n <button\n #menuItemRef\n type=\"button\"\n role=\"menuitem\"\n class=\"ads-menu-drop-down__item\"\n [id]=\"item.id\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.tabindex]=\"activeIndex() === i ? 0 : -1\"\n (click)=\"selectItem(item)\"\n (focus)=\"activeIndex.set(i)\"\n >\n @if (item.icon) {\n <ads-icon class=\"ads-menu-drop-down__icon\" [name]=\"item.icon\" size=\"xxs_16\" />\n }\n <span class=\"ads-menu-drop-down__label\">{{ item.label }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.ads-menu-drop-down{display:flex;flex-direction:column;align-items:stretch;min-width:184px;background-color:var(--color-white);border-radius:5px;box-shadow:0 8px 12px var(--color-medium-opacity-50);overflow:hidden}.ads-menu-drop-down__separator{height:1px;margin:0;border:none;background-color:var(--color-light)}.ads-menu-drop-down__item{display:flex;align-items:center;gap:8px;width:100%;min-height:45px;padding:12px;border:none;background:transparent;font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:21px;font-weight:400;color:var(--color-dark);text-align:left;cursor:pointer}.ads-menu-drop-down__item .ads-menu-drop-down__icon{flex-shrink:0;width:16px!important;height:16px!important;color:var(--color-secondary);stroke:currentColor}.ads-menu-drop-down__item:not(:disabled):hover,.ads-menu-drop-down__item:not(:disabled):focus-visible{background-color:var(--color-secondary);color:var(--color-white);outline:none}.ads-menu-drop-down__item:not(:disabled):hover .ads-menu-drop-down__icon,.ads-menu-drop-down__item:not(:disabled):focus-visible .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active{background-color:var(--color-secondary-pressed);color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:disabled{color:var(--color-medium-50);cursor:default}.ads-menu-drop-down__item:disabled .ads-menu-drop-down__icon{color:var(--color-medium-50)}\n"], dependencies: [{ kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6750
|
+
}
|
|
6751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownComponent, decorators: [{
|
|
6752
|
+
type: Component,
|
|
6753
|
+
args: [{ selector: 'ads-menu-drop-down', imports: [AdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ads-menu-drop-down\" role=\"menu\" [attr.aria-label]=\"ariaLabel()\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.separatorBefore && i > 0) {\n <hr class=\"ads-menu-drop-down__separator\" role=\"separator\" aria-orientation=\"horizontal\" />\n }\n <button\n #menuItemRef\n type=\"button\"\n role=\"menuitem\"\n class=\"ads-menu-drop-down__item\"\n [id]=\"item.id\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.tabindex]=\"activeIndex() === i ? 0 : -1\"\n (click)=\"selectItem(item)\"\n (focus)=\"activeIndex.set(i)\"\n >\n @if (item.icon) {\n <ads-icon class=\"ads-menu-drop-down__icon\" [name]=\"item.icon\" size=\"xxs_16\" />\n }\n <span class=\"ads-menu-drop-down__label\">{{ item.label }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.ads-menu-drop-down{display:flex;flex-direction:column;align-items:stretch;min-width:184px;background-color:var(--color-white);border-radius:5px;box-shadow:0 8px 12px var(--color-medium-opacity-50);overflow:hidden}.ads-menu-drop-down__separator{height:1px;margin:0;border:none;background-color:var(--color-light)}.ads-menu-drop-down__item{display:flex;align-items:center;gap:8px;width:100%;min-height:45px;padding:12px;border:none;background:transparent;font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:21px;font-weight:400;color:var(--color-dark);text-align:left;cursor:pointer}.ads-menu-drop-down__item .ads-menu-drop-down__icon{flex-shrink:0;width:16px!important;height:16px!important;color:var(--color-secondary);stroke:currentColor}.ads-menu-drop-down__item:not(:disabled):hover,.ads-menu-drop-down__item:not(:disabled):focus-visible{background-color:var(--color-secondary);color:var(--color-white);outline:none}.ads-menu-drop-down__item:not(:disabled):hover .ads-menu-drop-down__icon,.ads-menu-drop-down__item:not(:disabled):focus-visible .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active{background-color:var(--color-secondary-pressed);color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:disabled{color:var(--color-medium-50);cursor:default}.ads-menu-drop-down__item:disabled .ads-menu-drop-down__icon{color:var(--color-medium-50)}\n"] }]
|
|
6754
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemButtons: [{ type: i0.ViewChildren, args: ['menuItemRef', { isSignal: true }] }] } });
|
|
6755
|
+
|
|
6756
|
+
const POSITIONS = {
|
|
6757
|
+
'below-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
|
|
6758
|
+
'below-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
|
|
6759
|
+
'above-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
|
|
6760
|
+
'above-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
|
|
6761
|
+
};
|
|
6762
|
+
/** Fallback order: try the preferred position first, then flip vertically, then horizontally. */
|
|
6763
|
+
const FALLBACK_ORDER = {
|
|
6764
|
+
'below-start': ['below-start', 'above-start', 'below-end', 'above-end'],
|
|
6765
|
+
'below-end': ['below-end', 'above-end', 'below-start', 'above-start'],
|
|
6766
|
+
'above-start': ['above-start', 'below-start', 'above-end', 'below-end'],
|
|
6767
|
+
'above-end': ['above-end', 'below-end', 'above-start', 'below-start'],
|
|
6768
|
+
};
|
|
6769
|
+
/**
|
|
6770
|
+
* Opens an {@link AdsMenuDropDownComponent} in a CDK overlay anchored to the host element.
|
|
6771
|
+
*
|
|
6772
|
+
* The overlay is rendered at the document root (so it is never clipped by an ag-grid cell or
|
|
6773
|
+
* any `overflow: hidden` ancestor) and auto-positions itself: it opens towards `menuPosition`
|
|
6774
|
+
* when there is room, otherwise it flips to whichever side fits, and is pushed fully into the
|
|
6775
|
+
* viewport as a last resort so it is always visible.
|
|
6776
|
+
*
|
|
6777
|
+
* @example
|
|
6778
|
+
* ```html
|
|
6779
|
+
* <ads-icon-button
|
|
6780
|
+
* [adsMenuDropDownTriggerFor]="actionItems"
|
|
6781
|
+
* menuPosition="below-start"
|
|
6782
|
+
* (itemSelect)="onAction($event, row)">
|
|
6783
|
+
* <ads-icon name="more_vertical" />
|
|
6784
|
+
* </ads-icon-button>
|
|
6785
|
+
* ```
|
|
6786
|
+
*/
|
|
6787
|
+
class AdsMenuDropDownTriggerDirective {
|
|
6788
|
+
constructor() {
|
|
6789
|
+
this.overlay = inject(Overlay);
|
|
6790
|
+
this.elementRef = inject((ElementRef));
|
|
6791
|
+
/** The items to render inside the menu */
|
|
6792
|
+
this.items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'adsMenuDropDownTriggerFor' });
|
|
6793
|
+
/** Preferred side/alignment the menu opens towards before auto-flipping */
|
|
6794
|
+
this.menuPosition = input('below-start', /* @ts-ignore */
|
|
6795
|
+
...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
|
|
6796
|
+
/** Accessible label applied to the menu panel */
|
|
6797
|
+
this.menuAriaLabel = input('Menu', /* @ts-ignore */
|
|
6798
|
+
...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
|
|
6799
|
+
/** Disable the trigger so the menu cannot be opened */
|
|
6800
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6801
|
+
/** Emitted when an enabled item is selected */
|
|
6802
|
+
this.itemSelect = output();
|
|
6803
|
+
/** Emitted when the menu opens */
|
|
6804
|
+
this.menuOpened = output();
|
|
6805
|
+
/** Emitted when the menu closes */
|
|
6806
|
+
this.menuClosed = output();
|
|
6807
|
+
/** @ignore Whether the menu is currently open */
|
|
6808
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
6809
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
6810
|
+
/** @ignore */
|
|
6811
|
+
this.overlayRef = null;
|
|
6812
|
+
/** @ignore */
|
|
6813
|
+
this.menuRef = null;
|
|
6814
|
+
}
|
|
6815
|
+
/** @ignore */
|
|
6816
|
+
toggle() {
|
|
6817
|
+
if (this.isOpen()) {
|
|
6818
|
+
this.close();
|
|
6819
|
+
}
|
|
6820
|
+
else {
|
|
6821
|
+
this.open();
|
|
6822
|
+
}
|
|
6823
|
+
}
|
|
6824
|
+
/** Open the menu (no-op if disabled or already open). */
|
|
6825
|
+
open() {
|
|
6826
|
+
if (this.disabled() || this.isOpen()) {
|
|
6827
|
+
return;
|
|
6828
|
+
}
|
|
6829
|
+
const positionStrategy = this.overlay
|
|
6830
|
+
.position()
|
|
6831
|
+
.flexibleConnectedTo(this.elementRef)
|
|
6832
|
+
.withPositions(FALLBACK_ORDER[this.menuPosition()].map((key) => POSITIONS[key]))
|
|
6833
|
+
.withPush(true)
|
|
6834
|
+
.withFlexibleDimensions(false)
|
|
6835
|
+
.withViewportMargin(8);
|
|
6836
|
+
this.overlayRef = this.overlay.create({
|
|
6837
|
+
positionStrategy,
|
|
6838
|
+
// Dismiss the menu when the user scrolls (e.g. scrolling the ag-grid body),
|
|
6839
|
+
// matching standard menu behaviour.
|
|
6840
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
6841
|
+
hasBackdrop: true,
|
|
6842
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
6843
|
+
});
|
|
6844
|
+
this.menuRef = this.overlayRef.attach(new ComponentPortal(AdsMenuDropDownComponent));
|
|
6845
|
+
this.menuRef.setInput('items', this.items());
|
|
6846
|
+
this.menuRef.setInput('ariaLabel', this.menuAriaLabel());
|
|
6847
|
+
this.menuRef.setInput('autoFocus', true);
|
|
6848
|
+
this.menuRef.instance.itemSelect.subscribe((item) => {
|
|
6849
|
+
this.itemSelect.emit(item);
|
|
6850
|
+
this.close();
|
|
6851
|
+
});
|
|
6852
|
+
this.menuRef.instance.closed.subscribe(() => this.close());
|
|
6853
|
+
this.overlayRef.backdropClick().subscribe(() => this.close());
|
|
6854
|
+
this.overlayRef.detachments().subscribe(() => this.close());
|
|
6855
|
+
this.overlayRef.keydownEvents().subscribe((event) => {
|
|
6856
|
+
if (event.keyCode === ESCAPE) {
|
|
6857
|
+
this.close();
|
|
6858
|
+
}
|
|
6859
|
+
});
|
|
6860
|
+
this.isOpen.set(true);
|
|
6861
|
+
this.menuOpened.emit();
|
|
6862
|
+
}
|
|
6863
|
+
/** Close the menu and restore focus to the trigger. */
|
|
6864
|
+
close() {
|
|
6865
|
+
if (!this.isOpen()) {
|
|
6866
|
+
return;
|
|
6867
|
+
}
|
|
6868
|
+
this.overlayRef?.dispose();
|
|
6869
|
+
this.overlayRef = null;
|
|
6870
|
+
this.menuRef = null;
|
|
6871
|
+
this.isOpen.set(false);
|
|
6872
|
+
this.elementRef.nativeElement.focus();
|
|
6873
|
+
this.menuClosed.emit();
|
|
6874
|
+
}
|
|
6875
|
+
/** @ignore */
|
|
6876
|
+
ngOnDestroy() {
|
|
6877
|
+
this.overlayRef?.dispose();
|
|
6878
|
+
}
|
|
6879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6880
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: AdsMenuDropDownTriggerDirective, isStandalone: true, selector: "[adsMenuDropDownTriggerFor]", inputs: { items: { classPropertyName: "items", publicName: "adsMenuDropDownTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()" } }, ngImport: i0 }); }
|
|
6881
|
+
}
|
|
6882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownTriggerDirective, decorators: [{
|
|
6883
|
+
type: Directive,
|
|
6884
|
+
args: [{
|
|
6885
|
+
selector: '[adsMenuDropDownTriggerFor]',
|
|
6886
|
+
host: {
|
|
6887
|
+
'[attr.aria-haspopup]': '"menu"',
|
|
6888
|
+
'[attr.aria-expanded]': 'isOpen()',
|
|
6889
|
+
'(click)': 'toggle()',
|
|
6890
|
+
},
|
|
6891
|
+
}]
|
|
6892
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "adsMenuDropDownTriggerFor", required: true }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
|
|
6893
|
+
|
|
6568
6894
|
class AdsExpansionPanelComponent {
|
|
6569
6895
|
constructor(registry, elementRef) {
|
|
6570
6896
|
this.registry = registry;
|
|
@@ -9607,6 +9933,8 @@ class AdsSideNavBarV2Component {
|
|
|
9607
9933
|
...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
9608
9934
|
/** Emits when collapsed state changes */
|
|
9609
9935
|
this.collapsedChange = output();
|
|
9936
|
+
/** Emits when a click-driven sub-item (one without an `href`) is selected. */
|
|
9937
|
+
this.itemSelect = output();
|
|
9610
9938
|
/** @ignore */
|
|
9611
9939
|
this.isMobile = signal(false, /* @ts-ignore */
|
|
9612
9940
|
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
@@ -9655,17 +9983,24 @@ class AdsSideNavBarV2Component {
|
|
|
9655
9983
|
this.collapsedChange.emit(true);
|
|
9656
9984
|
}
|
|
9657
9985
|
}
|
|
9986
|
+
/** @ignore Click handler for sub-items; emits `itemSelect` for non-route (hrefless) items. */
|
|
9987
|
+
onSubItemClick(item) {
|
|
9988
|
+
this.onNavItemClick();
|
|
9989
|
+
if (!item.href) {
|
|
9990
|
+
this.itemSelect.emit(item);
|
|
9991
|
+
}
|
|
9992
|
+
}
|
|
9658
9993
|
/** @ignore */
|
|
9659
9994
|
checkMobile() {
|
|
9660
9995
|
this.isMobile.set(window.innerWidth < MOBILE_BREAKPOINT);
|
|
9661
9996
|
}
|
|
9662
9997
|
/** @ignore */
|
|
9663
9998
|
hasActiveLink(item) {
|
|
9664
|
-
return !!item.subItems?.some((subItem) => this.
|
|
9999
|
+
return !!(item.active || item.subItems?.some((subItem) => this.hasActiveSubLink(subItem)));
|
|
9665
10000
|
}
|
|
9666
|
-
/** @ignore */
|
|
10001
|
+
/** @ignore Explicit `active` flag wins; falls back to a router match when `href` is set. */
|
|
9667
10002
|
hasActiveSubLink(item) {
|
|
9668
|
-
return this.isActive(item.href);
|
|
10003
|
+
return item.active ?? (item.href ? this.isActive(item.href) : false);
|
|
9669
10004
|
}
|
|
9670
10005
|
/** @ignore */
|
|
9671
10006
|
isActive(href) {
|
|
@@ -9677,7 +10012,7 @@ class AdsSideNavBarV2Component {
|
|
|
9677
10012
|
});
|
|
9678
10013
|
}
|
|
9679
10014
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsSideNavBarV2Component, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9680
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsSideNavBarV2Component, isStandalone: true, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onNavItemClick()\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
|
|
10015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsSideNavBarV2Component, isStandalone: true, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", itemSelect: "itemSelect" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
|
|
9681
10016
|
}
|
|
9682
10017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsSideNavBarV2Component, decorators: [{
|
|
9683
10018
|
type: Component,
|
|
@@ -9691,11 +10026,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
9691
10026
|
MatExpansionPanelHeader,
|
|
9692
10027
|
MatExpansionPanelTitle,
|
|
9693
10028
|
DividerComponent,
|
|
9694
|
-
], template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onNavItemClick()\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
|
|
10029
|
+
], template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
|
|
9695
10030
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
|
|
9696
10031
|
type: ViewChild,
|
|
9697
10032
|
args: ['sideNavArea', { read: ElementRef }]
|
|
9698
|
-
}], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], onResize: [{
|
|
10033
|
+
}], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], onResize: [{
|
|
9699
10034
|
type: HostListener,
|
|
9700
10035
|
args: ['window:resize']
|
|
9701
10036
|
}] } });
|
|
@@ -10530,6 +10865,8 @@ class AdsTabsComponent {
|
|
|
10530
10865
|
this.selectedIndex = 0;
|
|
10531
10866
|
/** When `true`, the border-bottom on inactive (non-active, non-disabled) tabs is hidden. Defaults to `false`. */
|
|
10532
10867
|
this.hideInactiveBorder = false;
|
|
10868
|
+
/** When `false`, tab headers size to their content instead of stretching to fill the width. Defaults to `true`. */
|
|
10869
|
+
this.stretchTabs = true;
|
|
10533
10870
|
this.selectedIndexChange = new EventEmitter();
|
|
10534
10871
|
this.tabChange = new EventEmitter();
|
|
10535
10872
|
}
|
|
@@ -10556,11 +10893,11 @@ class AdsTabsComponent {
|
|
|
10556
10893
|
};
|
|
10557
10894
|
}
|
|
10558
10895
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTabsComponent, isStandalone: true, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.
|
|
10896
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTabsComponent, isStandalone: true, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder", stretchTabs: "stretchTabs", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:var(--color-white)!important;border:1px solid var(--color-light);box-shadow:0 2px 6px var(--color-medium-opacity-50);opacity:1}:host::ng-deep .mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{border-color:var(--color-secondary)!important;border-width:2px 2px 0 0;width:14px!important;height:14px!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:translate(-3px) rotate(45deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron{transform:translate(3px) rotate(-135deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
10560
10897
|
}
|
|
10561
10898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTabsComponent, decorators: [{
|
|
10562
10899
|
type: Component,
|
|
10563
|
-
args: [{ selector: 'ads-tabs', imports: [MatTabGroup, MatTab, NgTemplateOutlet, MatTabLabel], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.
|
|
10900
|
+
args: [{ selector: 'ads-tabs', imports: [MatTabGroup, MatTab, NgTemplateOutlet, MatTabLabel, MatTabContent], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:var(--color-white)!important;border:1px solid var(--color-light);box-shadow:0 2px 6px var(--color-medium-opacity-50);opacity:1}:host::ng-deep .mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{border-color:var(--color-secondary)!important;border-width:2px 2px 0 0;width:14px!important;height:14px!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:translate(-3px) rotate(45deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron{transform:translate(3px) rotate(-135deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-disabled{opacity:.4;pointer-events:none}\n"] }]
|
|
10564
10901
|
}], propDecorators: { tabGroup: [{ type: i0.ViewChild, args: ['tabGroup', { isSignal: true }] }], tabs: [{
|
|
10565
10902
|
type: Input
|
|
10566
10903
|
}], selectedIndex: [{
|
|
@@ -10571,6 +10908,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
10571
10908
|
type: Input
|
|
10572
10909
|
}], hideInactiveBorder: [{
|
|
10573
10910
|
type: Input
|
|
10911
|
+
}], stretchTabs: [{
|
|
10912
|
+
type: Input
|
|
10913
|
+
}], animationDuration: [{
|
|
10914
|
+
type: Input
|
|
10574
10915
|
}], selectedIndexChange: [{
|
|
10575
10916
|
type: Output
|
|
10576
10917
|
}], tabChange: [{
|
|
@@ -11075,5 +11416,5 @@ function provideAdsUi(config) {
|
|
|
11075
11416
|
* Generated bundle index. Do not edit.
|
|
11076
11417
|
*/
|
|
11077
11418
|
|
|
11078
|
-
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11419
|
+
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11079
11420
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|