i-tech-shared-components 1.4.66 → 1.4.67-alpha.1772084704366
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.
|
@@ -731,6 +731,7 @@ class AutocompleteSelectComponent {
|
|
|
731
731
|
}
|
|
732
732
|
constructor(inputService) {
|
|
733
733
|
this.inputService = inputService;
|
|
734
|
+
this.hideErrorText = false;
|
|
734
735
|
this._lastConfigSignature = '';
|
|
735
736
|
this.selectionChange = new EventEmitter();
|
|
736
737
|
this.multiSelectSelectionChange = new EventEmitter();
|
|
@@ -1230,7 +1231,7 @@ class AutocompleteSelectComponent {
|
|
|
1230
1231
|
searchInput?.nativeElement?.focus();
|
|
1231
1232
|
}
|
|
1232
1233
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", defaultValueForFirst: "defaultValueForFirst", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled,\n 'select-with-prefix': selectConfig['iconPrefixSvg'] || selectConfig['iconPrefix']\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl, 'readonly-color': isDisabled}\"\n #searchInput\n [disabled]=\"isDisabled\"\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length || !showingValue) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value || showingValue\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clearSelectedValue($event)\"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}.new-mat-autocomplete.without-label .custom-placeholder{top:12px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "borderColor", "iconSvg", "iconName", "tooltip", "disabled", "testId", "fillColor"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.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: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
1234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", hideErrorText: "hideErrorText", defaultValueForFirst: "defaultValueForFirst", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled,\n 'select-with-prefix': selectConfig['iconPrefixSvg'] || selectConfig['iconPrefix']\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl, 'readonly-color': isDisabled}\"\n #searchInput\n [disabled]=\"isDisabled\"\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length || !showingValue) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value || showingValue\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clearSelectedValue($event)\"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!hideErrorText && !!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}.new-mat-autocomplete.without-label .custom-placeholder{top:12px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "borderColor", "iconSvg", "iconName", "tooltip", "disabled", "testId", "fillColor"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.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: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
1234
1235
|
}
|
|
1235
1236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
|
|
1236
1237
|
type: Component,
|
|
@@ -1249,7 +1250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1249
1250
|
GenerateErrorMessagesPipe,
|
|
1250
1251
|
ClearValueComponent,
|
|
1251
1252
|
MatFormFieldModule
|
|
1252
|
-
], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled,\n 'select-with-prefix': selectConfig['iconPrefixSvg'] || selectConfig['iconPrefix']\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl, 'readonly-color': isDisabled}\"\n #searchInput\n [disabled]=\"isDisabled\"\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length || !showingValue) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value || showingValue\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clearSelectedValue($event)\"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}.new-mat-autocomplete.without-label .custom-placeholder{top:12px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"] }]
|
|
1253
|
+
], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled,\n 'select-with-prefix': selectConfig['iconPrefixSvg'] || selectConfig['iconPrefix']\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl, 'readonly-color': isDisabled}\"\n #searchInput\n [disabled]=\"isDisabled\"\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length || !showingValue) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value || showingValue\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clearSelectedValue($event)\"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!hideErrorText && !!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}.new-mat-autocomplete.without-label .custom-placeholder{top:12px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"] }]
|
|
1253
1254
|
}], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
|
|
1254
1255
|
type: ViewChild,
|
|
1255
1256
|
args: ['matSelect']
|
|
@@ -1260,6 +1261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1260
1261
|
type: Input
|
|
1261
1262
|
}], submitValue: [{
|
|
1262
1263
|
type: Input
|
|
1264
|
+
}], hideErrorText: [{
|
|
1265
|
+
type: Input
|
|
1263
1266
|
}], defaultValueForFirst: [{
|
|
1264
1267
|
type: Input
|
|
1265
1268
|
}], configs: [{
|
|
@@ -3298,7 +3301,7 @@ class TimeInputComponent {
|
|
|
3298
3301
|
}
|
|
3299
3302
|
}
|
|
3300
3303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, deps: [{ token: InputService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TimeInputComponent, isStandalone: true, selector: "i-tech-time-input", inputs: { submit: "submit", label: "label", required: "required", mode: "mode", readOnly: "readOnly", hideErrorText: "hideErrorText" }, outputs: { selectionChanges: "selectionChanges" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "timeFieldEl", first: true, predicate: ["timeField"], descendants: true }, { propertyName: "hourColEl", first: true, predicate: ["hourCol"], descendants: true }, { propertyName: "minuteColEl", first: true, predicate: ["minuteCol"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n <!-- Label row -->\n <div *ngIf=\"label\" class=\"time-input__label-row\">\n <span class=\"time-input__label\">{{ label | translate }}</span>\n <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n </div>\n\n <!-- Field row -->\n <div class=\"time-field\"\n #timeField\n tabindex=\"0\"\n [class.has-value]=\"hasValue\"\n [class.focused]=\"activeSegment !== null || isPickerOpen\"\n [class.disabled]=\"isDisabled\"\n [class.error]=\"hasError\"\n [class.open]=\"isPickerOpen\"\n (keydown)=\"onKeyDown($event)\"\n >\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'hours'\"\n (click)=\"activateSegment('hours', $event)\"\n >{{ hours }}</span>\n\n <span class=\"sep\">:</span>\n\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'minutes'\"\n (click)=\"activateSegment('minutes', $event)\"\n >{{ minutes }}</span>\n\n <span *ngIf=\"mode === '12h'\"\n class=\"segment segment--ampm\"\n [class.active]=\"activeSegment === 'ampm'\"\n (click)=\"activateSegment('ampm', $event)\"\n >{{ amPm }}</span>\n\n <!-- Clock icon button -->\n <button class=\"clock-btn\"\n type=\"button\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (click)=\"togglePicker($event)\"\n >\n <mat-icon>schedule</mat-icon>\n </button>\n </div>\n\n <!-- Picker panel -->\n <div *ngIf=\"isPickerOpen\" class=\"picker-panel\">\n <div class=\"picker-columns\">\n\n <!-- Hours column -->\n <div class=\"picker-col\" #hourCol>\n <div *ngFor=\"let h of hourOptions\"\n class=\"picker-item\"\n [class.selected]=\"h === selectedHourValue\"\n (click)=\"selectHour(h)\"\n >{{ h | number:'2.0-0' }}</div>\n </div>\n\n <!-- Minutes column -->\n <div class=\"picker-col\" #minuteCol>\n <div *ngFor=\"let m of minuteOptions\"\n class=\"picker-item\"\n [class.selected]=\"m === selectedMinuteValue\"\n (click)=\"selectMinute(m)\"\n >{{ m | number:'2.0-0' }}</div>\n </div>\n\n <!-- AM/PM row (12h mode only) -->\n <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n </div>\n </div>\n </div>\n\n <!-- Error -->\n <div *ngIf=\"hasError && !hideErrorText\" class=\"error-text\">\n {{ ngControl.control | generateErrorMessages : (label || '') }}\n </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color
|
|
3304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TimeInputComponent, isStandalone: true, selector: "i-tech-time-input", inputs: { submit: "submit", label: "label", required: "required", mode: "mode", readOnly: "readOnly", hideErrorText: "hideErrorText" }, outputs: { selectionChanges: "selectionChanges" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "timeFieldEl", first: true, predicate: ["timeField"], descendants: true }, { propertyName: "hourColEl", first: true, predicate: ["hourCol"], descendants: true }, { propertyName: "minuteColEl", first: true, predicate: ["minuteCol"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n <!-- Label row -->\n <div *ngIf=\"label\" class=\"time-input__label-row\">\n <span class=\"time-input__label\">{{ label | translate }}</span>\n <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n </div>\n\n <!-- Field row -->\n <div class=\"time-field\"\n #timeField\n tabindex=\"0\"\n [class.has-value]=\"hasValue\"\n [class.focused]=\"activeSegment !== null || isPickerOpen\"\n [class.disabled]=\"isDisabled\"\n [class.error]=\"hasError\"\n [class.open]=\"isPickerOpen\"\n (keydown)=\"onKeyDown($event)\"\n >\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'hours'\"\n (click)=\"activateSegment('hours', $event)\"\n >{{ hours }}</span>\n\n <span class=\"sep\">:</span>\n\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'minutes'\"\n (click)=\"activateSegment('minutes', $event)\"\n >{{ minutes }}</span>\n\n <span *ngIf=\"mode === '12h'\"\n class=\"segment segment--ampm\"\n [class.active]=\"activeSegment === 'ampm'\"\n (click)=\"activateSegment('ampm', $event)\"\n >{{ amPm }}</span>\n\n <!-- Clock icon button -->\n <button class=\"clock-btn\"\n type=\"button\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (click)=\"togglePicker($event)\"\n >\n <mat-icon>schedule</mat-icon>\n </button>\n </div>\n\n <!-- Picker panel -->\n <div *ngIf=\"isPickerOpen\" class=\"picker-panel\">\n <div class=\"picker-columns\">\n\n <!-- Hours column -->\n <div class=\"picker-col\" #hourCol>\n <div *ngFor=\"let h of hourOptions\"\n class=\"picker-item\"\n [class.selected]=\"h === selectedHourValue\"\n (click)=\"selectHour(h)\"\n >{{ h | number:'2.0-0' }}</div>\n </div>\n\n <!-- Minutes column -->\n <div class=\"picker-col\" #minuteCol>\n <div *ngFor=\"let m of minuteOptions\"\n class=\"picker-item\"\n [class.selected]=\"m === selectedMinuteValue\"\n (click)=\"selectMinute(m)\"\n >{{ m | number:'2.0-0' }}</div>\n </div>\n\n <!-- AM/PM row (12h mode only) -->\n <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n </div>\n </div>\n </div>\n\n <!-- Error -->\n <div *ngIf=\"hasError && !hideErrorText\" class=\"error-text\">\n {{ ngControl.control | generateErrorMessages : (label || '') }}\n </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color:#c11a39;font-size:14px}.time-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:4px;height:34px;padding:3px 5px 3px 8px;cursor:pointer;box-sizing:border-box;outline:none;background:var(--white-color, #fff)}.time-field:hover:not(.disabled):not(:focus):not(.error){border-color:#9fa6b1}.time-field.focused{border-color:#0060df;border-width:2px;padding:2px 4px 2px 7px}.time-field.error{border-color:#c11a39}.time-field.disabled{background-color:var(--disabled-input-background, #f5f5f5);cursor:default;pointer-events:none}.segment{min-width:18px;text-align:center;border-radius:2px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.segment.active{background:#0060df;color:#fff;border-radius:2px}.segment--ampm{min-width:28px}.time-field:not(.has-value) .segment{color:var(--neutral30, #424954)}.sep{font-size:13px;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.time-field:not(.has-value) .sep{color:var(--neutral30, #424954)}.clock-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;margin-left:auto;outline:none;color:var(--neutral30, #424954)}.clock-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.clock-btn:disabled{opacity:.4;cursor:default}.picker-panel{position:absolute;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:150px;top:calc(100% + 4px);left:0}.picker-columns{display:flex;align-items:flex-start;gap:4px;padding:8px 4px 8px 8px}.picker-col{height:160px;overflow-y:auto;width:50px;scrollbar-width:none}.picker-item{padding:6px 8px;text-align:center;cursor:pointer;border-radius:4px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-item:hover{background:var(--secondary95, #f0f4ff)}.picker-item.selected{background:#0060df;color:#fff;font-weight:600}.picker-ampm{display:flex;flex-direction:column;justify-content:center;gap:4px}.picker-ampm button{padding:4px 16px;border:1px solid var(--neutral80, #d7d9de);border-radius:4px;background:transparent;cursor:pointer;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-ampm button:hover{background:var(--secondary95, #f0f4ff)}.picker-ampm button.active{background:#0060df;color:#fff;border-color:#0060df;font-weight:600}.error-text{font-size:10px;color:#c11a39;padding-top:2px;line-height:14px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }] }); }
|
|
3302
3305
|
}
|
|
3303
3306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, decorators: [{
|
|
3304
3307
|
type: Component,
|
|
@@ -3306,7 +3309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3306
3309
|
NgIf, NgFor, NgClass, DecimalPipe,
|
|
3307
3310
|
ReactiveFormsModule, TranslateModule,
|
|
3308
3311
|
MatIcon, GenerateErrorMessagesPipe
|
|
3309
|
-
], template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n <!-- Label row -->\n <div *ngIf=\"label\" class=\"time-input__label-row\">\n <span class=\"time-input__label\">{{ label | translate }}</span>\n <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n </div>\n\n <!-- Field row -->\n <div class=\"time-field\"\n #timeField\n tabindex=\"0\"\n [class.has-value]=\"hasValue\"\n [class.focused]=\"activeSegment !== null || isPickerOpen\"\n [class.disabled]=\"isDisabled\"\n [class.error]=\"hasError\"\n [class.open]=\"isPickerOpen\"\n (keydown)=\"onKeyDown($event)\"\n >\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'hours'\"\n (click)=\"activateSegment('hours', $event)\"\n >{{ hours }}</span>\n\n <span class=\"sep\">:</span>\n\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'minutes'\"\n (click)=\"activateSegment('minutes', $event)\"\n >{{ minutes }}</span>\n\n <span *ngIf=\"mode === '12h'\"\n class=\"segment segment--ampm\"\n [class.active]=\"activeSegment === 'ampm'\"\n (click)=\"activateSegment('ampm', $event)\"\n >{{ amPm }}</span>\n\n <!-- Clock icon button -->\n <button class=\"clock-btn\"\n type=\"button\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (click)=\"togglePicker($event)\"\n >\n <mat-icon>schedule</mat-icon>\n </button>\n </div>\n\n <!-- Picker panel -->\n <div *ngIf=\"isPickerOpen\" class=\"picker-panel\">\n <div class=\"picker-columns\">\n\n <!-- Hours column -->\n <div class=\"picker-col\" #hourCol>\n <div *ngFor=\"let h of hourOptions\"\n class=\"picker-item\"\n [class.selected]=\"h === selectedHourValue\"\n (click)=\"selectHour(h)\"\n >{{ h | number:'2.0-0' }}</div>\n </div>\n\n <!-- Minutes column -->\n <div class=\"picker-col\" #minuteCol>\n <div *ngFor=\"let m of minuteOptions\"\n class=\"picker-item\"\n [class.selected]=\"m === selectedMinuteValue\"\n (click)=\"selectMinute(m)\"\n >{{ m | number:'2.0-0' }}</div>\n </div>\n\n <!-- AM/PM row (12h mode only) -->\n <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n </div>\n </div>\n </div>\n\n <!-- Error -->\n <div *ngIf=\"hasError && !hideErrorText\" class=\"error-text\">\n {{ ngControl.control | generateErrorMessages : (label || '') }}\n </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color
|
|
3312
|
+
], template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n <!-- Label row -->\n <div *ngIf=\"label\" class=\"time-input__label-row\">\n <span class=\"time-input__label\">{{ label | translate }}</span>\n <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n </div>\n\n <!-- Field row -->\n <div class=\"time-field\"\n #timeField\n tabindex=\"0\"\n [class.has-value]=\"hasValue\"\n [class.focused]=\"activeSegment !== null || isPickerOpen\"\n [class.disabled]=\"isDisabled\"\n [class.error]=\"hasError\"\n [class.open]=\"isPickerOpen\"\n (keydown)=\"onKeyDown($event)\"\n >\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'hours'\"\n (click)=\"activateSegment('hours', $event)\"\n >{{ hours }}</span>\n\n <span class=\"sep\">:</span>\n\n <span class=\"segment\"\n [class.active]=\"activeSegment === 'minutes'\"\n (click)=\"activateSegment('minutes', $event)\"\n >{{ minutes }}</span>\n\n <span *ngIf=\"mode === '12h'\"\n class=\"segment segment--ampm\"\n [class.active]=\"activeSegment === 'ampm'\"\n (click)=\"activateSegment('ampm', $event)\"\n >{{ amPm }}</span>\n\n <!-- Clock icon button -->\n <button class=\"clock-btn\"\n type=\"button\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (click)=\"togglePicker($event)\"\n >\n <mat-icon>schedule</mat-icon>\n </button>\n </div>\n\n <!-- Picker panel -->\n <div *ngIf=\"isPickerOpen\" class=\"picker-panel\">\n <div class=\"picker-columns\">\n\n <!-- Hours column -->\n <div class=\"picker-col\" #hourCol>\n <div *ngFor=\"let h of hourOptions\"\n class=\"picker-item\"\n [class.selected]=\"h === selectedHourValue\"\n (click)=\"selectHour(h)\"\n >{{ h | number:'2.0-0' }}</div>\n </div>\n\n <!-- Minutes column -->\n <div class=\"picker-col\" #minuteCol>\n <div *ngFor=\"let m of minuteOptions\"\n class=\"picker-item\"\n [class.selected]=\"m === selectedMinuteValue\"\n (click)=\"selectMinute(m)\"\n >{{ m | number:'2.0-0' }}</div>\n </div>\n\n <!-- AM/PM row (12h mode only) -->\n <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n </div>\n </div>\n </div>\n\n <!-- Error -->\n <div *ngIf=\"hasError && !hideErrorText\" class=\"error-text\">\n {{ ngControl.control | generateErrorMessages : (label || '') }}\n </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color:#c11a39;font-size:14px}.time-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:4px;height:34px;padding:3px 5px 3px 8px;cursor:pointer;box-sizing:border-box;outline:none;background:var(--white-color, #fff)}.time-field:hover:not(.disabled):not(:focus):not(.error){border-color:#9fa6b1}.time-field.focused{border-color:#0060df;border-width:2px;padding:2px 4px 2px 7px}.time-field.error{border-color:#c11a39}.time-field.disabled{background-color:var(--disabled-input-background, #f5f5f5);cursor:default;pointer-events:none}.segment{min-width:18px;text-align:center;border-radius:2px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.segment.active{background:#0060df;color:#fff;border-radius:2px}.segment--ampm{min-width:28px}.time-field:not(.has-value) .segment{color:var(--neutral30, #424954)}.sep{font-size:13px;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.time-field:not(.has-value) .sep{color:var(--neutral30, #424954)}.clock-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;margin-left:auto;outline:none;color:var(--neutral30, #424954)}.clock-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.clock-btn:disabled{opacity:.4;cursor:default}.picker-panel{position:absolute;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:150px;top:calc(100% + 4px);left:0}.picker-columns{display:flex;align-items:flex-start;gap:4px;padding:8px 4px 8px 8px}.picker-col{height:160px;overflow-y:auto;width:50px;scrollbar-width:none}.picker-item{padding:6px 8px;text-align:center;cursor:pointer;border-radius:4px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-item:hover{background:var(--secondary95, #f0f4ff)}.picker-item.selected{background:#0060df;color:#fff;font-weight:600}.picker-ampm{display:flex;flex-direction:column;justify-content:center;gap:4px}.picker-ampm button{padding:4px 16px;border:1px solid var(--neutral80, #d7d9de);border-radius:4px;background:transparent;cursor:pointer;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-ampm button:hover{background:var(--secondary95, #f0f4ff)}.picker-ampm button.active{background:#0060df;color:#fff;border-color:#0060df;font-weight:600}.error-text{font-size:10px;color:#c11a39;padding-top:2px;line-height:14px}\n"] }]
|
|
3310
3313
|
}], ctorParameters: () => [{ type: InputService }, { type: i0.ElementRef }], propDecorators: { submit: [{
|
|
3311
3314
|
type: Input
|
|
3312
3315
|
}], label: [{
|