@ascentgl/ads-ui 21.17.0 → 21.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ import * as i1 from '@ascentgl/ads-icons';
|
|
|
4
4
|
import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
5
5
|
import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconChevronUp, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu } from '@ascentgl/ads-icons/icons';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
|
-
import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
|
|
7
|
+
import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle, DOCUMENT } from '@angular/common';
|
|
8
8
|
import * as i2 from '@angular/material/badge';
|
|
9
9
|
import { MatBadge } from '@angular/material/badge';
|
|
10
10
|
import * as i1$2 from '@angular/router';
|
|
@@ -14,7 +14,7 @@ import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/but
|
|
|
14
14
|
import * as i4 from '@angular/forms';
|
|
15
15
|
import { FormControl, Validators, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
|
|
16
16
|
import * as i4$1 from '@angular/cdk/overlay';
|
|
17
|
-
import { OverlayModule, OverlayContainer
|
|
17
|
+
import { OverlayModule, OverlayContainer } from '@angular/cdk/overlay';
|
|
18
18
|
import { Subject, asapScheduler, timer, of, takeUntil as takeUntil$1, Subscription, combineLatest } from 'rxjs';
|
|
19
19
|
import { takeUntil, filter, map, tap, debounce } from 'rxjs/operators';
|
|
20
20
|
import * as i3 from '@angular/platform-browser';
|
|
@@ -38,7 +38,7 @@ import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material
|
|
|
38
38
|
import * as i11 from 'ngx-mask';
|
|
39
39
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
40
40
|
import { MatDividerModule } from '@angular/material/divider';
|
|
41
|
-
import { MatDatepickerModule
|
|
41
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
42
42
|
import { add, format } from 'date-fns';
|
|
43
43
|
import * as i6 from '@mat-datetimepicker/core';
|
|
44
44
|
import { MAT_DATETIME_FORMATS, MatDatetimepickerComponent, MatNativeDatetimeModule, MatDatetimepickerModule } from '@mat-datetimepicker/core';
|
|
@@ -5011,9 +5011,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5011
5011
|
}]
|
|
5012
5012
|
}] });
|
|
5013
5013
|
|
|
5014
|
-
function scrollFactory(overlay) {
|
|
5015
|
-
return () => overlay.scrollStrategies.noop();
|
|
5016
|
-
}
|
|
5017
5014
|
class AdsDatetimepickerComponent extends AbstractInputComponent {
|
|
5018
5015
|
constructor() {
|
|
5019
5016
|
super();
|
|
@@ -5385,23 +5382,11 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
|
|
|
5385
5382
|
return this.removeOffset(value, this.getRequiredOffset(value));
|
|
5386
5383
|
}
|
|
5387
5384
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatetimepickerComponent, isStandalone: false, 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: [
|
|
5389
|
-
{
|
|
5390
|
-
provide: MAT_DATEPICKER_SCROLL_STRATEGY,
|
|
5391
|
-
useFactory: scrollFactory,
|
|
5392
|
-
deps: [Overlay],
|
|
5393
|
-
},
|
|
5394
|
-
], 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: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.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: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.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"] }] }); }
|
|
5385
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatetimepickerComponent, isStandalone: false, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat", timeInterval: "timeInterval", overlayCdkClass: "overlayCdkClass" }, 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: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.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: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.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"] }] }); }
|
|
5395
5386
|
}
|
|
5396
5387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, decorators: [{
|
|
5397
5388
|
type: Component,
|
|
5398
|
-
args: [{ selector: 'ads-datetimepicker', standalone: false, providers: [
|
|
5399
|
-
{
|
|
5400
|
-
provide: MAT_DATEPICKER_SCROLL_STRATEGY,
|
|
5401
|
-
useFactory: scrollFactory,
|
|
5402
|
-
deps: [Overlay],
|
|
5403
|
-
},
|
|
5404
|
-
], template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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"] }]
|
|
5389
|
+
args: [{ selector: 'ads-datetimepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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"] }]
|
|
5405
5390
|
}], ctorParameters: () => [], propDecorators: { picker: [{
|
|
5406
5391
|
type: ViewChild,
|
|
5407
5392
|
args: [MatDatetimepickerComponent]
|
|
@@ -5584,23 +5569,11 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
|
|
|
5584
5569
|
this.setControlValue(this.displayControl, valueToApply);
|
|
5585
5570
|
}
|
|
5586
5571
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, providers: [
|
|
5588
|
-
{
|
|
5589
|
-
provide: MAT_DATEPICKER_SCROLL_STRATEGY,
|
|
5590
|
-
useFactory: scrollFactory,
|
|
5591
|
-
deps: [Overlay],
|
|
5592
|
-
},
|
|
5593
|
-
], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.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: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.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"] }] }); }
|
|
5572
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.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: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.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"] }] }); }
|
|
5594
5573
|
}
|
|
5595
5574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, decorators: [{
|
|
5596
5575
|
type: Component,
|
|
5597
|
-
args: [{ selector: 'ads-datepicker', standalone: false, providers: [
|
|
5598
|
-
{
|
|
5599
|
-
provide: MAT_DATEPICKER_SCROLL_STRATEGY,
|
|
5600
|
-
useFactory: scrollFactory,
|
|
5601
|
-
deps: [Overlay],
|
|
5602
|
-
},
|
|
5603
|
-
], template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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"] }]
|
|
5576
|
+
args: [{ selector: 'ads-datepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" 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 }\"\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-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-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-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 .search-icon{color:var(--color-error)!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{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) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}: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 .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"] }]
|
|
5604
5577
|
}], propDecorators: { customDisplayFormat: [{
|
|
5605
5578
|
type: Input
|
|
5606
5579
|
}] } });
|
|
@@ -7356,6 +7329,7 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
7356
7329
|
super();
|
|
7357
7330
|
this.router = router;
|
|
7358
7331
|
this.registry = registry;
|
|
7332
|
+
this.document = inject(DOCUMENT);
|
|
7359
7333
|
/** @ignore */
|
|
7360
7334
|
this.accordion = viewChild.required(MatAccordion);
|
|
7361
7335
|
/** Array of nav elements */
|
|
@@ -7380,6 +7354,13 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
7380
7354
|
this.hasBottomItems = computed(() => this.bottomNavItems().length > 0, ...(ngDevMode ? [{ debugName: "hasBottomItems" }] : []));
|
|
7381
7355
|
this.checkScreenWidth();
|
|
7382
7356
|
this.registry.register([adsIconChevronDown, adsIconChevronUp, adsIconCross, adsIconHamburgerMenu]);
|
|
7357
|
+
// Keep CSS var in sync with the persisted/controlled sidebar size (dblclick collapse/expand, init, etc.)
|
|
7358
|
+
effect(() => {
|
|
7359
|
+
const size = this.sidebarSize();
|
|
7360
|
+
if (size) {
|
|
7361
|
+
this.document.documentElement.style.setProperty('--ads-scms-sidebar-width', `${size}px`);
|
|
7362
|
+
}
|
|
7363
|
+
});
|
|
7383
7364
|
effect(() => {
|
|
7384
7365
|
if (this.isCollapsed() && !this.isTablet()) {
|
|
7385
7366
|
this.accordion().closeAll();
|
|
@@ -7403,6 +7384,38 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
7403
7384
|
fragment: 'ignored',
|
|
7404
7385
|
});
|
|
7405
7386
|
}
|
|
7387
|
+
/** @ignore */
|
|
7388
|
+
splitterSubscribe() {
|
|
7389
|
+
super.splitterSubscribe();
|
|
7390
|
+
// Keep CSS var in sync during drag so the fixed sidebar and content offset track the gutter.
|
|
7391
|
+
setTimeout(() => {
|
|
7392
|
+
if (!this.splitter)
|
|
7393
|
+
return;
|
|
7394
|
+
this.sidebarWidthSub?.unsubscribe();
|
|
7395
|
+
this.sidebarWidthSub = this.splitter.dragProgress$.subscribe((data) => {
|
|
7396
|
+
const newSize = Number(data.sizes[0]);
|
|
7397
|
+
this.document.documentElement.style.setProperty('--ads-scms-sidebar-width', `${newSize}px`);
|
|
7398
|
+
});
|
|
7399
|
+
// Also seed the CSS var initially.
|
|
7400
|
+
this.document.documentElement.style.setProperty('--ads-scms-sidebar-width', `${this.sidebarSize()}px`);
|
|
7401
|
+
});
|
|
7402
|
+
}
|
|
7403
|
+
/** @ignore */
|
|
7404
|
+
onSplitDragStart() {
|
|
7405
|
+
// Keep class for potential future styling, but we no longer freeze scroll.
|
|
7406
|
+
this.document.documentElement.classList.add('ads-split-dragging');
|
|
7407
|
+
}
|
|
7408
|
+
/** @ignore */
|
|
7409
|
+
onSplitDragEnd() {
|
|
7410
|
+
this.document.documentElement.classList.remove('ads-split-dragging');
|
|
7411
|
+
}
|
|
7412
|
+
/** @ignore */
|
|
7413
|
+
ngOnDestroy() {
|
|
7414
|
+
this.sidebarWidthSub?.unsubscribe();
|
|
7415
|
+
this.document.documentElement.style.removeProperty('--ads-scms-sidebar-width');
|
|
7416
|
+
super.ngOnDestroy();
|
|
7417
|
+
}
|
|
7418
|
+
/** @ignore */
|
|
7406
7419
|
checkScreenWidth() {
|
|
7407
7420
|
const mobileWidth = window.innerWidth < 770;
|
|
7408
7421
|
this.isMobile.set(window.innerWidth < 321);
|
|
@@ -7418,21 +7431,18 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
7418
7431
|
}
|
|
7419
7432
|
}
|
|
7420
7433
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarComponent, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "checkScreenWidth()" } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\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 />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\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]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\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\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!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 ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$5.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
7434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragStart)=\"onSplitDragStart()\"\n (dragEnd)=\"onSplitDragEnd(); dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\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 />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\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]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\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\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!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 ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:3}:host ::ng-deep as-split>.as-split-area.split-area-content{margin-left:var(--ads-scms-sidebar-width, 220px)}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$5.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
7422
7435
|
}
|
|
7423
7436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarComponent, decorators: [{
|
|
7424
7437
|
type: Component,
|
|
7425
|
-
args: [{ selector: 'ads-scms-side-nav-bar', standalone: false, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\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 />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\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]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\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\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!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 ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"] }]
|
|
7438
|
+
args: [{ selector: 'ads-scms-side-nav-bar', standalone: false, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragStart)=\"onSplitDragStart()\"\n (dragEnd)=\"onSplitDragEnd(); dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\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 />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); 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 (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\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]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\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\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!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 ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:3}:host ::ng-deep as-split>.as-split-area.split-area-content{margin-left:var(--ads-scms-sidebar-width, 220px)}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"] }]
|
|
7426
7439
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { splitter: [{
|
|
7427
7440
|
type: ViewChild,
|
|
7428
7441
|
args: ['splitter']
|
|
7429
7442
|
}], sideNavArea: [{
|
|
7430
7443
|
type: ViewChild,
|
|
7431
7444
|
args: ['sideNavArea', { read: ElementRef }]
|
|
7432
|
-
}], accordion: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAccordion), { isSignal: true }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }]
|
|
7433
|
-
type: HostListener,
|
|
7434
|
-
args: ['window:resize']
|
|
7435
|
-
}] } });
|
|
7445
|
+
}], accordion: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAccordion), { isSignal: true }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }] } });
|
|
7436
7446
|
|
|
7437
7447
|
class AdsScmsSideNavBarModule {
|
|
7438
7448
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -8917,5 +8927,5 @@ function provideAdsUi(config) {
|
|
|
8917
8927
|
* Generated bundle index. Do not edit.
|
|
8918
8928
|
*/
|
|
8919
8929
|
|
|
8920
|
-
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPilotPayLogoComponent, AdsPilotPayLogoModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalSideNavigationStepperComponent, AdsVerticalSideNavigationStepperModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi
|
|
8930
|
+
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPilotPayLogoComponent, AdsPilotPayLogoModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalSideNavigationStepperComponent, AdsVerticalSideNavigationStepperModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
8921
8931
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|