* Copyright (c) 2024-2026 Huawei Device Co., Ltd.
* 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.
*/
if (!('finalizeConstruction' in ViewPU.prototype)) {
Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {});
}
const ColorMetrics = requireNapi('arkui.node').ColorMetrics;
const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
const LengthUnit = requireNapi('arkui.node').LengthUnit;
const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
const mediaquery = requireNapi('mediaquery');
const deviceInfo = requireNapi('deviceInfo');
const uiMaterial = requireNapi('arkui.uiMaterial');
export var ChipSize;
(function (ChipSize) {
ChipSize['NORMAL'] = 'NORMAL';
ChipSize['SMALL'] = 'SMALL';
})(ChipSize || (ChipSize = {}));
var IconType;
(function (IconType) {
IconType['PREFIX_ICON'] = 'PREFIXICON';
IconType['SUFFIX_ICON'] = 'SUFFIXICON';
IconType['PREFIX_SYMBOL'] = 'PREFIXSYMBOL';
IconType['SUFFIX_SYMBOL'] = 'SUFFIXSYMBOL';
})(IconType || (IconType = {}));
var BreakPointsType;
(function (BreakPointsType) {
BreakPointsType['SM'] = 'SM';
BreakPointsType['MD'] = 'MD';
BreakPointsType['LG'] = 'LG';
})(BreakPointsType || (BreakPointsType = {}));
export var AccessibilitySelectedType;
(function (AccessibilitySelectedType) {
AccessibilitySelectedType[(AccessibilitySelectedType['CLICKED'] = 0)] = 'CLICKED';
AccessibilitySelectedType[(AccessibilitySelectedType['CHECKED'] = 1)] = 'CHECKED';
AccessibilitySelectedType[(AccessibilitySelectedType['SELECTED'] = 2)] = 'SELECTED';
})(AccessibilitySelectedType || (AccessibilitySelectedType = {}));
const RESOURCE_TYPE_STRING = 10003;
const RESOURCE_TYPE_FLOAT = 10002;
const RESOURCE_TYPE_INTEGER = 10007;
const HOT_SPOT_MIN_HEIGHT = 32;
class LengthMetricsUtils {
constructor() {}
static getInstance() {
if (!LengthMetricsUtils.instance) {
LengthMetricsUtils.instance = new LengthMetricsUtils();
}
return LengthMetricsUtils.instance;
}
isNaturalNumber(metrics) {
return metrics.value >= 0;
}
}
class LengthMetricsCache {
static get(key, defaultValue) {
if (LengthMetricsCache._cache.has(key)) {
return LengthMetricsCache._cache.get(key);
}
try {
const res = {
id: -1,
type: 10002,
params: [key],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
};
const metrics = LengthMetrics.resource(res);
LengthMetricsCache._cache.set(key, metrics);
return metrics;
} catch (error) {
return defaultValue;
}
}
}
LengthMetricsCache._cache = new Map();
export function Chip(options, parent = null) {
const __options__ = options;
{
(parent ? parent : this).observeComponentCreation2(
(elmtId, isInitialRender, options = __options__) => {
if (isInitialRender) {
let componentCall = new ChipComponent(
parent ? parent : this,
{
chipSize: options.size,
prefixIcon: options.prefixIcon,
prefixSymbol: options.prefixSymbol,
label: options.label,
suffixIcon: options.suffixIcon,
suffixSymbol: options.suffixSymbol,
suffixSymbolOptions: options.suffixSymbolOptions,
allowClose: options.allowClose,
closeOptions: options.closeOptions,
chipEnabled: options.enabled,
chipActivated: options.activated,
chipNodeBackgroundColor: options.backgroundColor,
chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
backgroundSystemMaterial: options.backgroundSystemMaterial,
activatedBackgroundSystemMaterial: options.activatedBackgroundSystemMaterial,
chipNodeRadius: options.borderRadius,
chipDirection: options.direction,
chipAccessibilitySelectedType: options.accessibilitySelectedType,
chipAccessibilityDescription: options.accessibilityDescription,
chipAccessibilityLevel: options.accessibilityLevel,
onClose: options.onClose,
onClicked: options.onClicked,
maxFontScale: options.maxFontScale,
minFontScale: options.minFontScale,
chipPadding: options.padding,
chipFontSize: options.fontSize,
},
undefined,
elmtId,
() => {},
{ page: 'library/src/main/ets/components/Chip.ets', line: 286, col: 3 }
);
ViewPU.create(componentCall);
let paramsLambda = () => {
return {
chipSize: options.size,
prefixIcon: options.prefixIcon,
prefixSymbol: options.prefixSymbol,
label: options.label,
suffixIcon: options.suffixIcon,
suffixSymbol: options.suffixSymbol,
suffixSymbolOptions: options.suffixSymbolOptions,
allowClose: options.allowClose,
closeOptions: options.closeOptions,
chipEnabled: options.enabled,
chipActivated: options.activated,
chipNodeBackgroundColor: options.backgroundColor,
chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
backgroundSystemMaterial: options.backgroundSystemMaterial,
activatedBackgroundSystemMaterial: options.activatedBackgroundSystemMaterial,
chipNodeRadius: options.borderRadius,
chipDirection: options.direction,
chipAccessibilitySelectedType: options.accessibilitySelectedType,
chipAccessibilityDescription: options.accessibilityDescription,
chipAccessibilityLevel: options.accessibilityLevel,
onClose: options.onClose,
onClicked: options.onClicked,
maxFontScale: options.maxFontScale,
minFontScale: options.minFontScale,
chipPadding: options.padding,
chipFontSize: options.fontSize,
};
};
componentCall.paramsGenerator_ = paramsLambda;
} else {
(parent ? parent : this).updateStateVarsOfChildByElmtId(elmtId, {
chipSize: options.size,
prefixIcon: options.prefixIcon,
prefixSymbol: options.prefixSymbol,
label: options.label,
suffixIcon: options.suffixIcon,
suffixSymbol: options.suffixSymbol,
suffixSymbolOptions: options.suffixSymbolOptions,
allowClose: options.allowClose,
closeOptions: options.closeOptions,
chipEnabled: options.enabled,
chipActivated: options.activated,
chipNodeBackgroundColor: options.backgroundColor,
chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
backgroundSystemMaterial: options.backgroundSystemMaterial,
activatedBackgroundSystemMaterial: options.activatedBackgroundSystemMaterial,
chipNodeRadius: options.borderRadius,
chipDirection: options.direction,
chipAccessibilitySelectedType: options.accessibilitySelectedType,
chipAccessibilityDescription: options.accessibilityDescription,
chipAccessibilityLevel: options.accessibilityLevel,
maxFontScale: options.maxFontScale,
minFontScale: options.minFontScale,
chipPadding: options.padding,
chipFontSize: options.fontSize,
});
}
},
{ name: 'ChipComponent' }
);
}
}
export class ChipComponent extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
super(parent, __localStorage, elmtId, extraInfo);
if (typeof paramsLambda === 'function') {
this.paramsGenerator_ = paramsLambda;
}
this.theme = {
prefixIcon: {
normalSize: {
width: {
id: 125834625,
type: 10002,
params: ['sys.float.chip_normal_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
height: {
id: 125834625,
type: 10002,
params: ['sys.float.chip_normal_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
smallSize: {
width: {
id: 125834626,
type: 10002,
params: ['sys.float.chip_small_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
height: {
id: 125834626,
type: 10002,
params: ['sys.float.chip_small_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
fillColor: {
id: 125834645,
type: 10001,
params: ['sys.color.chip_usually_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedFillColor: {
id: 125834646,
type: 10001,
params: ['sys.color.chip_active_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusFillColor: {
id: 125834647,
type: 10001,
params: ['sys.color.chip_icon_focus_fill'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusActivatedColor: {
id: 125834648,
type: 10001,
params: ['sys.color.chip_icon_activated_focus_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
label: {
normalFontSize: {
id: 125834629,
type: 10002,
params: ['sys.float.chip_normal_font_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
smallFontSize: {
id: 125834630,
type: 10002,
params: ['sys.float.chip_small_font_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
adaptiveItemFontSize: {
id: 125830974,
type: 10002,
params: ['sys.float.Caption_M'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusFontColor: {
id: 125834640,
type: 10001,
params: ['sys.color.chip_focus_text'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusActiveFontColor: {
id: 125834649,
type: 10001,
params: ['sys.color.chip_activated_focus_font_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
fontColor: {
id: 125834643,
type: 10001,
params: ['sys.color.chip_font_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedFontColor: {
id: 125834636,
type: 10001,
params: ['sys.color.chip_activated_fontcolor'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
fontFamily: 'HarmonyOS Sans',
fontWeight: {
id: 125834631,
type: 10002,
params: ['sys.float.chip_text_font_weight'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedFontWeight: {
id: 125835720,
type: 10002,
params: ['sys.float.chip_activated_text_font_weight'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
normalMargin: {
left: 6,
right: 6,
top: 0,
bottom: 0,
},
smallMargin: {
left: 4,
right: 4,
top: 0,
bottom: 0,
},
defaultFontSize: 14,
localizedNormalMargin: {
start: LengthMetricsCache.get('sys.float.chip_normal_text_margin', LengthMetrics.vp(6)),
end: LengthMetricsCache.get('sys.float.chip_normal_text_margin', LengthMetrics.vp(6)),
top: LengthMetrics.vp(0),
bottom: LengthMetrics.vp(0),
},
localizedSmallMargin: {
start: LengthMetricsCache.get('sys.float.chip_small_text_margin', LengthMetrics.vp(4)),
end: LengthMetricsCache.get('sys.float.chip_small_text_margin', LengthMetrics.vp(4)),
top: LengthMetrics.vp(0),
bottom: LengthMetrics.vp(0),
},
},
suffixIcon: {
normalSize: {
width: {
id: 125834625,
type: 10002,
params: ['sys.float.chip_normal_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
height: {
id: 125834625,
type: 10002,
params: ['sys.float.chip_normal_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
smallSize: {
width: {
id: 125834626,
type: 10002,
params: ['sys.float.chip_small_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
height: {
id: 125834626,
type: 10002,
params: ['sys.float.chip_small_icon_size'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
fillColor: {
id: 125834645,
type: 10001,
params: ['sys.color.chip_usually_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedFillColor: {
id: 125834646,
type: 10001,
params: ['sys.color.chip_active_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusFillColor: {
id: 125834647,
type: 10001,
params: ['sys.color.chip_icon_focus_fill'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusActivatedColor: {
id: 125834648,
type: 10001,
params: ['sys.color.chip_icon_activated_focus_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
defaultDeleteIcon: {
id: 125830347,
type: 20000,
params: ['sys.media.ohos_ic_public_cancel', 16, 16],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusable: false,
isShowMargin: {
id: 125834632,
type: 10002,
params: ['sys.float.chip_show_close_icon_margin'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
},
defaultSymbol: {
normalFontColor: [
{
id: 125834645,
type: 10001,
params: ['sys.color.chip_usually_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
],
activatedFontColor: [
{
id: 125834646,
type: 10001,
params: ['sys.color.chip_active_icon_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
],
normalSymbolFontSize: LengthMetricsCache.get('sys.float.chip_normal_icon_size', LengthMetrics.vp(16)).value,
smallSymbolFontSize: LengthMetricsCache.get('sys.float.chip_small_icon_size', LengthMetrics.vp(16)).value,
defaultEffect: -1,
},
chipNode: {
suitAgeScale: 1.75,
minLabelWidth: 12,
normalHeight: {
id: 125834619,
type: 10002,
params: ['sys.float.chip_normal_height'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
smallHeight: {
id: 125834620,
type: 10002,
params: ['sys.float.chip_small_height'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedNormalHeight: {
id: 125835715,
type: 10002,
params: ['sys.float.chip_activated_normal_height'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedSmallHeight: {
id: 125835716,
type: 10002,
params: ['sys.float.chip_activated_small_height'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
enabled: true,
activated: false,
backgroundColor: {
id: 125834642,
type: 10001,
params: ['sys.color.chip_background_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedBackgroundColor: {
id: 125834635,
type: 10001,
params: ['sys.color.chip_container_activated_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
backgroundSystemMaterial: new uiMaterial.ImmersiveMaterial({
style: uiMaterial.ImmersiveStyle.ULTRA_THIN,
}),
activatedBackgroundSystemMaterial: new uiMaterial.ImmersiveMaterial({
style: uiMaterial.ImmersiveStyle.ULTRA_THIN,
materialColor: {
id: 125831009,
type: 10001,
params: ['sys.color.comp_background_emphasize'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
}),
focusOutlineColor: {
id: 125829180,
type: 10001,
params: ['sys.color.ohos_id_color_focused_outline'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusOutlineMargin: 2,
borderColor: {
id: 125834633,
type: 10001,
params: ['sys.color.chip_border_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
defaultBorderWidth: {
id: 125834621,
type: 10002,
params: ['sys.float.chip_border_width'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedBorderColor: {
id: 125834634,
type: 10001,
params: ['sys.color.chip_activated_border_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
normalBorderRadius: {
id: 125834241,
type: 10002,
params: ['sys.float.chip_border_radius_normal'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
smallBorderRadius: {
id: 125834242,
type: 10002,
params: ['sys.float.chip_border_radius_small'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
activatedBorderWidth: {
id: 125835717,
type: 10002,
params: ['sys.float.chip_activated_border_width'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
borderWidth: 2,
focusBtnScaleX: {
id: 125834624,
type: 10002,
params: ['sys.float.chip_focused_btn_scale'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusBtnScaleY: {
id: 125834624,
type: 10002,
params: ['sys.float.chip_focused_btn_scale'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
localizedNormalPadding: {
start: LengthMetricsCache.get('sys.float.chip_normal_text_padding', LengthMetrics.vp(16)),
end: LengthMetricsCache.get('sys.float.chip_normal_text_padding', LengthMetrics.vp(16)),
top: LengthMetrics.vp(4),
bottom: LengthMetrics.vp(4),
},
localizedSmallPadding: {
start: LengthMetricsCache.get('sys.float.chip_small_text_padding', LengthMetrics.vp(12)),
end: LengthMetricsCache.get('sys.float.chip_small_text_padding', LengthMetrics.vp(12)),
top: LengthMetrics.vp(4),
bottom: LengthMetrics.vp(4),
},
localizedActivatedNormalPadding: {
start: LengthMetricsCache.get('sys.float.chip_activated_normal_text_padding', LengthMetrics.vp(16)),
end: LengthMetricsCache.get('sys.float.chip_activated_normal_text_padding', LengthMetrics.vp(16)),
top: LengthMetrics.vp(4),
bottom: LengthMetrics.vp(4),
},
localizedActivatedSmallPadding: {
start: LengthMetricsCache.get('sys.float.chip_activated_small_text_padding', LengthMetrics.vp(12)),
end: LengthMetricsCache.get('sys.float.chip_activated_small_text_padding', LengthMetrics.vp(12)),
top: LengthMetrics.vp(4),
bottom: LengthMetrics.vp(4),
},
hoverBlendColor: {
id: 125834637,
type: 10001,
params: ['sys.color.chip_hover_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
pressedBlendColor: {
id: 125834644,
type: 10001,
params: ['sys.color.chip_press_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusBgColor: {
id: 125834638,
type: 10001,
params: ['sys.color.chip_focus_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
focusActivatedBgColor: {
id: 125834639,
type: 10001,
params: ['sys.color.chip_container_activated_focus_color'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
opacity: { normal: 1, hover: 0.95, pressed: 0.9 },
normalShadowStyle: {
id: 125834622,
type: 10002,
params: ['sys.float.chip_normal_shadow_style'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
smallShadowStyle: {
id: 125834623,
type: 10002,
params: ['sys.float.chip_small_shadow_style'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
breakPointConstraintWidth: {
breakPointMinWidth: 128,
breakPointSmMaxWidth: 156,
breakPointMdMaxWidth: 280,
breakPointLgMaxWidth: 400,
},
},
};
this.__chipSize = new SynchedPropertyObjectOneWayPU(params.chipSize, this, 'chipSize');
this.__allowClose = new SynchedPropertySimpleOneWayPU(params.allowClose, this, 'allowClose');
this.__closeOptions = new SynchedPropertyObjectOneWayPU(params.closeOptions, this, 'closeOptions');
this.__chipDirection = new SynchedPropertySimpleOneWayPU(params.chipDirection, this, 'chipDirection');
this.__prefixIcon = new SynchedPropertyObjectOneWayPU(params.prefixIcon, this, 'prefixIcon');
this.__prefixSymbol = new SynchedPropertyObjectOneWayPU(params.prefixSymbol, this, 'prefixSymbol');
this.__label = new SynchedPropertyObjectOneWayPU(params.label, this, 'label');
this.__suffixIcon = new SynchedPropertyObjectOneWayPU(params.suffixIcon, this, 'suffixIcon');
this.__suffixSymbol = new SynchedPropertyObjectOneWayPU(params.suffixSymbol, this, 'suffixSymbol');
this.__suffixSymbolOptions = new SynchedPropertyObjectOneWayPU(
params.suffixSymbolOptions,
this,
'suffixSymbolOptions'
);
this.__chipNodeBackgroundColor = new SynchedPropertyObjectOneWayPU(
params.chipNodeBackgroundColor,
this,
'chipNodeBackgroundColor'
);
this.__chipNodeActivatedBackgroundColor = new SynchedPropertyObjectOneWayPU(
params.chipNodeActivatedBackgroundColor,
this,
'chipNodeActivatedBackgroundColor'
);
this.__backgroundSystemMaterial = new SynchedPropertyObjectOneWayPU(
params.backgroundSystemMaterial,
this,
'backgroundSystemMaterial'
);
this.__activatedBackgroundSystemMaterial = new SynchedPropertyObjectOneWayPU(
params.activatedBackgroundSystemMaterial,
this,
'activatedBackgroundSystemMaterial'
);
this.__chipNodeRadius = new SynchedPropertyObjectOneWayPU(params.chipNodeRadius, this, 'chipNodeRadius');
this.__chipEnabled = new SynchedPropertySimpleOneWayPU(params.chipEnabled, this, 'chipEnabled');
this.__chipActivated = new SynchedPropertySimpleOneWayPU(params.chipActivated, this, 'chipActivated');
this.__chipAccessibilitySelectedType = new SynchedPropertySimpleOneWayPU(
params.chipAccessibilitySelectedType,
this,
'chipAccessibilitySelectedType'
);
this.__chipAccessibilityDescription = new SynchedPropertyObjectOneWayPU(
params.chipAccessibilityDescription,
this,
'chipAccessibilityDescription'
);
this.__chipAccessibilityLevel = new SynchedPropertySimpleOneWayPU(
params.chipAccessibilityLevel,
this,
'chipAccessibilityLevel'
);
this.__maxFontScale = new SynchedPropertyObjectOneWayPU(params.maxFontScale, this, 'maxFontScale');
this.__minFontScale = new SynchedPropertyObjectOneWayPU(params.minFontScale, this, 'minFontScale');
this.__chipPadding = new SynchedPropertyObjectOneWayPU(params.chipPadding, this, 'chipPadding');
this.__chipFontSize = new SynchedPropertyObjectOneWayPU(params.chipFontSize, this, 'chipFontSize');
this.__inGroup = this.initializeConsume('inGroup', 'inGroup', false);
this.__isChipExist = new ObservedPropertySimplePU(true, this, 'isChipExist');
this.__chipScale = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, 'chipScale');
this.__chipOpacity = new ObservedPropertySimplePU(1, this, 'chipOpacity');
this.__suffixSymbolHeight = new ObservedPropertySimplePU(0, this, 'suffixSymbolHeight');
this.__suffixSymbolWidth = new ObservedPropertySimplePU(0, this, 'suffixSymbolWidth');
this.__breakPoint = new ObservedPropertySimplePU(BreakPointsType.SM, this, 'breakPoint');
this.__fontSizeScale = new ObservedPropertySimplePU(1, this, 'fontSizeScale');
this.__useAdaptiveLineHeight = new ObservedPropertySimplePU(false, this, 'useAdaptiveLineHeight');
this.isSuffixIconFocusStyleCustomized = this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 0;
this.isSuffixIconFocusable = this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 1;
this.onClose = undefined;
this.onClicked = undefined;
this.__chipNodeInFocus = new ObservedPropertySimplePU(false, this, 'chipNodeInFocus');
this.smListener = mediaquery.matchMediaSync('(0vp<width) and (width<600vp)');
this.mdListener = mediaquery.matchMediaSync('(600vp<=width) and (width<840vp)');
this.lgListener = mediaquery.matchMediaSync('(840vp<=width)');
this.symbolEffect = new SymbolEffect();
this.environmentCallbackID = undefined;
this.environmentCallback = {
onConfigurationUpdated: configuration => {
this.fontSizeScale = configuration.fontSizeScale ?? 1;
this.updateLanguageLineHeight();
},
onMemoryLevel() {},
};
this.setInitiallyProvidedValue(params);
this.finalizeConstruction();
}
setInitiallyProvidedValue(params) {
if (params.theme !== undefined) {
this.theme = params.theme;
}
if (params.chipSize === undefined) {
this.__chipSize.set(ChipSize.NORMAL);
}
if (params.allowClose === undefined) {
this.__allowClose.set(undefined);
}
if (params.closeOptions === undefined) {
this.__closeOptions.set(undefined);
}
if (params.chipDirection === undefined) {
this.__chipDirection.set(Direction.Auto);
}
if (params.prefixIcon === undefined) {
this.__prefixIcon.set(undefined);
}
if (params.prefixSymbol === undefined) {
this.__prefixSymbol.set(undefined);
}
if (params.suffixIcon === undefined) {
this.__suffixIcon.set(undefined);
}
if (params.suffixSymbol === undefined) {
this.__suffixSymbol.set(undefined);
}
if (params.suffixSymbolOptions === undefined) {
this.__suffixSymbolOptions.set(undefined);
}
if (params.chipNodeBackgroundColor === undefined) {
this.__chipNodeBackgroundColor.set(undefined);
}
if (params.chipNodeActivatedBackgroundColor === undefined) {
this.__chipNodeActivatedBackgroundColor.set(undefined);
}
if (params.backgroundSystemMaterial === undefined) {
this.__backgroundSystemMaterial.set(undefined);
}
if (params.activatedBackgroundSystemMaterial === undefined) {
this.__activatedBackgroundSystemMaterial.set(undefined);
}
if (params.chipNodeRadius === undefined) {
this.__chipNodeRadius.set(undefined);
}
if (params.chipEnabled === undefined) {
this.__chipEnabled.set(true);
}
if (params.chipActivated === undefined) {
this.__chipActivated.set(undefined);
}
if (params.chipAccessibilitySelectedType === undefined) {
this.__chipAccessibilitySelectedType.set(undefined);
}
if (params.chipAccessibilityDescription === undefined) {
this.__chipAccessibilityDescription.set(undefined);
}
if (params.chipAccessibilityLevel === undefined) {
this.__chipAccessibilityLevel.set(undefined);
}
if (params.maxFontScale === undefined) {
this.__maxFontScale.set(undefined);
}
if (params.minFontScale === undefined) {
this.__minFontScale.set(undefined);
}
if (params.chipPadding === undefined) {
this.__chipPadding.set(undefined);
}
if (params.chipFontSize === undefined) {
this.__chipFontSize.set(undefined);
}
if (params.isChipExist !== undefined) {
this.isChipExist = params.isChipExist;
}
if (params.chipScale !== undefined) {
this.chipScale = params.chipScale;
}
if (params.chipOpacity !== undefined) {
this.chipOpacity = params.chipOpacity;
}
if (params.suffixSymbolHeight !== undefined) {
this.suffixSymbolHeight = params.suffixSymbolHeight;
}
if (params.suffixSymbolWidth !== undefined) {
this.suffixSymbolWidth = params.suffixSymbolWidth;
}
if (params.breakPoint !== undefined) {
this.breakPoint = params.breakPoint;
}
if (params.fontSizeScale !== undefined) {
this.fontSizeScale = params.fontSizeScale;
}
if (params.useAdaptiveLineHeight !== undefined) {
this.useAdaptiveLineHeight = params.useAdaptiveLineHeight;
}
if (params.isSuffixIconFocusStyleCustomized !== undefined) {
this.isSuffixIconFocusStyleCustomized = params.isSuffixIconFocusStyleCustomized;
}
if (params.isSuffixIconFocusable !== undefined) {
this.isSuffixIconFocusable = params.isSuffixIconFocusable;
}
if (params.onClose !== undefined) {
this.onClose = params.onClose;
}
if (params.onClicked !== undefined) {
this.onClicked = params.onClicked;
}
if (params.chipNodeInFocus !== undefined) {
this.chipNodeInFocus = params.chipNodeInFocus;
}
if (params.smListener !== undefined) {
this.smListener = params.smListener;
}
if (params.mdListener !== undefined) {
this.mdListener = params.mdListener;
}
if (params.lgListener !== undefined) {
this.lgListener = params.lgListener;
}
if (params.symbolEffect !== undefined) {
this.symbolEffect = params.symbolEffect;
}
if (params.environmentCallbackID !== undefined) {
this.environmentCallbackID = params.environmentCallbackID;
}
if (params.environmentCallback !== undefined) {
this.environmentCallback = params.environmentCallback;
}
}
updateStateVars(params) {
this.__chipSize.reset(params.chipSize);
this.__allowClose.reset(params.allowClose);
this.__closeOptions.reset(params.closeOptions);
this.__chipDirection.reset(params.chipDirection);
this.__prefixIcon.reset(params.prefixIcon);
this.__prefixSymbol.reset(params.prefixSymbol);
this.__label.reset(params.label);
this.__suffixIcon.reset(params.suffixIcon);
this.__suffixSymbol.reset(params.suffixSymbol);
this.__suffixSymbolOptions.reset(params.suffixSymbolOptions);
this.__chipNodeBackgroundColor.reset(params.chipNodeBackgroundColor);
this.__chipNodeActivatedBackgroundColor.reset(params.chipNodeActivatedBackgroundColor);
this.__backgroundSystemMaterial.reset(params.backgroundSystemMaterial);
this.__activatedBackgroundSystemMaterial.reset(params.activatedBackgroundSystemMaterial);
this.__chipNodeRadius.reset(params.chipNodeRadius);
this.__chipEnabled.reset(params.chipEnabled);
this.__chipActivated.reset(params.chipActivated);
this.__chipAccessibilitySelectedType.reset(params.chipAccessibilitySelectedType);
this.__chipAccessibilityDescription.reset(params.chipAccessibilityDescription);
this.__chipAccessibilityLevel.reset(params.chipAccessibilityLevel);
this.__maxFontScale.reset(params.maxFontScale);
this.__minFontScale.reset(params.minFontScale);
this.__chipPadding.reset(params.chipPadding);
this.__chipFontSize.reset(params.chipFontSize);
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__chipSize.purgeDependencyOnElmtId(rmElmtId);
this.__allowClose.purgeDependencyOnElmtId(rmElmtId);
this.__closeOptions.purgeDependencyOnElmtId(rmElmtId);
this.__chipDirection.purgeDependencyOnElmtId(rmElmtId);
this.__prefixIcon.purgeDependencyOnElmtId(rmElmtId);
this.__prefixSymbol.purgeDependencyOnElmtId(rmElmtId);
this.__label.purgeDependencyOnElmtId(rmElmtId);
this.__suffixIcon.purgeDependencyOnElmtId(rmElmtId);
this.__suffixSymbol.purgeDependencyOnElmtId(rmElmtId);
this.__suffixSymbolOptions.purgeDependencyOnElmtId(rmElmtId);
this.__chipNodeBackgroundColor.purgeDependencyOnElmtId(rmElmtId);
this.__chipNodeActivatedBackgroundColor.purgeDependencyOnElmtId(rmElmtId);
this.__backgroundSystemMaterial.purgeDependencyOnElmtId(rmElmtId);
this.__activatedBackgroundSystemMaterial.purgeDependencyOnElmtId(rmElmtId);
this.__chipNodeRadius.purgeDependencyOnElmtId(rmElmtId);
this.__chipEnabled.purgeDependencyOnElmtId(rmElmtId);
this.__chipActivated.purgeDependencyOnElmtId(rmElmtId);
this.__chipAccessibilitySelectedType.purgeDependencyOnElmtId(rmElmtId);
this.__chipAccessibilityDescription.purgeDependencyOnElmtId(rmElmtId);
this.__chipAccessibilityLevel.purgeDependencyOnElmtId(rmElmtId);
this.__maxFontScale.purgeDependencyOnElmtId(rmElmtId);
this.__minFontScale.purgeDependencyOnElmtId(rmElmtId);
this.__chipPadding.purgeDependencyOnElmtId(rmElmtId);
this.__chipFontSize.purgeDependencyOnElmtId(rmElmtId);
this.__inGroup.purgeDependencyOnElmtId(rmElmtId);
this.__isChipExist.purgeDependencyOnElmtId(rmElmtId);
this.__chipScale.purgeDependencyOnElmtId(rmElmtId);
this.__chipOpacity.purgeDependencyOnElmtId(rmElmtId);
this.__suffixSymbolHeight.purgeDependencyOnElmtId(rmElmtId);
this.__suffixSymbolWidth.purgeDependencyOnElmtId(rmElmtId);
this.__breakPoint.purgeDependencyOnElmtId(rmElmtId);
this.__fontSizeScale.purgeDependencyOnElmtId(rmElmtId);
this.__useAdaptiveLineHeight.purgeDependencyOnElmtId(rmElmtId);
this.__chipNodeInFocus.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__chipSize.aboutToBeDeleted();
this.__allowClose.aboutToBeDeleted();
this.__closeOptions.aboutToBeDeleted();
this.__chipDirection.aboutToBeDeleted();
this.__prefixIcon.aboutToBeDeleted();
this.__prefixSymbol.aboutToBeDeleted();
this.__label.aboutToBeDeleted();
this.__suffixIcon.aboutToBeDeleted();
this.__suffixSymbol.aboutToBeDeleted();
this.__suffixSymbolOptions.aboutToBeDeleted();
this.__chipNodeBackgroundColor.aboutToBeDeleted();
this.__chipNodeActivatedBackgroundColor.aboutToBeDeleted();
this.__backgroundSystemMaterial.aboutToBeDeleted();
this.__activatedBackgroundSystemMaterial.aboutToBeDeleted();
this.__chipNodeRadius.aboutToBeDeleted();
this.__chipEnabled.aboutToBeDeleted();
this.__chipActivated.aboutToBeDeleted();
this.__chipAccessibilitySelectedType.aboutToBeDeleted();
this.__chipAccessibilityDescription.aboutToBeDeleted();
this.__chipAccessibilityLevel.aboutToBeDeleted();
this.__maxFontScale.aboutToBeDeleted();
this.__minFontScale.aboutToBeDeleted();
this.__chipPadding.aboutToBeDeleted();
this.__chipFontSize.aboutToBeDeleted();
this.__inGroup.aboutToBeDeleted();
this.__isChipExist.aboutToBeDeleted();
this.__chipScale.aboutToBeDeleted();
this.__chipOpacity.aboutToBeDeleted();
this.__suffixSymbolHeight.aboutToBeDeleted();
this.__suffixSymbolWidth.aboutToBeDeleted();
this.__breakPoint.aboutToBeDeleted();
this.__fontSizeScale.aboutToBeDeleted();
this.__useAdaptiveLineHeight.aboutToBeDeleted();
this.__chipNodeInFocus.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get chipSize() {
return this.__chipSize.get();
}
set chipSize(newValue) {
this.__chipSize.set(newValue);
}
get allowClose() {
return this.__allowClose.get();
}
set allowClose(newValue) {
this.__allowClose.set(newValue);
}
get closeOptions() {
return this.__closeOptions.get();
}
set closeOptions(newValue) {
this.__closeOptions.set(newValue);
}
get chipDirection() {
return this.__chipDirection.get();
}
set chipDirection(newValue) {
this.__chipDirection.set(newValue);
}
get prefixIcon() {
return this.__prefixIcon.get();
}
set prefixIcon(newValue) {
this.__prefixIcon.set(newValue);
}
get prefixSymbol() {
return this.__prefixSymbol.get();
}
set prefixSymbol(newValue) {
this.__prefixSymbol.set(newValue);
}
get label() {
return this.__label.get();
}
set label(newValue) {
this.__label.set(newValue);
}
get suffixIcon() {
return this.__suffixIcon.get();
}
set suffixIcon(newValue) {
this.__suffixIcon.set(newValue);
}
get suffixSymbol() {
return this.__suffixSymbol.get();
}
set suffixSymbol(newValue) {
this.__suffixSymbol.set(newValue);
}
get suffixSymbolOptions() {
return this.__suffixSymbolOptions.get();
}
set suffixSymbolOptions(newValue) {
this.__suffixSymbolOptions.set(newValue);
}
get chipNodeBackgroundColor() {
return this.__chipNodeBackgroundColor.get();
}
set chipNodeBackgroundColor(newValue) {
this.__chipNodeBackgroundColor.set(newValue);
}
get chipNodeActivatedBackgroundColor() {
return this.__chipNodeActivatedBackgroundColor.get();
}
set chipNodeActivatedBackgroundColor(newValue) {
this.__chipNodeActivatedBackgroundColor.set(newValue);
}
get backgroundSystemMaterial() {
return this.__backgroundSystemMaterial.get();
}
set backgroundSystemMaterial(newValue) {
this.__backgroundSystemMaterial.set(newValue);
}
get activatedBackgroundSystemMaterial() {
return this.__activatedBackgroundSystemMaterial.get();
}
set activatedBackgroundSystemMaterial(newValue) {
this.__activatedBackgroundSystemMaterial.set(newValue);
}
get chipNodeRadius() {
return this.__chipNodeRadius.get();
}
set chipNodeRadius(newValue) {
this.__chipNodeRadius.set(newValue);
}
get chipEnabled() {
return this.__chipEnabled.get();
}
set chipEnabled(newValue) {
this.__chipEnabled.set(newValue);
}
get chipActivated() {
return this.__chipActivated.get();
}
set chipActivated(newValue) {
this.__chipActivated.set(newValue);
}
get chipAccessibilitySelectedType() {
return this.__chipAccessibilitySelectedType.get();
}
set chipAccessibilitySelectedType(newValue) {
this.__chipAccessibilitySelectedType.set(newValue);
}
get chipAccessibilityDescription() {
return this.__chipAccessibilityDescription.get();
}
set chipAccessibilityDescription(newValue) {
this.__chipAccessibilityDescription.set(newValue);
}
get chipAccessibilityLevel() {
return this.__chipAccessibilityLevel.get();
}
set chipAccessibilityLevel(newValue) {
this.__chipAccessibilityLevel.set(newValue);
}
get maxFontScale() {
return this.__maxFontScale.get();
}
set maxFontScale(newValue) {
this.__maxFontScale.set(newValue);
}
get minFontScale() {
return this.__minFontScale.get();
}
set minFontScale(newValue) {
this.__minFontScale.set(newValue);
}
get chipPadding() {
return this.__chipPadding.get();
}
set chipPadding(newValue) {
this.__chipPadding.set(newValue);
}
get chipFontSize() {
return this.__chipFontSize.get();
}
set chipFontSize(newValue) {
this.__chipFontSize.set(newValue);
}
get inGroup() {
return this.__inGroup.get();
}
set inGroup(newValue) {
this.__inGroup.set(newValue);
}
get isChipExist() {
return this.__isChipExist.get();
}
set isChipExist(newValue) {
this.__isChipExist.set(newValue);
}
get chipScale() {
return this.__chipScale.get();
}
set chipScale(newValue) {
this.__chipScale.set(newValue);
}
get chipOpacity() {
return this.__chipOpacity.get();
}
set chipOpacity(newValue) {
this.__chipOpacity.set(newValue);
}
get suffixSymbolHeight() {
return this.__suffixSymbolHeight.get();
}
set suffixSymbolHeight(newValue) {
this.__suffixSymbolHeight.set(newValue);
}
get suffixSymbolWidth() {
return this.__suffixSymbolWidth.get();
}
set suffixSymbolWidth(newValue) {
this.__suffixSymbolWidth.set(newValue);
}
get breakPoint() {
return this.__breakPoint.get();
}
set breakPoint(newValue) {
this.__breakPoint.set(newValue);
}
get fontSizeScale() {
return this.__fontSizeScale.get();
}
set fontSizeScale(newValue) {
this.__fontSizeScale.set(newValue);
}
get useAdaptiveLineHeight() {
return this.__useAdaptiveLineHeight.get();
}
set useAdaptiveLineHeight(newValue) {
this.__useAdaptiveLineHeight.set(newValue);
}
get chipNodeInFocus() {
return this.__chipNodeInFocus.get();
}
set chipNodeInFocus(newValue) {
this.__chipNodeInFocus.set(newValue);
}
updateLanguageLineHeight() {
if (deviceInfo.sdkApiVersion < 26) {
return;
}
const resourceManager = this.getUIContext().getHostContext()?.resourceManager;
if (!resourceManager) {
console.error(`[Chip] failed to get resourceManager`);
return;
}
try {
this.useAdaptiveLineHeight = resourceManager.getStringByNameSync('text_fallback_line_spacing') === 'true';
} catch (e) {
console.error(`[Chip] failed to get text_fallback_line_spacing resource`);
}
}
aboutToAppear() {
this.smListener.on('change', mediaQueryResult => {
if (mediaQueryResult.matches) {
this.breakPoint = BreakPointsType.SM;
}
});
this.mdListener.on('change', mediaQueryResult => {
if (mediaQueryResult.matches) {
this.breakPoint = BreakPointsType.MD;
}
});
this.lgListener.on('change', mediaQueryResult => {
if (mediaQueryResult.matches) {
this.breakPoint = BreakPointsType.LG;
}
});
this.updateLanguageLineHeight();
let abilityContext = this.getUIContext().getHostContext();
if (abilityContext) {
this.fontSizeScale = abilityContext.config?.fontSizeScale ?? 1;
this.environmentCallbackID = abilityContext.getApplicationContext().on('environment', this.environmentCallback);
}
}
aboutToDisappear() {
this.smListener.off('change');
this.mdListener.off('change');
this.lgListener.off('change');
if (this.environmentCallbackID) {
this.getUIContext()?.getHostContext()?.getApplicationContext().off('environment', this.environmentCallbackID);
this.environmentCallbackID = void 0;
}
}
isSetActiveChipBgColor() {
if (!this.chipNodeActivatedBackgroundColor) {
return false;
}
try {
return (
ColorMetrics.resourceColor(this.chipNodeActivatedBackgroundColor).color !==
ColorMetrics.resourceColor(this.theme.chipNode.activatedBackgroundColor).color
);
} catch (error) {
console.error(`[Chip] failed to get ColorMetrics.resourceColor`);
return false;
}
}
isSetNormalChipBgColor() {
if (!this.chipNodeBackgroundColor) {
return false;
}
try {
return (
ColorMetrics.resourceColor(this.chipNodeBackgroundColor).color !==
ColorMetrics.resourceColor(this.theme.chipNode.backgroundColor).color
);
} catch (error) {
console.error(`[Chip] failed to get resourceColor`);
return false;
}
}
getShadowStyles() {
if (!this.chipNodeInFocus) {
return undefined;
}
return this.resourceToNumber(
this.isSmallChipSize() ? this.theme.chipNode.smallShadowStyle : this.theme.chipNode.normalShadowStyle,
-1
);
}
ChipBuilder(parent = null) {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithChild({ type: ButtonType.Normal });
Button.clip(false);
Button.shadow(this.getShadowStyles());
Button.padding(0);
Button.focusable(true);
Button.size(this.getChipSize());
Button.enabled(this.isChipEnabled());
Button.direction(this.chipDirection);
Button.borderWidth(this.getChipNodeBorderWidth());
Button.borderColor(this.getChipNodeBorderColor());
Button.borderRadius(this.getChipBorderRadius());
Button.backgroundColor(this.getChipBackgroundColor());
Button.systemMaterial(this.getBackgroundSystemMaterial());
Button.responseRegion(this.getChipResponseRegion());
Button.scale(ObservedObject.GetRawObject(this.chipScale));
Button.opacity(this.chipOpacity);
Button.accessibilityGroup(true);
Button.accessibilityDescription(this.getAccessibilityDescription());
Button.accessibilityLevel(this.getAccessibilityLevel());
Button.accessibilityChecked(this.getAccessibilityChecked());
Button.accessibilitySelected(this.getAccessibilitySelected());
Button.onClick(this.getChipOnClicked());
Button.onKeyEvent(event => {
if (!event || event.type === null || event.type !== KeyType.Down) {
return;
}
let isDeleteChip = event.keyCode === KeyCode.KEYCODE_FORWARD_DEL;
let isEnterDeleteChip =
event.keyCode === KeyCode.KEYCODE_ENTER &&
this.allowClose !== false &&
!this.suffixIcon?.src &&
this.isSuffixIconFocusStyleCustomized;
if (isDeleteChip || isEnterDeleteChip) {
this.deleteChip();
}
});
Button.onFocus(() => {
if (this.isSuffixIconFocusStyleCustomized) {
this.chipNodeInFocus = true;
}
this.chipZoomIn();
});
Button.onBlur(() => {
if (this.isSuffixIconFocusStyleCustomized) {
this.chipNodeInFocus = false;
}
this.chipZoomOut();
});
Button.onHover(
!this.isSuffixIconFocusStyleCustomized
? undefined
: isHover => {
isHover ? this.chipZoomIn() : this.chipZoomOut();
}
);
}, Button);
this.observeComponentCreation2((elmtId, isInitialRender) => {
Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center });
Flex.direction(this.chipDirection);
Flex.padding(this.getChipPadding());
Flex.size(this.getChipSize());
Flex.constraintSize(this.getChipConstraintSize());
}, Flex);
this.observeComponentCreation2((elmtId, isInitialRender) => {
If.create();
if (this.hasPrefixSymbol()) {
this.ifElseBranchUpdateFunction(0, () => {
this.observeComponentCreation2((elmtId, isInitialRender) => {
SymbolGlyph.create();
SymbolGlyph.fontSize(this.getFontSizeForSymbol());
SymbolGlyph.maxFontScale(ObservedObject.GetRawObject(this.maxFontScale));
SymbolGlyph.minFontScale(ObservedObject.GetRawObject(this.minFontScale));
SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.PREFIX_SYMBOL));
SymbolGlyph.flexShrink(0);
SymbolGlyph.attributeModifier.bind(this)(this.getPrefixSymbolModifier());
SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE);
SymbolGlyph.symbolEffect(this.symbolEffect, false);
SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect);
}, SymbolGlyph);
});
} else if (this.prefixIcon?.src) {
this.ifElseBranchUpdateFunction(1, () => {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Image.create(this.prefixIcon.src);
Image.direction(this.chipDirection);
Image.size(this.getPrefixIconSize());
Image.fillColor(this.getPrefixIconFilledColor());
Image.objectFit(ImageFit.Cover);
Image.focusable(false);
Image.flexShrink(0);
Image.draggable(false);
}, Image);
});
} else {
this.ifElseBranchUpdateFunction(2, () => {});
}
}, If);
If.pop();
this.observeComponentCreation2((elmtId, isInitialRender) => {
Text.create(this.getChipText());
Text.draggable(false);
Text.flexShrink(1);
Text.focusable(true);
Text.maxLines(1);
Text.textOverflow({ overflow: TextOverflow.Ellipsis });
Text.textAlign(TextAlign.Center);
Text.direction(this.chipDirection);
Text.fontSize(this.getLabelFontSize());
Text.fontColor(this.getLabelFontColor());
Text.fontFamily(this.getLabelFontFamily());
Text.fontWeight(this.getLabelFontWeight());
Text.maxFontScale(ObservedObject.GetRawObject(this.maxFontScale));
Text.minFontScale(ObservedObject.GetRawObject(this.minFontScale));
Text.margin(this.getLabelMargin());
Text.includeFontPadding(this.useAdaptiveLineHeight);
Text.fallbackLineSpacing(this.useAdaptiveLineHeight);
}, Text);
Text.pop();
this.observeComponentCreation2((elmtId, isInitialRender) => {
If.create();
if (this.hasSuffixSymbol()) {
this.ifElseBranchUpdateFunction(0, () => {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithChild({ type: ButtonType.Normal });
Button.onClick(this.getSuffixSymbolAction());
Button.accessibilityText(this.getSuffixSymbolAccessibilityText());
Button.accessibilityDescription(this.getSuffixSymbolAccessibilityDescription());
Button.accessibilityLevel(this.getSuffixSymbolAccessibilityLevel());
Button.flexShrink(0);
Button.backgroundColor(Color.Transparent);
Button.borderRadius(0);
Button.padding(0);
Button.stateEffect(false);
Button.hoverEffect(HoverEffect.None);
Button.focusable(this.isSuffixIconFocusable);
}, Button);
this.observeComponentCreation2((elmtId, isInitialRender) => {
SymbolGlyph.create();
SymbolGlyph.fontSize(this.getFontSizeForSymbol());
SymbolGlyph.maxFontScale(ObservedObject.GetRawObject(this.maxFontScale));
SymbolGlyph.minFontScale(ObservedObject.GetRawObject(this.minFontScale));
SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL));
SymbolGlyph.attributeModifier.bind(this)(this.getSuffixSymbolModifier());
SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE);
SymbolGlyph.symbolEffect(this.symbolEffect, false);
SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect);
}, SymbolGlyph);
Button.pop();
});
} else if (this.suffixIcon?.src) {
this.ifElseBranchUpdateFunction(1, () => {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithChild({ type: ButtonType.Normal });
Button.backgroundColor(Color.Transparent);
Button.borderRadius(0);
Button.padding(0);
Button.flexShrink(0);
Button.stateEffect(false);
Button.hoverEffect(HoverEffect.None);
Button.size(this.getSuffixIconSize());
Button.accessibilityText(this.getSuffixIconAccessibilityText());
Button.accessibilityDescription(this.getSuffixIconAccessibilityDescription());
Button.accessibilityLevel(this.getSuffixIconAccessibilityLevel());
Button.onClick(this.getSuffixIconAction());
Button.focusable(this.isSuffixIconFocusable);
}, Button);
this.observeComponentCreation2((elmtId, isInitialRender) => {
Image.create(this.suffixIcon.src);
Image.direction(this.chipDirection);
Image.size(this.getSuffixIconSize());
Image.fillColor(this.getSuffixIconFilledColor());
Image.objectFit(ImageFit.Cover);
Image.draggable(false);
}, Image);
Button.pop();
});
} else if (this.isClosable()) {
this.ifElseBranchUpdateFunction(2, () => {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithChild({ type: ButtonType.Normal });
Button.backgroundColor(Color.Transparent);
Button.borderRadius(0);
Button.padding(0);
Button.flexShrink(0);
Button.stateEffect(false);
Button.hoverEffect(HoverEffect.None);
Button.accessibilityText(this.getCloseIconAccessibilityText());
Button.accessibilityDescription(this.getCloseIconAccessibilityDescription());
Button.accessibilityLevel(this.getCloseIconAccessibilityLevel());
Button.responseRegion({
x: {
id: 125836837,
type: 10002,
params: ['sys.float.chip_touch_hot_zone_x'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
y: {
id: 125836838,
type: 10002,
params: ['sys.float.chip_touch_hot_zone_y'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
width: {
id: 125836839,
type: 10002,
params: ['sys.float.chip_touch_hot_zone_width'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
height: {
id: 125836840,
type: 10002,
params: ['sys.float.chip_touch_hot_zone_height'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
},
});
Button.onClick(() => {
if (!this.isChipEnabled()) {
return;
}
this.onClose?.();
this.deleteChip();
});
Button.focusable(this.isSuffixIconFocusable);
}, Button);
this.observeComponentCreation2((elmtId, isInitialRender) => {
SymbolGlyph.create({
id: 125831487,
type: 40000,
params: ['sys.symbol.xmark'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
});
SymbolGlyph.fontSize(this.getCloseOptionsFontsize());
SymbolGlyph.maxFontScale(ObservedObject.GetRawObject(this.maxFontScale));
SymbolGlyph.minFontScale(ObservedObject.GetRawObject(this.minFontScale));
SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL));
}, SymbolGlyph);
Button.pop();
});
} else {
this.ifElseBranchUpdateFunction(3, () => {});
}
}, If);
If.pop();
Flex.pop();
Button.pop();
}
getCloseIconAccessibilityLevel() {
if (
this.closeOptions?.accessibilityLevel === 'no' ||
this.closeOptions?.accessibilityLevel === 'no-hide-descendants'
) {
return this.closeOptions.accessibilityLevel;
}
return 'yes';
}
getCloseIconAccessibilityDescription() {
if (typeof this.closeOptions?.accessibilityDescription === 'undefined') {
return void 0;
}
return this.closeOptions.accessibilityDescription;
}
getCloseIconAccessibilityText() {
if (typeof this.closeOptions?.accessibilityText === 'undefined') {
return {
id: 125834251,
type: 10003,
params: ['sys.string.delete_used_for_accessibility_text'],
bundleName: '__harDefaultBundleName__',
moduleName: '__harDefaultModuleName__',
};
}
return this.closeOptions.accessibilityText;
}
getSuffixIconAction() {
if (this.suffixIcon?.src) {
if (!this.suffixIcon?.action) {
return void 0;
}
return () => {
if (this.isChipEnabled()) {
this.suffixIcon?.action?.();
}
};
}
return void 0;
}
getSuffixIconFilledColor() {
if (this.isChipActivated()) {
return this.suffixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON);
}
return this.suffixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.SUFFIX_ICON);
}
getSuffixIconSize() {
let suffixIconSize = { width: 0, height: 0 };
if (typeof this.suffixIcon?.size?.width !== 'undefined' && this.isValidLength(this.suffixIcon.size.width)) {
suffixIconSize.width = this.suffixIcon.size.width;
} else {
suffixIconSize.width = this.isSmallChipSize()
? this.theme.suffixIcon.smallSize.width
: this.theme.suffixIcon.normalSize.width;
}
if (typeof this.suffixIcon?.size?.height !== 'undefined' && this.isValidLength(this.suffixIcon.size.height)) {
suffixIconSize.height = this.suffixIcon.size.height;
} else {
suffixIconSize.height = this.isSmallChipSize()
? this.theme.suffixIcon.smallSize.height
: this.theme.suffixIcon.normalSize.height;
}
return suffixIconSize;
}
getSuffixIconAccessibilityLevel() {
if (this.suffixIcon?.accessibilityLevel === 'no' || this.suffixIcon?.accessibilityLevel === 'no-hide-descendants') {
return this.suffixIcon.accessibilityLevel;
}
return this.suffixIcon?.action ? 'yes' : 'no';
}
getSuffixIconAccessibilityDescription() {
if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') {
return void 0;
}
return this.suffixIcon.accessibilityDescription;
}
getSuffixIconAccessibilityText() {
if (typeof this.suffixIcon?.accessibilityText === 'undefined') {
return void 0;
}
return this.suffixIcon.accessibilityText;
}
isClosable() {
return this.allowClose ?? true;
}
getSuffixSymbolModifier() {
if (this.isChipActivated()) {
return this.suffixSymbol?.activated;
}
return this.suffixSymbol?.normal;
}
getSuffixSymbolAccessibilityLevel() {
if (this.isChipActivated()) {
if (
this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no' ||
this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no-hide-descendants'
) {
return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel;
}
return this.suffixSymbolOptions?.action ? 'yes' : 'no';
}
if (
this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no' ||
this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no-hide-descendants'
) {
return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel;
}
return this.suffixSymbolOptions?.action ? 'yes' : 'no';
}
getSuffixSymbolAccessibilityDescription() {
if (this.isChipActivated()) {
if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityDescription !== 'undefined') {
return this.suffixSymbolOptions.activatedAccessibility.accessibilityDescription;
}
return void 0;
}
if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityDescription !== 'undefined') {
return this.suffixSymbolOptions.normalAccessibility.accessibilityDescription;
}
return void 0;
}
getSuffixSymbolAccessibilityText() {
if (this.isChipActivated()) {
if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityText !== 'undefined') {
return this.suffixSymbolOptions.activatedAccessibility.accessibilityText;
}
return void 0;
}
if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityText !== 'undefined') {
return this.suffixSymbolOptions.normalAccessibility.accessibilityText;
}
return void 0;
}
getSuffixSymbolAction() {
if (typeof this.suffixSymbolOptions?.action === 'undefined') {
return void 0;
}
return () => {
if (!this.isChipEnabled()) {
return;
}
this.suffixSymbolOptions?.action?.();
};
}
hasSuffixSymbol() {
return !!(this.suffixSymbol?.normal || this.suffixSymbol?.activated);
}
getPrefixIconFilledColor() {
if (this.isChipActivated()) {
return this.prefixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON);
}
return this.prefixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.PREFIX_ICON);
}
getPrefixIconSize() {
let prefixIconSize = { width: 0, height: 0 };
if (typeof this.prefixIcon?.size?.width !== 'undefined' && this.isValidLength(this.prefixIcon.size.width)) {
prefixIconSize.width = this.prefixIcon.size.width;
} else {
prefixIconSize.width = this.isSmallChipSize()
? this.theme.prefixIcon.smallSize.width
: this.theme.prefixIcon.normalSize.width;
}
if (typeof this.prefixIcon?.size?.height !== 'undefined' && this.isValidLength(this.prefixIcon.size.height)) {
prefixIconSize.height = this.prefixIcon.size.height;
} else {
prefixIconSize.height = this.isSmallChipSize()
? this.theme.prefixIcon.smallSize.height
: this.theme.prefixIcon.normalSize.height;
}
return prefixIconSize;
}
getPrefixSymbolModifier() {
if (this.isChipActivated()) {
return this.prefixSymbol?.activated;
}
return this.prefixSymbol?.normal;
}
getDefaultSymbolColor(iconType) {
return this.isChipActivated() ? this.getSymbolActiveColor(iconType) : this.getSymbolFillColor(iconType);
}
getDefaultActiveIconColor(iconType) {
if (iconType === IconType.PREFIX_ICON) {
return this.chipNodeInFocus
? this.theme.prefixIcon.focusActivatedColor
: this.theme.prefixIcon.activatedFillColor;
} else {
return this.chipNodeInFocus
? this.theme.suffixIcon.focusActivatedColor
: this.theme.suffixIcon.activatedFillColor;
}
}
getDefaultFillIconColor(iconType) {
if (iconType === IconType.PREFIX_ICON) {
return this.chipNodeInFocus ? this.theme.prefixIcon.focusFillColor : this.theme.prefixIcon.fillColor;
} else {
return this.chipNodeInFocus ? this.theme.suffixIcon.focusFillColor : this.theme.suffixIcon.fillColor;
}
}
getSymbolActiveColor(iconType) {
if (!this.chipNodeInFocus) {
return this.theme.defaultSymbol.activatedFontColor;
}
if (iconType === IconType.PREFIX_SYMBOL) {
return [this.theme.prefixIcon.focusActivatedColor];
}
if (iconType === IconType.SUFFIX_SYMBOL) {
return [this.theme.suffixIcon.focusActivatedColor];
}
return this.theme.defaultSymbol.activatedFontColor;
}
getSymbolFillColor(iconType) {
if (!this.chipNodeInFocus) {
return this.theme.defaultSymbol.normalFontColor;
}
if (iconType === IconType.PREFIX_SYMBOL) {
return [this.theme.prefixIcon.focusFillColor];
}
if (iconType === IconType.SUFFIX_SYMBOL) {
return [this.theme.suffixIcon.focusFillColor];
}
return this.theme.defaultSymbol.normalFontColor;
}
hasPrefixSymbol() {
return !!(this.prefixSymbol?.normal || this.prefixSymbol?.activated);
}
getChipConstraintSize() {
const constraintSize = {};
if (typeof this.chipSize === 'string') {
constraintSize.maxWidth = this.getChipMaxWidth();
if (this.chipSize === ChipSize.SMALL) {
constraintSize.minHeight = this.isChipActivated()
? this.theme.chipNode.activatedSmallHeight
: this.theme.chipNode.smallHeight;
} else {
constraintSize.minHeight = this.isChipActivated()
? this.theme.chipNode.activatedNormalHeight
: this.theme.chipNode.normalHeight;
}
} else {
if (typeof this.chipSize?.width === 'undefined' || !this.isValidLength(this.chipSize.width)) {
constraintSize.maxWidth = this.getChipMaxWidth();
}
if (typeof this.chipSize?.height === 'undefined' || !this.isValidLength(this.chipSize.height)) {
constraintSize.minHeight = this.isChipActivated()
? this.theme.chipNode.activatedNormalHeight
: this.theme.chipNode.normalHeight;
}
}
return constraintSize;
}
getChipHeight() {
let height;
if (typeof this.chipSize !== 'string') {
if (typeof this.chipSize?.height !== 'undefined' && this.isValidLength(this.chipSize.height)) {
height = this.chipSize.height;
} else {
height = this.isChipActivated() ? this.theme.chipNode.activatedNormalHeight : this.theme.chipNode.normalHeight;
}
} else if (this.chipSize === ChipSize.SMALL) {
height = this.isChipActivated() ? this.theme.chipNode.activatedSmallHeight : this.theme.chipNode.smallHeight;
} else {
height = this.isChipActivated() ? this.theme.chipNode.activatedNormalHeight : this.theme.chipNode.normalHeight;
}
return this.parseLength(height) ?? HOT_SPOT_MIN_HEIGHT;
}
getChipResponseRegion() {
if (deviceInfo.sdkApiVersion >= 26) {
const chipHeight = this.getChipHeight();
if (chipHeight < HOT_SPOT_MIN_HEIGHT) {
return {
x: 0,
y: (chipHeight - HOT_SPOT_MIN_HEIGHT) / 2,
width: '100%',
height: HOT_SPOT_MIN_HEIGHT,
};
}
}
return undefined;
}
getChipMaxWidth() {
if (this.fontSizeScale >= this.theme.chipNode.suitAgeScale) {
return void 0;
}
if (this.breakPoint === BreakPointsType.SM) {
return this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth;
}
if (this.breakPoint === BreakPointsType.MD) {
return this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth;
}
if (this.breakPoint === BreakPointsType.LG) {
return this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth;
}
return void 0;
}
getChipSize() {
const chipSize = {
width: 'auto',
height: 'auto',
};
if (typeof this.chipSize !== 'string') {
if (typeof this.chipSize?.width !== 'undefined' && this.isValidLength(this.chipSize.width)) {
chipSize.width = this.chipSize.width;
}
if (typeof this.chipSize?.height !== 'undefined' && this.isValidLength(this.chipSize.height)) {
chipSize.height = this.chipSize.height;
}
}
return chipSize;
}
copyPadding(src) {
return {
top: src.top,
bottom: src.bottom,
start: src.start,
end: src.end,
};
}
getChipPadding() {
let chipTheme = this.theme.chipNode;
let res;
if (this.isSmallChipSize()) {
res = this.isChipActivated()
? this.copyPadding(chipTheme.localizedActivatedSmallPadding)
: this.copyPadding(chipTheme.localizedSmallPadding);
} else {
res = this.isChipActivated()
? this.copyPadding(chipTheme.localizedActivatedNormalPadding)
: this.copyPadding(chipTheme.localizedNormalPadding);
}
if (this.chipPadding?.top && LengthMetricsUtils.getInstance().isNaturalNumber(this.chipPadding.top)) {
res.top = this.chipPadding.top;
}
if (this.chipPadding?.bottom && LengthMetricsUtils.getInstance().isNaturalNumber(this.chipPadding.bottom)) {
res.bottom = this.chipPadding.bottom;
}
if (this.chipPadding?.start && LengthMetricsUtils.getInstance().isNaturalNumber(this.chipPadding.start)) {
res.start = this.chipPadding.start;
}
if (this.chipPadding?.end && LengthMetricsUtils.getInstance().isNaturalNumber(this.chipPadding.end)) {
res.end = this.chipPadding.end;
}
return res;
}
getLabelMargin() {
const localizedLabelMargin = {
start: LengthMetrics.vp(0),
end: LengthMetrics.vp(0),
};
const defaultLocalizedMargin = this.isSmallChipSize()
? this.theme.label.localizedSmallMargin
: this.theme.label.localizedNormalMargin;
if (
typeof this.label?.localizedLabelMargin?.start !== 'undefined' &&
this.label.localizedLabelMargin.start.value >= 0
) {
localizedLabelMargin.start = this.label.localizedLabelMargin.start;
} else if (this.hasPrefix()) {
localizedLabelMargin.start = defaultLocalizedMargin.start;
}
if (
typeof this.label?.localizedLabelMargin?.end !== 'undefined' &&
this.label.localizedLabelMargin.end.value >= 0
) {
localizedLabelMargin.end = this.label.localizedLabelMargin.end;
} else if (this.hasSuffix() || this.isNeedShowCloseIconMargin()) {
localizedLabelMargin.end = defaultLocalizedMargin.end;
}
if (typeof this.label?.localizedLabelMargin === 'object') {
return localizedLabelMargin;
}
if (typeof this.label.labelMargin === 'object') {
const labelMargin = { left: 0, right: 0 };
const defaultLabelMargin = this.isSmallChipSize() ? this.theme.label.smallMargin : this.theme.label.normalMargin;
if (typeof this.label?.labelMargin?.left !== 'undefined' && this.isValidLength(this.label.labelMargin.left)) {
labelMargin.left = this.label.labelMargin.left;
} else if (this.hasPrefix()) {
labelMargin.left = defaultLabelMargin.left;
}
if (typeof this.label?.labelMargin?.right !== 'undefined' && this.isValidLength(this.label.labelMargin.right)) {
labelMargin.right = this.label.labelMargin.right;
} else if (this.hasSuffix()) {
labelMargin.right = defaultLabelMargin.right;
}
return labelMargin;
}
return localizedLabelMargin;
}
hasSuffix() {
if (this.suffixIcon?.src) {
return true;
}
return this.isChipActivated() ? !!this.suffixSymbol?.activated : !!this.suffixSymbol?.normal;
}
hasPrefix() {
if (this.prefixIcon?.src) {
return true;
}
return this.isChipActivated() ? !!this.prefixSymbol?.activated : !!this.prefixSymbol?.normal;
}
getLabelFontWeight() {
if (this.isChipActivated()) {
return this.resourceToNumber(this.theme.label.activatedFontWeight, FontWeight.Medium);
}
return this.resourceToNumber(this.theme.label.fontWeight, FontWeight.Regular);
}
getLabelFontFamily() {
return this.label?.fontFamily ?? this.theme.label.fontFamily;
}
getFontSizeForSymbol() {
if (!!this.chipFontSize && this.isValidLength(this.chipFontSize)) {
return this.chipFontSize;
}
return this.isSmallChipSize()
? this.theme.defaultSymbol.smallSymbolFontSize
: this.theme.defaultSymbol.normalSymbolFontSize;
}
getCloseOptionsFontsize() {
if (!!this.closeOptions?.fontSize && this.isValidLength(this.closeOptions?.fontSize)) {
return this.closeOptions.fontSize;
}
if (!!this.chipFontSize && this.isValidLength(this.chipFontSize)) {
return this.chipFontSize;
}
return this.isSmallChipSize()
? this.theme.defaultSymbol.smallSymbolFontSize
: this.theme.defaultSymbol.normalSymbolFontSize;
}
getActiveFontColor() {
return this.chipNodeInFocus ? this.theme.label.focusActiveFontColor : this.theme.label.activatedFontColor;
}
getFontColor() {
return this.chipNodeInFocus ? this.theme.label.focusFontColor : this.theme.label.fontColor;
}
getChipNodeBorderColor() {
if (this.getBackgroundSystemMaterial()) {
return undefined;
}
let themeChipNode = this.theme.chipNode;
return this.isChipActivated() ? themeChipNode.activatedBorderColor : themeChipNode.borderColor;
}
getChipNodeBorderWidth() {
if (this.getBackgroundSystemMaterial()) {
return undefined;
}
let themeChipNode = this.theme.chipNode;
return this.isChipActivated() ? themeChipNode.activatedBorderWidth : themeChipNode.defaultBorderWidth;
}
getLabelFontColor() {
if (this.isChipActivated()) {
return this.label?.activatedFontColor ?? this.getActiveFontColor();
}
return this.label?.fontColor ?? this.getFontColor();
}
getLabelFontSize() {
if (typeof this.label.fontSize !== 'undefined' && this.isValidLength(this.label.fontSize)) {
return this.label.fontSize;
}
if (!!this.chipFontSize && this.isValidLength(this.chipFontSize)) {
return this.chipFontSize;
}
if (this.isSmallChipSize()) {
return this.useAdaptiveLineHeight ? this.theme.label.adaptiveItemFontSize : this.theme.label.smallFontSize;
}
return this.useAdaptiveLineHeight ? this.theme.label.adaptiveItemFontSize : this.theme.label.normalFontSize;
}
getChipText() {
return this.label?.text ?? '';
}
deleteChip() {
this.getUIContext().animateTo({ curve: Curve.Sharp, duration: 150 }, () => {
this.chipOpacity = 0;
});
this.getUIContext().animateTo(
{
curve: Curve.FastOutLinearIn,
duration: 150,
onFinish: () => {
this.isChipExist = false;
},
},
() => {
this.chipScale = { x: 0.85, y: 0.85 };
}
);
}
getChipOnClicked() {
if (this.onClicked) {
return event => {
this.onClicked();
};
}
return void 0;
}
getAccessibilitySelected() {
if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.SELECTED) {
return this.isChipActivated();
}
return void 0;
}
getAccessibilityChecked() {
if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.CHECKED) {
return this.isChipActivated();
}
return void 0;
}
getChipAccessibilitySelectedType() {
if (typeof this.chipActivated === 'undefined') {
return AccessibilitySelectedType.CLICKED;
}
return this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED;
}
getAccessibilityLevel() {
return this.chipAccessibilityLevel;
}
getAccessibilityDescription() {
if (typeof this.chipAccessibilityDescription === 'undefined') {
return void 0;
}
return this.chipAccessibilityDescription;
}
isChipEnabled() {
return this.chipEnabled ?? true;
}
getChipBorderRadius() {
if (typeof this.chipNodeRadius !== 'undefined' && this.isValidLength(this.chipNodeRadius)) {
return this.chipNodeRadius;
}
return this.isSmallChipSize() ? this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius;
}
isSmallChipSize() {
return typeof this.chipSize === 'string' && this.chipSize === ChipSize.SMALL;
}
getChipBackgroundColor() {
let themeChipNode = this.theme.chipNode;
if (this.isChipActivated()) {
if (!!this.activatedBackgroundSystemMaterial) {
return undefined;
}
return this.chipNodeInFocus && !this.isSetActiveChipBgColor()
? themeChipNode.focusActivatedBgColor
: this.getColor(this.chipNodeActivatedBackgroundColor, themeChipNode.activatedBackgroundColor);
}
if (!!this.backgroundSystemMaterial) {
return undefined;
}
return this.chipNodeInFocus && !this.isSetNormalChipBgColor()
? themeChipNode.focusBgColor
: this.getColor(this.chipNodeBackgroundColor, this.theme.chipNode.backgroundColor);
}
getBackgroundSystemMaterial() {
if (deviceInfo.sdkApiVersion < 26) {
return undefined;
}
const info = uiMaterial.getMaterialInfo();
if (info.state === uiMaterial.MaterialState.DISABLE) {
return undefined;
}
if (this.isChipActivated()) {
return info.state === uiMaterial.MaterialState.ENABLE && !this.activatedBackgroundSystemMaterial
? this.theme.chipNode.activatedBackgroundSystemMaterial
: this.activatedBackgroundSystemMaterial;
}
return info.state === uiMaterial.MaterialState.ENABLE && !this.backgroundSystemMaterial
? this.theme.chipNode.backgroundSystemMaterial
: this.backgroundSystemMaterial;
}
getColor(color, defaultColor) {
if (!color) {
return defaultColor;
}
try {
ColorMetrics.resourceColor(color).color;
return color;
} catch (e) {
console.error(`[Chip] failed to get color`);
return Color.Transparent;
}
}
isChipActivated() {
return this.chipActivated ?? false;
}
getResourceNumber(resource) {
const resourceManager = this.getUIContext().getHostContext()?.resourceManager;
if (!resourceManager) {
console.error('[Chip] failed to get resourceManager');
return null;
}
switch (resource.type) {
case RESOURCE_TYPE_FLOAT:
case RESOURCE_TYPE_INTEGER:
try {
if (resource.id !== -1) {
return resourceManager.getNumber(resource.id);
}
return resourceManager.getNumberByName(resource.params[0].split('.')[2]);
} catch (error) {
console.error(`[Chip] get resource error`);
return null;
}
default:
return null;
}
}
resourceToNumber(resource, defaultValue) {
if (!resource || !resource.type) {
console.error('[Chip] failed: resource get fail');
return defaultValue;
}
const result = this.getResourceNumber(resource);
return result !== null ? result : defaultValue;
}
isValidLength(length) {
if (typeof length === 'number') {
return length >= 0;
} else if (typeof length === 'string') {
return this.isValidLengthString(length);
} else if (typeof length === 'object') {
const resource = length;
if (resource.type === RESOURCE_TYPE_STRING) {
const resourceManager = this.getUIContext().getHostContext()?.resourceManager;
if (!resourceManager) {
console.error('[Chip] failed to get resourceManager.');
return false;
}
return this.isValidLengthString(resourceManager.getStringSync(resource));
}
const result = this.getResourceNumber(resource);
return result !== null && result >= 0;
}
return false;
}
isValidLengthString(length) {
const matches = length.match(/(-?\d+(?:\.\d+)?)_?(fp|vp|px|lpx)?$/i);
if (!matches || matches.length < 3) {
return false;
}
return Number.parseInt(matches[1], 10) >= 0;
}
chipZoomOut() {
if (this.isSuffixIconFocusStyleCustomized) {
this.chipScale = {
x: 1,
y: 1,
};
}
}
chipZoomIn() {
if (this.isSuffixIconFocusStyleCustomized) {
this.chipScale = {
x: this.resourceToNumber(this.theme.chipNode.focusBtnScaleX, 1),
y: this.resourceToNumber(this.theme.chipNode.focusBtnScaleY, 1),
};
}
}
isNeedShowCloseIconMargin() {
return this.isClosable() && this.isSuffixIconFocusStyleCustomized;
}
parseLength(length) {
if (typeof length === 'number') {
return length;
}
if (typeof length === 'string') {
if (/(\d+)(vp|px|lpx|fp)?/.test(length)) {
const value = parseFloat(RegExp.$1);
const unit = RegExp.$2;
if (unit === 'vp' || unit === '') {
return value;
} else if (unit === 'px') {
return this.getUIContext().px2vp(value);
} else if (unit === 'fp') {
return this.getUIContext().px2vp(this.getUIContext().fp2px(value));
} else if (unit === 'lpx') {
return this.getUIContext().px2vp(this.getUIContext().lpx2px(value));
} else {
return undefined;
}
}
return undefined;
}
if (typeof length === 'object') {
try {
const metrics = LengthMetrics.resource(length);
if (metrics.unit === LengthUnit.VP) {
return metrics.value;
} else if (metrics.unit === LengthUnit.PX) {
return this.getUIContext().px2vp(metrics.value);
} else if (metrics.unit === LengthUnit.FP) {
return this.getUIContext().px2vp(this.getUIContext().fp2px(metrics.value));
} else {
return this.getUIContext().px2vp(this.getUIContext().lpx2px(metrics.value));
}
} catch (error) {
console.error('Failed to parse length because the type of resource is invalid');
return undefined;
}
}
return undefined;
}
initialRender() {
this.observeComponentCreation2((elmtId, isInitialRender) => {
If.create();
if (this.isChipExist) {
this.ifElseBranchUpdateFunction(0, () => {
this.ChipBuilder.bind(this)();
});
} else {
this.ifElseBranchUpdateFunction(1, () => {});
}
}, If);
If.pop();
}
rerender() {
this.updateDirtyElements();
}
}
export default {
Chip,
ChipSize,
AccessibilitySelectedType,
};
