65 lines
2.8 KiB
HTML
65 lines
2.8 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2025 The Thingsboard Authors
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
|
|
-->
|
|
<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover w-full flex-1" subscriptSizing="dynamic"
|
|
(click)="openConvertSettingsPopup($event)">
|
|
<input matInput #unitInput [formControl]="unitsFormControl"
|
|
placeholder="{{ 'widget-config.set' | translate }}"
|
|
[class.!pointer-events-none]="disabled"
|
|
(focusin)="onFocus()"
|
|
[matAutocomplete]="unitsAutocomplete"
|
|
[matAutocompleteDisabled]="supportsUnitConversion">
|
|
<button *ngIf="unitsFormControl.value && !disabled && unitsFormControl.valid"
|
|
type="button"
|
|
class="tb-icon-24 mr-2"
|
|
[class.mr-2]="!supportsUnitConversion || !isUnitMapping"
|
|
matSuffix mat-icon-button aria-label="Clear"
|
|
(click)="clear($event)">
|
|
<mat-icon class="material-icons">close</mat-icon>
|
|
</button>
|
|
<mat-icon matSuffix
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltip]="'widget-config.units-required' | translate"
|
|
*ngIf="unitsFormControl.hasError('required')" class="material-icons tb-suffix-show-always tb-error">
|
|
warning
|
|
</mat-icon>
|
|
<tb-icon matSuffix
|
|
[color]="disabled ? null : 'primary'"
|
|
matTooltipPosition="above"
|
|
[matTooltip]="'unit.convert.set-units-conversion-settings' | translate"
|
|
*ngIf="supportsUnitConversion && isUnitMapping" class="material-icons tb-suffix-show-always mr-2 !p-0">
|
|
mdi:swap-vertical-circle-outline
|
|
</tb-icon>
|
|
<mat-autocomplete
|
|
#unitsAutocomplete="matAutocomplete"
|
|
class="tb-autocomplete tb-unit-input-autocomplete"
|
|
panelWidth="fit-content"
|
|
[displayWith]="displayUnitFn.bind(this)">
|
|
@for (group of filteredUnits$ | async; track group[0]) {
|
|
<mat-optgroup [label]="'unit.measures.' + group[0] | translate">
|
|
@for(unit of group[1]; track unit.abbr) {
|
|
<mat-option [value]="unit">
|
|
<span class="tb-unit-name flex-1" [innerHTML]="unit.name | highlight:searchText:true:'ig'"></span>
|
|
<span class="tb-unit-symbol" [innerHTML]="unit.abbr | highlight:searchText:true:'ig'"></span>
|
|
</mat-option>
|
|
}
|
|
</mat-optgroup>
|
|
}
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|