@ascentgl/ads-ui 21.114.1 → 21.114.3
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.
|
@@ -2813,6 +2813,8 @@ class AbstractBaseComponent {
|
|
|
2813
2813
|
return false;
|
|
2814
2814
|
if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value))
|
|
2815
2815
|
return false;
|
|
2816
|
+
if (this.hasOnlyStaleRequiredError(this.valueControl))
|
|
2817
|
+
return false;
|
|
2816
2818
|
return !!this.valueControl.errors && (this.valueControl.touched || this.immediateValidation);
|
|
2817
2819
|
}
|
|
2818
2820
|
/** @ignore */
|
|
@@ -2821,24 +2823,38 @@ class AbstractBaseComponent {
|
|
|
2821
2823
|
}
|
|
2822
2824
|
/**
|
|
2823
2825
|
* @ignore
|
|
2824
|
-
*
|
|
2825
|
-
*
|
|
2826
|
-
*
|
|
2827
|
-
*
|
|
2828
|
-
* This
|
|
2826
|
+
* Detects stale 'required' errors produced by Angular's RequiredValidator directive
|
|
2827
|
+
* that is still enabled in the current change detection cycle but will be disabled
|
|
2828
|
+
* once the `[required]` binding is re-evaluated on the child `<input>` element.
|
|
2829
|
+
*
|
|
2830
|
+
* This happens because `[ngClass]` on `mat-form-field` (parent) is evaluated BEFORE
|
|
2831
|
+
* `[required]` on `<input>` (child), so `canShowError()` sees errors from the
|
|
2832
|
+
* still-enabled directive even though `Validators.required` was already removed
|
|
2833
|
+
* programmatically via `removeValidators`.
|
|
2829
2834
|
*/
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
if (
|
|
2833
|
-
return true;
|
|
2834
|
-
}
|
|
2835
|
-
// Fallback: run the current validator against an empty value to detect 'required' error
|
|
2836
|
-
const validator = control.validator;
|
|
2837
|
-
if (!validator) {
|
|
2835
|
+
hasOnlyStaleRequiredError(control) {
|
|
2836
|
+
const errors = control.errors;
|
|
2837
|
+
if (!errors || !('required' in errors))
|
|
2838
2838
|
return false;
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2839
|
+
return Object.keys(errors).length === 1 && !control.hasValidator(Validators.required);
|
|
2840
|
+
}
|
|
2841
|
+
/**
|
|
2842
|
+
* @ignore
|
|
2843
|
+
* Checks whether a control has a required validator.
|
|
2844
|
+
*
|
|
2845
|
+
* Uses Angular's `hasValidator(Validators.required)` which checks `_rawValidators`
|
|
2846
|
+
* by reference. In Angular 21 this handles all standard usage patterns:
|
|
2847
|
+
* - `new FormControl(null, Validators.required)`
|
|
2848
|
+
* - `new FormControl(null, [Validators.required, ...])`
|
|
2849
|
+
* - `control.addValidators(Validators.required)`
|
|
2850
|
+
*
|
|
2851
|
+
* NOTE: We intentionally do NOT fall back to running the composed validator against
|
|
2852
|
+
* an empty value. That approach creates a circular dependency with Angular's
|
|
2853
|
+
* `RequiredValidator` directive (which is auto-instantiated by `[required][formControl]`
|
|
2854
|
+
* in the template and merged into the control's validators by `setUpValidators`).
|
|
2855
|
+
*/
|
|
2856
|
+
hasRequiredValidatorCheck(control) {
|
|
2857
|
+
return control.hasValidator(Validators.required);
|
|
2842
2858
|
}
|
|
2843
2859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2844
2860
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractBaseComponent, isStandalone: true, inputs: { skipValidationWhenEmpty: "skipValidationWhenEmpty", showValidationError: "showValidationError", control: "control", immediateValidation: "immediateValidation", errorMessages: "errorMessages", hint: "hint", successMessage: "successMessage", id: "id", label: "label", showFooter: "showFooter", width: "width", shrink: "shrink" }, usesOnChanges: true, ngImport: i0 }); }
|
|
@@ -3466,11 +3482,11 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
|
|
|
3466
3482
|
return option && typeof option === 'object' && 'disableDropdownOption' in option && option.disableDropdownOption === true;
|
|
3467
3483
|
}
|
|
3468
3484
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3470
3486
|
}
|
|
3471
3487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, decorators: [{
|
|
3472
3488
|
type: Component,
|
|
3473
|
-
args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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"] }]
|
|
3489
|
+
args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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"] }]
|
|
3474
3490
|
}], ctorParameters: () => [], propDecorators: { displayValueFormatter: [{
|
|
3475
3491
|
type: Input
|
|
3476
3492
|
}], mode: [{
|
|
@@ -3693,11 +3709,11 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
|
|
|
3693
3709
|
return super.chipName(option);
|
|
3694
3710
|
}
|
|
3695
3711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips", showSelectAll: "showSelectAll", disableEmptyValue: "disableEmptyValue" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips", showSelectAll: "showSelectAll", disableEmptyValue: "disableEmptyValue" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3697
3713
|
}
|
|
3698
3714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
|
|
3699
3715
|
type: Component,
|
|
3700
|
-
args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\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"] }]
|
|
3716
|
+
args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\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"] }]
|
|
3701
3717
|
}], propDecorators: { showChips: [{
|
|
3702
3718
|
type: Input
|
|
3703
3719
|
}], showSelectAll: [{
|
|
@@ -3851,11 +3867,11 @@ class AdsInputComponent extends AbstractInputComponent {
|
|
|
3851
3867
|
}
|
|
3852
3868
|
}
|
|
3853
3869
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", matAutocomplete: "matAutocomplete", readOnly: "readOnly", showSearchIcon: "showSearchIcon", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'read-only': readOnly,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [outputTransformFn]=\"outputTransformFn\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readOnly\"\n [tabIndex]=\"readOnly ? -1 : 0\"\n (blur)=\"onBlur($event)\"\n (focus)=\"handleFocusInternal($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n (paste)=\"readOnly ? $event.preventDefault() : null\"\n (cut)=\"readOnly ? $event.preventDefault() : null\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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 (isPasswordField) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "directive", type: i11.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] }); }
|
|
3870
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", matAutocomplete: "matAutocomplete", readOnly: "readOnly", showSearchIcon: "showSearchIcon", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'read-only': readOnly,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [outputTransformFn]=\"outputTransformFn\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readOnly\"\n [tabIndex]=\"readOnly ? -1 : 0\"\n (blur)=\"onBlur($event)\"\n (focus)=\"handleFocusInternal($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n (paste)=\"readOnly ? $event.preventDefault() : null\"\n (cut)=\"readOnly ? $event.preventDefault() : null\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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 (isPasswordField) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "directive", type: i11.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] }); }
|
|
3855
3871
|
}
|
|
3856
3872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInputComponent, decorators: [{
|
|
3857
3873
|
type: Component,
|
|
3858
|
-
args: [{ selector: 'ads-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'read-only': readOnly,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [outputTransformFn]=\"outputTransformFn\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readOnly\"\n [tabIndex]=\"readOnly ? -1 : 0\"\n (blur)=\"onBlur($event)\"\n (focus)=\"handleFocusInternal($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n (paste)=\"readOnly ? $event.preventDefault() : null\"\n (cut)=\"readOnly ? $event.preventDefault() : null\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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 (isPasswordField) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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"] }]
|
|
3874
|
+
args: [{ selector: 'ads-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'read-only': readOnly,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [outputTransformFn]=\"outputTransformFn\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readOnly\"\n [tabIndex]=\"readOnly ? -1 : 0\"\n (blur)=\"onBlur($event)\"\n (focus)=\"handleFocusInternal($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n (paste)=\"readOnly ? $event.preventDefault() : null\"\n (cut)=\"readOnly ? $event.preventDefault() : null\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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 (isPasswordField) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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"] }]
|
|
3859
3875
|
}], propDecorators: { maxlength: [{
|
|
3860
3876
|
type: Input
|
|
3861
3877
|
}], type: [{
|
|
@@ -4039,11 +4055,11 @@ class AdsTextareaComponent extends AbstractInputComponent {
|
|
|
4039
4055
|
this.canResize = true;
|
|
4040
4056
|
}
|
|
4041
4057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTextareaComponent, isStandalone: false, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\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 </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }] }); }
|
|
4058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTextareaComponent, isStandalone: false, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\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 </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: 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: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }] }); }
|
|
4043
4059
|
}
|
|
4044
4060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTextareaComponent, decorators: [{
|
|
4045
4061
|
type: Component,
|
|
4046
|
-
args: [{ selector: 'ads-textarea', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\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 </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\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"] }]
|
|
4062
|
+
args: [{ selector: 'ads-textarea', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\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 </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\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"] }]
|
|
4047
4063
|
}], propDecorators: { maxlength: [{
|
|
4048
4064
|
type: Input
|
|
4049
4065
|
}], rows: [{
|
|
@@ -5206,11 +5222,11 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
5206
5222
|
this.intersectionObserver.observe(this.hostEl.nativeElement);
|
|
5207
5223
|
}
|
|
5208
5224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5209
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, staticOptions: { classPropertyName: "staticOptions", publicName: "staticOptions", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, emitEmptyValues: { classPropertyName: "emitEmptyValues", publicName: "emitEmptyValues", isSignal: false, isRequired: false, transformFunction: null }, loadSuggestionOnInit: { classPropertyName: "loadSuggestionOnInit", publicName: "loadSuggestionOnInit", isSignal: false, isRequired: false, transformFunction: null }, noDataOption: { classPropertyName: "noDataOption", publicName: "noDataOption", isSignal: false, isRequired: false, transformFunction: null }, showNoDataOption: { classPropertyName: "showNoDataOption", publicName: "showNoDataOption", isSignal: false, isRequired: false, transformFunction: null }, moreDataOption: { classPropertyName: "moreDataOption", publicName: "moreDataOption", isSignal: false, isRequired: false, transformFunction: null }, staticDataOption: { classPropertyName: "staticDataOption", publicName: "staticDataOption", isSignal: false, isRequired: false, transformFunction: null }, prependOption: { classPropertyName: "prependOption", publicName: "prependOption", isSignal: false, isRequired: false, transformFunction: null }, showPrependOption: { classPropertyName: "showPrependOption", publicName: "showPrependOption", isSignal: false, isRequired: false, transformFunction: null }, onEnterKeyDown: { classPropertyName: "onEnterKeyDown", publicName: "onEnterKeyDown", isSignal: false, isRequired: false, transformFunction: null }, searchIconClickCallback: { classPropertyName: "searchIconClickCallback", publicName: "searchIconClickCallback", isSignal: false, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: false, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: false, isRequired: false, transformFunction: null }, displayValueFormatter: { classPropertyName: "displayValueFormatter", publicName: "displayValueFormatter", isSignal: false, isRequired: false, transformFunction: null }, useOptionTemplate: { classPropertyName: "useOptionTemplate", publicName: "useOptionTemplate", isSignal: false, isRequired: false, transformFunction: null }, minValueLength: { classPropertyName: "minValueLength", publicName: "minValueLength", isSignal: false, isRequired: false, transformFunction: null }, preventClick: { classPropertyName: "preventClick", publicName: "preventClick", isSignal: false, isRequired: false, transformFunction: null }, closePanelEnabled: { classPropertyName: "closePanelEnabled", publicName: "closePanelEnabled", isSignal: false, isRequired: false, transformFunction: null }, trimValue: { classPropertyName: "trimValue", publicName: "trimValue", isSignal: false, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { externalButtonClick: "externalButtonClick", focusInput: "focusInput", blurInput: "blurInput", emitSearchValueInput: "emitSearchValueInput" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "moreDataMatOption", first: true, predicate: ["moreDataMatOption"], descendants: true }, { propertyName: "noDataMatOption", first: true, predicate: ["noDataMatOption"], descendants: true }, { propertyName: "staticDataMatOption", first: true, predicate: ["staticDataMatOption"], descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @if (canUsePrependOption) {\n <div class=\"prepend-option-container\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: prependOption }\"\n />\n </div>\n }\n\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n [class]=\"option!.cssClass || ''\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}.prepend-option-container{font-size:.75rem;display:flex;align-items:center;min-height:32px;padding:0 12px;cursor:default;pointer-events:none;color:var(--color-medium);font-weight:600}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
|
|
5225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, staticOptions: { classPropertyName: "staticOptions", publicName: "staticOptions", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, emitEmptyValues: { classPropertyName: "emitEmptyValues", publicName: "emitEmptyValues", isSignal: false, isRequired: false, transformFunction: null }, loadSuggestionOnInit: { classPropertyName: "loadSuggestionOnInit", publicName: "loadSuggestionOnInit", isSignal: false, isRequired: false, transformFunction: null }, noDataOption: { classPropertyName: "noDataOption", publicName: "noDataOption", isSignal: false, isRequired: false, transformFunction: null }, showNoDataOption: { classPropertyName: "showNoDataOption", publicName: "showNoDataOption", isSignal: false, isRequired: false, transformFunction: null }, moreDataOption: { classPropertyName: "moreDataOption", publicName: "moreDataOption", isSignal: false, isRequired: false, transformFunction: null }, staticDataOption: { classPropertyName: "staticDataOption", publicName: "staticDataOption", isSignal: false, isRequired: false, transformFunction: null }, prependOption: { classPropertyName: "prependOption", publicName: "prependOption", isSignal: false, isRequired: false, transformFunction: null }, showPrependOption: { classPropertyName: "showPrependOption", publicName: "showPrependOption", isSignal: false, isRequired: false, transformFunction: null }, onEnterKeyDown: { classPropertyName: "onEnterKeyDown", publicName: "onEnterKeyDown", isSignal: false, isRequired: false, transformFunction: null }, searchIconClickCallback: { classPropertyName: "searchIconClickCallback", publicName: "searchIconClickCallback", isSignal: false, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: false, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: false, isRequired: false, transformFunction: null }, displayValueFormatter: { classPropertyName: "displayValueFormatter", publicName: "displayValueFormatter", isSignal: false, isRequired: false, transformFunction: null }, useOptionTemplate: { classPropertyName: "useOptionTemplate", publicName: "useOptionTemplate", isSignal: false, isRequired: false, transformFunction: null }, minValueLength: { classPropertyName: "minValueLength", publicName: "minValueLength", isSignal: false, isRequired: false, transformFunction: null }, preventClick: { classPropertyName: "preventClick", publicName: "preventClick", isSignal: false, isRequired: false, transformFunction: null }, closePanelEnabled: { classPropertyName: "closePanelEnabled", publicName: "closePanelEnabled", isSignal: false, isRequired: false, transformFunction: null }, trimValue: { classPropertyName: "trimValue", publicName: "trimValue", isSignal: false, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { externalButtonClick: "externalButtonClick", focusInput: "focusInput", blurInput: "blurInput", emitSearchValueInput: "emitSearchValueInput" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "moreDataMatOption", first: true, predicate: ["moreDataMatOption"], descendants: true }, { propertyName: "noDataMatOption", first: true, predicate: ["noDataMatOption"], descendants: true }, { propertyName: "staticDataMatOption", first: true, predicate: ["staticDataMatOption"], descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @if (canUsePrependOption) {\n <div class=\"prepend-option-container\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: prependOption }\"\n />\n </div>\n }\n\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n [class]=\"option!.cssClass || ''\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}.prepend-option-container{font-size:.75rem;display:flex;align-items:center;min-height:32px;padding:0 12px;cursor:default;pointer-events:none;color:var(--color-medium);font-weight:600}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
|
|
5210
5226
|
}
|
|
5211
5227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchDropdownComponent, decorators: [{
|
|
5212
5228
|
type: Component,
|
|
5213
|
-
args: [{ selector: 'ads-search-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @if (canUsePrependOption) {\n <div class=\"prepend-option-container\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: prependOption }\"\n />\n </div>\n }\n\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n [class]=\"option!.cssClass || ''\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}.prepend-option-container{font-size:.75rem;display:flex;align-items:center;min-height:32px;padding:0 12px;cursor:default;pointer-events:none;color:var(--color-medium);font-weight:600}\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"] }]
|
|
5229
|
+
args: [{ selector: 'ads-search-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @if (canUsePrependOption) {\n <div class=\"prepend-option-container\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: prependOption }\"\n />\n </div>\n }\n\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n [class]=\"option!.cssClass || ''\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}.prepend-option-container{font-size:.75rem;display:flex;align-items:center;min-height:32px;padding:0 12px;cursor:default;pointer-events:none;color:var(--color-medium);font-weight:600}\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"] }]
|
|
5214
5230
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { optionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], externalButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalButton", required: false }] }], externalButtonClick: [{ type: i0.Output, args: ["externalButtonClick"] }], maxlength: [{
|
|
5215
5231
|
type: Input
|
|
5216
5232
|
}], panelClass: [{
|
|
@@ -5382,11 +5398,11 @@ class AdsSearchInputComponent extends AdsInputComponent {
|
|
|
5382
5398
|
return this.valueControl.value || this.searchEmptyValue;
|
|
5383
5399
|
}
|
|
5384
5400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5385
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchInputComponent, isStandalone: false, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable", searchEmptyValue: "searchEmptyValue", loading: "loading" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
5401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchInputComponent, isStandalone: false, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable", searchEmptyValue: "searchEmptyValue", loading: "loading" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
5386
5402
|
}
|
|
5387
5403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchInputComponent, decorators: [{
|
|
5388
5404
|
type: Component,
|
|
5389
|
-
args: [{ selector: 'ads-search-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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
|
+
args: [{ selector: 'ads-search-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\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\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".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"] }]
|
|
5390
5406
|
}], ctorParameters: () => [], propDecorators: { searchCallback: [{
|
|
5391
5407
|
type: Input
|
|
5392
5408
|
}], isIconClickable: [{
|
|
@@ -6124,11 +6140,11 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
|
|
|
6124
6140
|
return this.removeOffset(value, this.getRequiredOffset(value));
|
|
6125
6141
|
}
|
|
6126
6142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6127
|
-
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: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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"] }] }); }
|
|
6143
|
+
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: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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"] }] }); }
|
|
6128
6144
|
}
|
|
6129
6145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, decorators: [{
|
|
6130
6146
|
type: Component,
|
|
6131
|
-
args: [{ selector: 'ads-datetimepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6147
|
+
args: [{ selector: 'ads-datetimepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6132
6148
|
}], ctorParameters: () => [], propDecorators: { picker: [{
|
|
6133
6149
|
type: ViewChild,
|
|
6134
6150
|
args: [MatDatetimepickerComponent]
|
|
@@ -6658,11 +6674,11 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
|
|
|
6658
6674
|
date.getDate() === day;
|
|
6659
6675
|
}
|
|
6660
6676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6661
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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"] }] }); }
|
|
6677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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"] }] }); }
|
|
6662
6678
|
}
|
|
6663
6679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, decorators: [{
|
|
6664
6680
|
type: Component,
|
|
6665
|
-
args: [{ selector: 'ads-datepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6681
|
+
args: [{ selector: 'ads-datepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6666
6682
|
}], propDecorators: { customDisplayFormat: [{
|
|
6667
6683
|
type: Input
|
|
6668
6684
|
}], closeOnOutOfView: [{
|
|
@@ -6792,11 +6808,11 @@ class AdsTimepickerComponent extends AdsDatetimepickerComponent {
|
|
|
6792
6808
|
super.onSyncDisplayedValue(valueToApply);
|
|
6793
6809
|
}
|
|
6794
6810
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTimepickerComponent, isStandalone: false, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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: "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"] }] }); }
|
|
6811
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTimepickerComponent, isStandalone: false, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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: "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"] }] }); }
|
|
6796
6812
|
}
|
|
6797
6813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTimepickerComponent, decorators: [{
|
|
6798
6814
|
type: Component,
|
|
6799
|
-
args: [{ selector: 'ads-timepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{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.suppress-validation.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6815
|
+
args: [{ selector: 'ads-timepicker', standalone: false, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6800
6816
|
}], ctorParameters: () => [], propDecorators: { customDisplayFormat: [{
|
|
6801
6817
|
type: Input
|
|
6802
6818
|
}] } });
|
|
@@ -12026,14 +12042,35 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12026
12042
|
this.dropdownControl.enable({ emitEvent: false });
|
|
12027
12043
|
this.inputControl.enable({ emitEvent: false });
|
|
12028
12044
|
}
|
|
12045
|
+
this.syncRequiredValidator();
|
|
12029
12046
|
});
|
|
12030
12047
|
const value = this.valueControl.value;
|
|
12031
12048
|
if (value && !value.startsWith('+') && /^\d+$/.test(value)) {
|
|
12032
12049
|
this.valueControl.setValue(`+${value}`);
|
|
12033
12050
|
}
|
|
12034
|
-
|
|
12035
|
-
|
|
12036
|
-
|
|
12051
|
+
this.syncRequiredValidator();
|
|
12052
|
+
// Monkey-patch validator mutation methods so required state is always synced to inputControl.
|
|
12053
|
+
// This mirrors the existing monkey-patches for setValue / reset above.
|
|
12054
|
+
const origAddValidators = this.valueControl.addValidators.bind(this.valueControl);
|
|
12055
|
+
this.valueControl.addValidators = ((validators) => {
|
|
12056
|
+
origAddValidators(validators);
|
|
12057
|
+
this.syncRequiredValidator();
|
|
12058
|
+
});
|
|
12059
|
+
const origRemoveValidators = this.valueControl.removeValidators.bind(this.valueControl);
|
|
12060
|
+
this.valueControl.removeValidators = ((validators) => {
|
|
12061
|
+
origRemoveValidators(validators);
|
|
12062
|
+
this.syncRequiredValidator();
|
|
12063
|
+
});
|
|
12064
|
+
const origSetValidators = this.valueControl.setValidators.bind(this.valueControl);
|
|
12065
|
+
this.valueControl.setValidators = ((validators) => {
|
|
12066
|
+
origSetValidators(validators);
|
|
12067
|
+
this.syncRequiredValidator();
|
|
12068
|
+
});
|
|
12069
|
+
const origClearValidators = this.valueControl.clearValidators.bind(this.valueControl);
|
|
12070
|
+
this.valueControl.clearValidators = (() => {
|
|
12071
|
+
origClearValidators();
|
|
12072
|
+
this.syncRequiredValidator();
|
|
12073
|
+
});
|
|
12037
12074
|
if (value) {
|
|
12038
12075
|
this.parsePhoneNumber(value);
|
|
12039
12076
|
}
|
|
@@ -12098,6 +12135,10 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12098
12135
|
}
|
|
12099
12136
|
}
|
|
12100
12137
|
/** @ignore */
|
|
12138
|
+
ngDoCheck() {
|
|
12139
|
+
this.syncRequiredValidator();
|
|
12140
|
+
}
|
|
12141
|
+
/** @ignore */
|
|
12101
12142
|
ngAfterViewInit() {
|
|
12102
12143
|
super.ngAfterViewInit();
|
|
12103
12144
|
const width = this.wrapperRef?.nativeElement.offsetWidth;
|
|
@@ -12119,6 +12160,10 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12119
12160
|
}
|
|
12120
12161
|
/** @ignore */
|
|
12121
12162
|
canShowError() {
|
|
12163
|
+
if (!this.showValidationError)
|
|
12164
|
+
return false;
|
|
12165
|
+
if (this.hasOnlyStaleRequiredError(this.inputControl))
|
|
12166
|
+
return false;
|
|
12122
12167
|
return !!this.inputControl.errors && (this.inputControl.touched || this.immediateValidation);
|
|
12123
12168
|
}
|
|
12124
12169
|
/** @ignore */
|
|
@@ -12151,12 +12196,25 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12151
12196
|
return `${this.genericError} (${firstErrorKey})`;
|
|
12152
12197
|
}
|
|
12153
12198
|
}
|
|
12199
|
+
/** @ignore */
|
|
12200
|
+
syncRequiredValidator() {
|
|
12201
|
+
const isRequired = this.hasRequiredValidatorCheck(this.valueControl);
|
|
12202
|
+
const inputHasRequired = this.inputControl.hasValidator(Validators.required);
|
|
12203
|
+
if (isRequired && !inputHasRequired) {
|
|
12204
|
+
this.inputControl.addValidators(Validators.required);
|
|
12205
|
+
this.inputControl.updateValueAndValidity({ emitEvent: false });
|
|
12206
|
+
}
|
|
12207
|
+
else if (!isRequired && inputHasRequired) {
|
|
12208
|
+
this.inputControl.removeValidators(Validators.required);
|
|
12209
|
+
this.inputControl.updateValueAndValidity({ emitEvent: false });
|
|
12210
|
+
}
|
|
12211
|
+
}
|
|
12154
12212
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12155
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError &&
|
|
12213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError && valueControl.invalid && valueControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: '100%' }\"\n >\n <ads-input\n [control]=\"inputControl\"\n [mask]=\"phoneMask\"\n [id]=\"id\"\n [width]=\"'100%'\"\n [placeholder]=\"placeholder\"\n [label]=\"label\"\n [showClearButton]=\"showClearButton\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showValidationError]=\"showValidationError\"\n [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n [immediateValidation]=\"immediateValidation\"\n [dropSpecialCharacters]=\"true\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [onBlur]=\"onInputBlur\"\n />\n </div>\n\n </div>\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</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n <div class=\"flag-option\">\n <div>\n <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n <span>{{option.name}}</span>\n </div>\n <span class=\"code\">{{option.code}}</span>\n </div>\n</ng-template>\n\n<ng-template #triggerTemplate let-option=\"option\">\n <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".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", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\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: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
12156
12214
|
}
|
|
12157
12215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, decorators: [{
|
|
12158
12216
|
type: Component,
|
|
12159
|
-
args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError &&
|
|
12217
|
+
args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError && valueControl.invalid && valueControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: '100%' }\"\n >\n <ads-input\n [control]=\"inputControl\"\n [mask]=\"phoneMask\"\n [id]=\"id\"\n [width]=\"'100%'\"\n [placeholder]=\"placeholder\"\n [label]=\"label\"\n [showClearButton]=\"showClearButton\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showValidationError]=\"showValidationError\"\n [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n [immediateValidation]=\"immediateValidation\"\n [dropSpecialCharacters]=\"true\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [onBlur]=\"onInputBlur\"\n />\n </div>\n\n </div>\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</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n <div class=\"flag-option\">\n <div>\n <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n <span>{{option.name}}</span>\n </div>\n <span class=\"code\">{{option.code}}</span>\n </div>\n</ng-template>\n\n<ng-template #triggerTemplate let-option=\"option\">\n <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".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", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"] }]
|
|
12160
12218
|
}], ctorParameters: () => [], propDecorators: { dropdownId: [{
|
|
12161
12219
|
type: Input
|
|
12162
12220
|
}], selectedCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountry", required: false }] }], closeOnOutOfView: [{
|