• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the 'License');
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an 'AS IS' BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16if (!('finalizeConstruction' in ViewPU.prototype)) {
17  Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {});
18}
19
20const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
21const measure = requireNapi('measure');
22const mediaquery = requireNapi('mediaquery');
23const resourceManager = requireNapi('resourceManager');
24const componentUtils = requireNapi('arkui.componentUtils');
25const hilog = requireNapi('hilog');
26const ColorMetrics = requireNapi('arkui.node').ColorMetrics;
27const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
28const LengthUnit = requireNapi('arkui.node').LengthUnit;
29
30const RESOURCE_TYPE_STRING = 10003;
31const RESOURCE_TYPE_FLOAT = 10002;
32const RESOURCE_TYPE_INTEGER = 10007;
33export var ChipSize;
34(function (ChipSize) {
35  ChipSize['NORMAL'] = 'NORMAL';
36  ChipSize['SMALL'] = 'SMALL';
37})(ChipSize || (ChipSize = {}));
38var IconType;
39(function (IconType) {
40  IconType['PREFIX_ICON'] = 'PREFIXICON';
41  IconType['SUFFIX_ICON'] = 'SUFFIXICON';
42  IconType['PREFIX_SYMBOL'] = 'PREFIXSYMBOL';
43  IconType['SUFFIX_SYMBOL'] = 'SUFFIXSYMBOL';
44})(IconType || (IconType = {}));
45var BreakPointsType;
46(function (BreakPointsType) {
47  BreakPointsType['SM'] = 'SM';
48  BreakPointsType['MD'] = 'MD';
49  BreakPointsType['LG'] = 'LG';
50})(BreakPointsType || (BreakPointsType = {}));
51export var AccessibilitySelectedType;
52(function (AccessibilitySelectedType) {
53  AccessibilitySelectedType[(AccessibilitySelectedType['CLICKED'] = 0)] = 'CLICKED';
54  AccessibilitySelectedType[(AccessibilitySelectedType['CHECKED'] = 1)] = 'CHECKED';
55  AccessibilitySelectedType[(AccessibilitySelectedType['SELECTED'] = 2)] = 'SELECTED';
56})(AccessibilitySelectedType || (AccessibilitySelectedType = {}));
57const noop = () => {};
58export function Chip(options, parent = null) {
59  const __options__ = options;
60  {
61    (parent ? parent : this).observeComponentCreation2(
62      (elmtId, isInitialRender, options = __options__) => {
63        if (isInitialRender) {
64          let componentCall = new ChipComponent(
65            parent ? parent : this,
66            {
67              chipSize: options.size,
68              prefixIcon: options.prefixIcon,
69              prefixSymbol: options.prefixSymbol,
70              label: options.label,
71              suffixIcon: options.suffixIcon,
72              suffixSymbol: options.suffixSymbol,
73              suffixSymbolOptions: options.suffixSymbolOptions,
74              allowClose: options.allowClose,
75              closeOptions: options.closeOptions,
76              chipEnabled: options.enabled,
77              chipActivated: options.activated,
78              chipNodeBackgroundColor: options.backgroundColor,
79              chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
80              chipNodeRadius: options.borderRadius,
81              chipDirection: options.direction,
82              chipAccessibilitySelectedType: options.accessibilitySelectedType,
83              chipAccessibilityDescription: options.accessibilityDescription,
84              chipAccessibilityLevel: options.accessibilityLevel,
85              onClose: options.onClose,
86              onClicked: options.onClicked,
87            },
88            undefined,
89            elmtId,
90            () => {},
91            { page: 'library/src/main/ets/components/MainPage.ets', line: 231, col: 3 }
92          );
93          ViewPU.create(componentCall);
94          let paramsLambda = () => {
95            return {
96              chipSize: options.size,
97              prefixIcon: options.prefixIcon,
98              prefixSymbol: options.prefixSymbol,
99              label: options.label,
100              suffixIcon: options.suffixIcon,
101              suffixSymbol: options.suffixSymbol,
102              suffixSymbolOptions: options.suffixSymbolOptions,
103              allowClose: options.allowClose,
104              closeOptions: options.closeOptions,
105              chipEnabled: options.enabled,
106              chipActivated: options.activated,
107              chipNodeBackgroundColor: options.backgroundColor,
108              chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
109              chipNodeRadius: options.borderRadius,
110              chipDirection: options.direction,
111              chipAccessibilitySelectedType: options.accessibilitySelectedType,
112              chipAccessibilityDescription: options.accessibilityDescription,
113              chipAccessibilityLevel: options.accessibilityLevel,
114              onClose: options.onClose,
115              onClicked: options.onClicked,
116            };
117          };
118          componentCall.paramsGenerator_ = paramsLambda;
119        } else {
120          (parent ? parent : this).updateStateVarsOfChildByElmtId(elmtId, {
121            chipSize: options.size,
122            prefixIcon: options.prefixIcon,
123            prefixSymbol: options.prefixSymbol,
124            label: options.label,
125            suffixIcon: options.suffixIcon,
126            suffixSymbol: options.suffixSymbol,
127            suffixSymbolOptions: options.suffixSymbolOptions,
128            allowClose: options.allowClose,
129            closeOptions: options.closeOptions,
130            chipEnabled: options.enabled,
131            chipActivated: options.activated,
132            chipNodeBackgroundColor: options.backgroundColor,
133            chipNodeActivatedBackgroundColor: options.activatedBackgroundColor,
134            chipNodeRadius: options.borderRadius,
135            chipDirection: options.direction,
136            chipAccessibilitySelectedType: options.accessibilitySelectedType,
137            chipAccessibilityDescription: options.accessibilityDescription,
138            chipAccessibilityLevel: options.accessibilityLevel,
139          });
140        }
141      },
142      { name: 'ChipComponent' }
143    );
144  }
145}
146function isValidString(dimension, regex) {
147  const matches = dimension.match(regex);
148  if (!matches || matches.length < 3) {
149    return false;
150  }
151  const value = Number.parseFloat(matches[1]);
152  return value >= 0;
153}
154function isValidDimensionString(dimension) {
155  return isValidString(dimension, new RegExp('(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$', 'i'));
156}
157function isValidResource(context, value) {
158  const resourceManager = context?.resourceManager;
159  if (value === void 0 || value === null || resourceManager === void 0) {
160    return false;
161  }
162  if (
163    value.type !== RESOURCE_TYPE_STRING &&
164    value.type !== RESOURCE_TYPE_INTEGER &&
165    value.type !== RESOURCE_TYPE_FLOAT
166  ) {
167    return false;
168  }
169  if (value.type === RESOURCE_TYPE_INTEGER || value.type === RESOURCE_TYPE_FLOAT) {
170    if (resourceManager.getNumber(value.id) >= 0) {
171      return true;
172    } else {
173      return false;
174    }
175  }
176  if (value.type === RESOURCE_TYPE_STRING && !isValidDimensionString(resourceManager.getStringSync(value.id))) {
177    return false;
178  } else {
179    return true;
180  }
181}
182export class ChipComponent extends ViewPU {
183  constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
184    super(parent, __localStorage, elmtId, extraInfo);
185    if (typeof paramsLambda === 'function') {
186      this.paramsGenerator_ = paramsLambda;
187    }
188    this.theme = {
189      prefixIcon: {
190        normalSize: {
191          width: {
192            id: -1,
193            type: 10002,
194            params: ['sys.float.chip_normal_icon_size'],
195            bundleName: '__harDefaultBundleName__',
196            moduleName: '__harDefaultModuleName__',
197          },
198          height: {
199            id: -1,
200            type: 10002,
201            params: ['sys.float.chip_normal_icon_size'],
202            bundleName: '__harDefaultBundleName__',
203            moduleName: '__harDefaultModuleName__',
204          },
205        },
206        smallSize: {
207          width: {
208            id: -1,
209            type: 10002,
210            params: ['sys.float.chip_small_icon_size'],
211            bundleName: '__harDefaultBundleName__',
212            moduleName: '__harDefaultModuleName__',
213          },
214          height: {
215            id: -1,
216            type: 10002,
217            params: ['sys.float.chip_small_icon_size'],
218            bundleName: '__harDefaultBundleName__',
219            moduleName: '__harDefaultModuleName__',
220          },
221        },
222        fillColor: {
223          id: -1,
224          type: 10001,
225          params: ['sys.color.chip_usually_icon_color'],
226          bundleName: '__harDefaultBundleName__',
227          moduleName: '__harDefaultModuleName__',
228        },
229        activatedFillColor: {
230          id: -1,
231          type: 10001,
232          params: ['sys.color.chip_active_icon_color'],
233          bundleName: '__harDefaultBundleName__',
234          moduleName: '__harDefaultModuleName__',
235        },
236        focusFillColor: {
237          id: -1,
238          type: 10001,
239          params: ['sys.color.chip_icon_focus_fill'],
240          bundleName: '__harDefaultBundleName__',
241          moduleName: '__harDefaultModuleName__',
242        },
243        focusActivatedColor: {
244          id: -1,
245          type: 10001,
246          params: ['sys.color.chip_icon_activated_focus_color'],
247          bundleName: '__harDefaultBundleName__',
248          moduleName: '__harDefaultModuleName__',
249        },
250      },
251      label: {
252        normalFontSize: {
253          id: -1,
254          type: 10002,
255          params: ['sys.float.chip_normal_font_size'],
256          bundleName: '__harDefaultBundleName__',
257          moduleName: '__harDefaultModuleName__',
258        },
259        smallFontSize: {
260          id: -1,
261          type: 10002,
262          params: ['sys.float.chip_small_font_size'],
263          bundleName: '__harDefaultBundleName__',
264          moduleName: '__harDefaultModuleName__',
265        },
266        focusFontColor: {
267          id: -1,
268          type: 10001,
269          params: ['sys.color.chip_focus_text'],
270          bundleName: '__harDefaultBundleName__',
271          moduleName: '__harDefaultModuleName__',
272        },
273        focusActiveFontColor: {
274          id: -1,
275          type: 10001,
276          params: ['sys.color.chip_activated_focus_font_color'],
277          bundleName: '__harDefaultBundleName__',
278          moduleName: '__harDefaultModuleName__',
279        },
280        fontColor: {
281          id: -1,
282          type: 10001,
283          params: ['sys.color.chip_font_color'],
284          bundleName: '__harDefaultBundleName__',
285          moduleName: '__harDefaultModuleName__',
286        },
287        activatedFontColor: {
288          id: -1,
289          type: 10001,
290          params: ['sys.color.chip_activated_fontcolor'],
291          bundleName: '__harDefaultBundleName__',
292          moduleName: '__harDefaultModuleName__',
293        },
294        fontFamily: 'HarmonyOS Sans',
295        fontWeight: {
296          id: -1,
297          type: 10002,
298          params: ['sys.float.chip_text_font_weight'],
299          bundleName: '__harDefaultBundleName__',
300          moduleName: '__harDefaultModuleName__',
301        },
302        normalMargin: {
303          left: 6,
304          right: 6,
305          top: 0,
306          bottom: 0,
307        },
308        smallMargin: {
309          left: 4,
310          right: 4,
311          top: 0,
312          bottom: 0,
313        },
314        defaultFontSize: 14,
315        localizedNormalMargin: {
316          start: LengthMetrics.resource({
317            id: -1,
318            type: 10002,
319            params: ['sys.float.chip_normal_text_margin'],
320            bundleName: '__harDefaultBundleName__',
321            moduleName: '__harDefaultModuleName__',
322          }),
323          end: LengthMetrics.resource({
324            id: -1,
325            type: 10002,
326            params: ['sys.float.chip_normal_text_margin'],
327            bundleName: '__harDefaultBundleName__',
328            moduleName: '__harDefaultModuleName__',
329          }),
330          top: LengthMetrics.vp(0),
331          bottom: LengthMetrics.vp(0),
332        },
333        localizedSmallMargin: {
334          start: LengthMetrics.resource({
335            id: -1,
336            type: 10002,
337            params: ['sys.float.chip_small_text_margin'],
338            bundleName: '__harDefaultBundleName__',
339            moduleName: '__harDefaultModuleName__',
340          }),
341          end: LengthMetrics.resource({
342            id: -1,
343            type: 10002,
344            params: ['sys.float.chip_small_text_margin'],
345            bundleName: '__harDefaultBundleName__',
346            moduleName: '__harDefaultModuleName__',
347          }),
348          top: LengthMetrics.vp(0),
349          bottom: LengthMetrics.vp(0),
350        },
351      },
352      suffixIcon: {
353        normalSize: {
354          width: {
355            id: -1,
356            type: 10002,
357            params: ['sys.float.chip_normal_icon_size'],
358            bundleName: '__harDefaultBundleName__',
359            moduleName: '__harDefaultModuleName__',
360          },
361          height: {
362            id: -1,
363            type: 10002,
364            params: ['sys.float.chip_normal_icon_size'],
365            bundleName: '__harDefaultBundleName__',
366            moduleName: '__harDefaultModuleName__',
367          },
368        },
369        smallSize: {
370          width: {
371            id: -1,
372            type: 10002,
373            params: ['sys.float.chip_small_icon_size'],
374            bundleName: '__harDefaultBundleName__',
375            moduleName: '__harDefaultModuleName__',
376          },
377          height: {
378            id: -1,
379            type: 10002,
380            params: ['sys.float.chip_small_icon_size'],
381            bundleName: '__harDefaultBundleName__',
382            moduleName: '__harDefaultModuleName__',
383          },
384        },
385        fillColor: {
386          id: -1,
387          type: 10001,
388          params: ['sys.color.chip_usually_icon_color'],
389          bundleName: '__harDefaultBundleName__',
390          moduleName: '__harDefaultModuleName__',
391        },
392        activatedFillColor: {
393          id: -1,
394          type: 10001,
395          params: ['sys.color.chip_active_icon_color'],
396          bundleName: '__harDefaultBundleName__',
397          moduleName: '__harDefaultModuleName__',
398        },
399        focusFillColor: {
400          id: -1,
401          type: 10001,
402          params: ['sys.color.chip_icon_focus_fill'],
403          bundleName: '__harDefaultBundleName__',
404          moduleName: '__harDefaultModuleName__',
405        },
406        focusActivatedColor: {
407          id: -1,
408          type: 10001,
409          params: ['sys.color.chip_icon_activated_focus_color'],
410          bundleName: '__harDefaultBundleName__',
411          moduleName: '__harDefaultModuleName__',
412        },
413        defaultDeleteIcon: {
414          id: -1,
415          type: 20000,
416          params: ['sys.media.ohos_ic_public_cancel', 16, 16],
417          bundleName: '__harDefaultBundleName__',
418          moduleName: '__harDefaultModuleName__',
419        },
420        focusable: false,
421        isShowMargin: {
422          id: -1,
423          type: 10002,
424          params: ['sys.float.chip_show_close_icon_margin'],
425          bundleName: '__harDefaultBundleName__',
426          moduleName: '__harDefaultModuleName__',
427        },
428      },
429      defaultSymbol: {
430        normalFontColor: [
431          {
432            id: -1,
433            type: 10001,
434            params: ['sys.color.ohos_id_color_secondary'],
435            bundleName: '__harDefaultBundleName__',
436            moduleName: '__harDefaultModuleName__',
437          },
438        ],
439        activatedFontColor: [
440          {
441            id: -1,
442            type: 10001,
443            params: ['sys.color.ohos_id_color_text_primary_contrary'],
444            bundleName: '__harDefaultBundleName__',
445            moduleName: '__harDefaultModuleName__',
446          },
447        ],
448        smallSymbolFontSize: LengthMetrics.resource({
449          id: -1,
450          type: 10002,
451          params: ['sys.float.chip_small_icon_size'],
452          bundleName: '__harDefaultBundleName__',
453          moduleName: '__harDefaultModuleName__',
454        }).value,
455        normalSymbolFontSize: LengthMetrics.resource({
456          id: -1,
457          type: 10002,
458          params: ['sys.float.chip_normal_icon_size'],
459          bundleName: '__harDefaultBundleName__',
460          moduleName: '__harDefaultModuleName__',
461        }).value,
462        defaultEffect: -1,
463      },
464      chipNode: {
465        suitAgeScale: 1.75,
466        minLabelWidth: 12,
467        normalHeight: {
468          id: -1,
469          type: 10002,
470          params: ['sys.float.chip_normal_height'],
471          bundleName: '__harDefaultBundleName__',
472          moduleName: '__harDefaultModuleName__',
473        },
474        smallHeight: {
475          id: -1,
476          type: 10002,
477          params: ['sys.float.chip_small_height'],
478          bundleName: '__harDefaultBundleName__',
479          moduleName: '__harDefaultModuleName__',
480        },
481        enabled: true,
482        activated: false,
483        backgroundColor: {
484          id: -1,
485          type: 10001,
486          params: ['sys.color.chip_background_color'],
487          bundleName: '__harDefaultBundleName__',
488          moduleName: '__harDefaultModuleName__',
489        },
490        activatedBackgroundColor: {
491          id: -1,
492          type: 10001,
493          params: ['sys.color.chip_container_activated_color'],
494          bundleName: '__harDefaultBundleName__',
495          moduleName: '__harDefaultModuleName__',
496        },
497        focusOutlineColor: {
498          id: -1,
499          type: 10001,
500          params: ['sys.color.ohos_id_color_focused_outline'],
501          bundleName: '__harDefaultBundleName__',
502          moduleName: '__harDefaultModuleName__',
503        },
504        focusOutlineMargin: 2,
505        borderColor: {
506          id: -1,
507          type: 10001,
508          params: ['sys.color.chip_border_color'],
509          bundleName: '__harDefaultBundleName__',
510          moduleName: '__harDefaultModuleName__',
511        },
512        defaultBorderWidth: {
513          id: -1,
514          type: 10002,
515          params: ['sys.float.chip_border_width'],
516          bundleName: '__harDefaultBundleName__',
517          moduleName: '__harDefaultModuleName__',
518        },
519        activatedBorderColor: {
520          id: -1,
521          type: 10001,
522          params: ['sys.color.chip_activated_border_color'],
523          bundleName: '__harDefaultBundleName__',
524          moduleName: '__harDefaultModuleName__',
525        },
526        normalBorderRadius: {
527          id: -1,
528          type: 10002,
529          params: ['sys.float.chip_border_radius_normal'],
530          bundleName: '__harDefaultBundleName__',
531          moduleName: '__harDefaultModuleName__',
532        },
533        smallBorderRadius: {
534          id: -1,
535          type: 10002,
536          params: ['sys.float.chip_border_radius_small'],
537          bundleName: '__harDefaultBundleName__',
538          moduleName: '__harDefaultModuleName__',
539        },
540        borderWidth: 2,
541        focusBtnScaleX: {
542          id: -1,
543          type: 10002,
544          params: ['sys.float.chip_focused_btn_scale'],
545          bundleName: '__harDefaultBundleName__',
546          moduleName: '__harDefaultModuleName__',
547        },
548        focusBtnScaleY: {
549          id: -1,
550          type: 10002,
551          params: ['sys.float.chip_focused_btn_scale'],
552          bundleName: '__harDefaultBundleName__',
553          moduleName: '__harDefaultModuleName__',
554        },
555        localizedNormalPadding: {
556          start: LengthMetrics.resource({
557            id: -1,
558            type: 10002,
559            params: ['sys.float.chip_normal_text_padding'],
560            bundleName: '__harDefaultBundleName__',
561            moduleName: '__harDefaultModuleName__',
562          }),
563          end: LengthMetrics.resource({
564            id: -1,
565            type: 10002,
566            params: ['sys.float.chip_normal_text_padding'],
567            bundleName: '__harDefaultBundleName__',
568            moduleName: '__harDefaultModuleName__',
569          }),
570          top: LengthMetrics.vp(4),
571          bottom: LengthMetrics.vp(4),
572        },
573        localizedSmallPadding: {
574          start: LengthMetrics.resource({
575            id: -1,
576            type: 10002,
577            params: ['sys.float.chip_small_text_padding'],
578            bundleName: '__harDefaultBundleName__',
579            moduleName: '__harDefaultModuleName__',
580          }),
581          end: LengthMetrics.resource({
582            id: -1,
583            type: 10002,
584            params: ['sys.float.chip_small_text_padding'],
585            bundleName: '__harDefaultBundleName__',
586            moduleName: '__harDefaultModuleName__',
587          }),
588          top: LengthMetrics.vp(4),
589          bottom: LengthMetrics.vp(4),
590        },
591        hoverBlendColor: {
592          id: -1,
593          type: 10001,
594          params: ['sys.color.chip_hover_color'],
595          bundleName: '__harDefaultBundleName__',
596          moduleName: '__harDefaultModuleName__',
597        },
598        pressedBlendColor: {
599          id: -1,
600          type: 10001,
601          params: ['sys.color.chip_press_color'],
602          bundleName: '__harDefaultBundleName__',
603          moduleName: '__harDefaultModuleName__',
604        },
605        focusBgColor: {
606          id: -1,
607          type: 10001,
608          params: ['sys.color.chip_focus_color'],
609          bundleName: '__harDefaultBundleName__',
610          moduleName: '__harDefaultModuleName__',
611        },
612        focusActivatedBgColor: {
613          id: -1,
614          type: 10001,
615          params: ['sys.color.chip_container_activated_focus_color'],
616          bundleName: '__harDefaultBundleName__',
617          moduleName: '__harDefaultModuleName__',
618        },
619        opacity: { normal: 1, hover: 0.95, pressed: 0.9 },
620        normalShadowStyle: {
621          id: -1,
622          type: 10002,
623          params: ['sys.float.chip_normal_shadow_style'],
624          bundleName: '__harDefaultBundleName__',
625          moduleName: '__harDefaultModuleName__',
626        },
627        smallShadowStyle: {
628          id: -1,
629          type: 10002,
630          params: ['sys.float.chip_small_shadow_style'],
631          bundleName: '__harDefaultBundleName__',
632          moduleName: '__harDefaultModuleName__',
633        },
634        breakPointConstraintWidth: {
635          breakPointMinWidth: 128,
636          breakPointSmMaxWidth: 156,
637          breakPointMdMaxWidth: 280,
638          breakPointLgMaxWidth: 400,
639        },
640      },
641    };
642    this.__chipSize = new SynchedPropertyObjectOneWayPU(params.chipSize, this, 'chipSize');
643    this.__allowClose = new SynchedPropertySimpleOneWayPU(params.allowClose, this, 'allowClose');
644    this.__closeOptions = new SynchedPropertyObjectOneWayPU(params.closeOptions, this, 'closeOptions');
645    this.__chipDirection = new SynchedPropertySimpleOneWayPU(params.chipDirection, this, 'chipDirection');
646    this.__prefixIcon = new SynchedPropertyObjectOneWayPU(params.prefixIcon, this, 'prefixIcon');
647    this.__prefixSymbol = new SynchedPropertyObjectOneWayPU(params.prefixSymbol, this, 'prefixSymbol');
648    this.__label = new SynchedPropertyObjectOneWayPU(params.label, this, 'label');
649    this.__suffixIcon = new SynchedPropertyObjectOneWayPU(params.suffixIcon, this, 'suffixIcon');
650    this.__suffixSymbol = new SynchedPropertyObjectOneWayPU(params.suffixSymbol, this, 'suffixSymbol');
651    this.__suffixSymbolOptions = new SynchedPropertyObjectOneWayPU(
652      params.suffixSymbolOptions,
653      this,
654      'suffixSymbolOptions'
655    );
656    this.__chipNodeBackgroundColor = new SynchedPropertyObjectOneWayPU(
657      params.chipNodeBackgroundColor,
658      this,
659      'chipNodeBackgroundColor'
660    );
661    this.__chipNodeActivatedBackgroundColor = new SynchedPropertyObjectOneWayPU(
662      params.chipNodeActivatedBackgroundColor,
663      this,
664      'chipNodeActivatedBackgroundColor'
665    );
666    this.__isHovering = new ObservedPropertySimplePU(false, this, 'isHovering');
667    this.__chipNodeRadius = new SynchedPropertyObjectOneWayPU(params.chipNodeRadius, this, 'chipNodeRadius');
668    this.__chipEnabled = new SynchedPropertySimpleOneWayPU(params.chipEnabled, this, 'chipEnabled');
669    this.__chipActivated = new SynchedPropertySimpleOneWayPU(params.chipActivated, this, 'chipActivated');
670    this.__chipAccessibilitySelectedType = new SynchedPropertySimpleOneWayPU(
671      params.chipAccessibilitySelectedType,
672      this,
673      'chipAccessibilitySelectedType'
674    );
675    this.__chipAccessibilityDescription = new SynchedPropertyObjectOneWayPU(
676      params.chipAccessibilityDescription,
677      this,
678      'chipAccessibilityDescription'
679    );
680    this.__chipAccessibilityLevel = new SynchedPropertySimpleOneWayPU(
681      params.chipAccessibilityLevel,
682      this,
683      'chipAccessibilityLevel'
684    );
685    this.__isHover = new ObservedPropertySimplePU(false, this, 'isHover');
686    this.__chipScale = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, 'chipScale');
687    this.__chipOpacity = new ObservedPropertySimplePU(1, this, 'chipOpacity');
688    this.__chipBlendColor = new ObservedPropertyObjectPU(Color.Transparent, this, 'chipBlendColor');
689    this.__deleteChip = new ObservedPropertySimplePU(false, this, 'deleteChip');
690    this.__chipNodeOnFocus = new ObservedPropertySimplePU(false, this, 'chipNodeOnFocus');
691    this.__useDefaultSuffixIcon = new ObservedPropertySimplePU(false, this, 'useDefaultSuffixIcon');
692    this.chipNodeSize = {};
693    this.onClose = noop;
694    this.onClicked = noop;
695    this.__suffixIconOnFocus = new ObservedPropertySimplePU(false, this, 'suffixIconOnFocus');
696    this.__chipBreakPoints = new ObservedPropertySimplePU(BreakPointsType.SM, this, 'chipBreakPoints');
697    this.smListener = mediaquery.matchMediaSync('(0vp<width) and (width<600vp)');
698    this.mdListener = mediaquery.matchMediaSync('(600vp<=width) and (width<840vp)');
699    this.lgListener = mediaquery.matchMediaSync('(840vp<=width)');
700    this.isSuffixIconFocusStyleCustomized = this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 0;
701    this.__isShowPressedBackGroundColor = new ObservedPropertySimplePU(false, this, 'isShowPressedBackGroundColor');
702    this.__fontSizeScale = new ObservedPropertyObjectPU(0, this, 'fontSizeScale');
703    this.__fontWeightScale = new ObservedPropertyObjectPU(0, this, 'fontWeightScale');
704    this.callbacks = {
705      onConfigurationUpdated: configuration => {
706        this.fontSizeScale = configuration.fontSizeScale;
707        this.fontWeightScale = configuration.fontWeightScale;
708      },
709      onMemoryLevel() {},
710    };
711    this.callbackId = undefined;
712    this.__prefixSymbolWidth = new ObservedPropertyObjectPU(
713      this.toVp(componentUtils.getRectangleById('PrefixSymbolGlyph')?.size?.width),
714      this,
715      'prefixSymbolWidth'
716    );
717    this.__suffixSymbolWidth = new ObservedPropertyObjectPU(
718      this.toVp(componentUtils.getRectangleById('SuffixSymbolGlyph')?.size?.width),
719      this,
720      'suffixSymbolWidth'
721    );
722    this.__allowCloseSymbolWidth = new ObservedPropertyObjectPU(
723      this.toVp(componentUtils.getRectangleById('AllowCloseSymbolGlyph')?.size?.width),
724      this,
725      'allowCloseSymbolWidth'
726    );
727    this.__symbolEffect = new ObservedPropertyObjectPU(new SymbolEffect(), this, 'symbolEffect');
728    this.setInitiallyProvidedValue(params);
729    this.finalizeConstruction();
730  }
731  setInitiallyProvidedValue(params) {
732    if (params.theme !== undefined) {
733      this.theme = params.theme;
734    }
735    if (params.chipSize === undefined) {
736      this.__chipSize.set(ChipSize.NORMAL);
737    }
738    if (params.allowClose === undefined) {
739      this.__allowClose.set(true);
740    }
741    if (params.chipDirection === undefined) {
742      this.__chipDirection.set(Direction.Auto);
743    }
744    if (params.prefixIcon === undefined) {
745      this.__prefixIcon.set({ src: '' });
746    }
747    if (params.label === undefined) {
748      this.__label.set({ text: '' });
749    }
750    if (params.suffixIcon === undefined) {
751      this.__suffixIcon.set({ src: '' });
752    }
753    if (params.chipNodeBackgroundColor === undefined) {
754      this.__chipNodeBackgroundColor.set(this.theme.chipNode.backgroundColor);
755    }
756    if (params.chipNodeActivatedBackgroundColor === undefined) {
757      this.__chipNodeActivatedBackgroundColor.set(this.theme.chipNode.activatedBackgroundColor);
758    }
759    if (params.isHovering !== undefined) {
760      this.isHovering = params.isHovering;
761    }
762    if (params.chipNodeRadius === undefined) {
763      this.__chipNodeRadius.set(void 0);
764    }
765    if (params.chipEnabled === undefined) {
766      this.__chipEnabled.set(true);
767    }
768    if (params.isHover !== undefined) {
769      this.isHover = params.isHover;
770    }
771    if (params.chipScale !== undefined) {
772      this.chipScale = params.chipScale;
773    }
774    if (params.chipOpacity !== undefined) {
775      this.chipOpacity = params.chipOpacity;
776    }
777    if (params.chipBlendColor !== undefined) {
778      this.chipBlendColor = params.chipBlendColor;
779    }
780    if (params.deleteChip !== undefined) {
781      this.deleteChip = params.deleteChip;
782    }
783    if (params.chipNodeOnFocus !== undefined) {
784      this.chipNodeOnFocus = params.chipNodeOnFocus;
785    }
786    if (params.useDefaultSuffixIcon !== undefined) {
787      this.useDefaultSuffixIcon = params.useDefaultSuffixIcon;
788    }
789    if (params.chipNodeSize !== undefined) {
790      this.chipNodeSize = params.chipNodeSize;
791    }
792    if (params.onClose !== undefined) {
793      this.onClose = params.onClose;
794    }
795    if (params.onClicked !== undefined) {
796      this.onClicked = params.onClicked;
797    }
798    if (params.suffixIconOnFocus !== undefined) {
799      this.suffixIconOnFocus = params.suffixIconOnFocus;
800    }
801    if (params.chipBreakPoints !== undefined) {
802      this.chipBreakPoints = params.chipBreakPoints;
803    }
804    if (params.smListener !== undefined) {
805      this.smListener = params.smListener;
806    }
807    if (params.mdListener !== undefined) {
808      this.mdListener = params.mdListener;
809    }
810    if (params.lgListener !== undefined) {
811      this.lgListener = params.lgListener;
812    }
813    if (params.isSuffixIconFocusStyleCustomized !== undefined) {
814      this.isSuffixIconFocusStyleCustomized = params.isSuffixIconFocusStyleCustomized;
815    }
816    if (params.isShowPressedBackGroundColor !== undefined) {
817      this.isShowPressedBackGroundColor = params.isShowPressedBackGroundColor;
818    }
819    if (params.fontSizeScale !== undefined) {
820      this.fontSizeScale = params.fontSizeScale;
821    }
822    if (params.fontWeightScale !== undefined) {
823      this.fontWeightScale = params.fontWeightScale;
824    }
825    if (params.callbacks !== undefined) {
826      this.callbacks = params.callbacks;
827    }
828    if (params.callbackId !== undefined) {
829      this.callbackId = params.callbackId;
830    }
831    if (params.prefixSymbolWidth !== undefined) {
832      this.prefixSymbolWidth = params.prefixSymbolWidth;
833    }
834    if (params.suffixSymbolWidth !== undefined) {
835      this.suffixSymbolWidth = params.suffixSymbolWidth;
836    }
837    if (params.allowCloseSymbolWidth !== undefined) {
838      this.allowCloseSymbolWidth = params.allowCloseSymbolWidth;
839    }
840    if (params.symbolEffect !== undefined) {
841      this.symbolEffect = params.symbolEffect;
842    }
843  }
844  updateStateVars(params) {
845    this.__chipSize.reset(params.chipSize);
846    this.__allowClose.reset(params.allowClose);
847    this.__closeOptions.reset(params.closeOptions);
848    this.__chipDirection.reset(params.chipDirection);
849    this.__prefixIcon.reset(params.prefixIcon);
850    this.__prefixSymbol.reset(params.prefixSymbol);
851    this.__label.reset(params.label);
852    this.__suffixIcon.reset(params.suffixIcon);
853    this.__suffixSymbol.reset(params.suffixSymbol);
854    this.__suffixSymbolOptions.reset(params.suffixSymbolOptions);
855    this.__chipNodeBackgroundColor.reset(params.chipNodeBackgroundColor);
856    this.__chipNodeActivatedBackgroundColor.reset(params.chipNodeActivatedBackgroundColor);
857    this.__chipNodeRadius.reset(params.chipNodeRadius);
858    this.__chipEnabled.reset(params.chipEnabled);
859    this.__chipActivated.reset(params.chipActivated);
860    this.__chipAccessibilitySelectedType.reset(params.chipAccessibilitySelectedType);
861    this.__chipAccessibilityDescription.reset(params.chipAccessibilityDescription);
862    this.__chipAccessibilityLevel.reset(params.chipAccessibilityLevel);
863  }
864  purgeVariableDependenciesOnElmtId(rmElmtId) {
865    this.__chipSize.purgeDependencyOnElmtId(rmElmtId);
866    this.__allowClose.purgeDependencyOnElmtId(rmElmtId);
867    this.__closeOptions.purgeDependencyOnElmtId(rmElmtId);
868    this.__chipDirection.purgeDependencyOnElmtId(rmElmtId);
869    this.__prefixIcon.purgeDependencyOnElmtId(rmElmtId);
870    this.__prefixSymbol.purgeDependencyOnElmtId(rmElmtId);
871    this.__label.purgeDependencyOnElmtId(rmElmtId);
872    this.__suffixIcon.purgeDependencyOnElmtId(rmElmtId);
873    this.__suffixSymbol.purgeDependencyOnElmtId(rmElmtId);
874    this.__suffixSymbolOptions.purgeDependencyOnElmtId(rmElmtId);
875    this.__chipNodeBackgroundColor.purgeDependencyOnElmtId(rmElmtId);
876    this.__chipNodeActivatedBackgroundColor.purgeDependencyOnElmtId(rmElmtId);
877    this.__isHovering.purgeDependencyOnElmtId(rmElmtId);
878    this.__chipNodeRadius.purgeDependencyOnElmtId(rmElmtId);
879    this.__chipEnabled.purgeDependencyOnElmtId(rmElmtId);
880    this.__chipActivated.purgeDependencyOnElmtId(rmElmtId);
881    this.__chipAccessibilitySelectedType.purgeDependencyOnElmtId(rmElmtId);
882    this.__chipAccessibilityDescription.purgeDependencyOnElmtId(rmElmtId);
883    this.__chipAccessibilityLevel.purgeDependencyOnElmtId(rmElmtId);
884    this.__isHover.purgeDependencyOnElmtId(rmElmtId);
885    this.__chipScale.purgeDependencyOnElmtId(rmElmtId);
886    this.__chipOpacity.purgeDependencyOnElmtId(rmElmtId);
887    this.__chipBlendColor.purgeDependencyOnElmtId(rmElmtId);
888    this.__deleteChip.purgeDependencyOnElmtId(rmElmtId);
889    this.__chipNodeOnFocus.purgeDependencyOnElmtId(rmElmtId);
890    this.__useDefaultSuffixIcon.purgeDependencyOnElmtId(rmElmtId);
891    this.__suffixIconOnFocus.purgeDependencyOnElmtId(rmElmtId);
892    this.__chipBreakPoints.purgeDependencyOnElmtId(rmElmtId);
893    this.__isShowPressedBackGroundColor.purgeDependencyOnElmtId(rmElmtId);
894    this.__fontSizeScale.purgeDependencyOnElmtId(rmElmtId);
895    this.__fontWeightScale.purgeDependencyOnElmtId(rmElmtId);
896    this.__prefixSymbolWidth.purgeDependencyOnElmtId(rmElmtId);
897    this.__suffixSymbolWidth.purgeDependencyOnElmtId(rmElmtId);
898    this.__allowCloseSymbolWidth.purgeDependencyOnElmtId(rmElmtId);
899    this.__symbolEffect.purgeDependencyOnElmtId(rmElmtId);
900  }
901  aboutToBeDeleted() {
902    this.__chipSize.aboutToBeDeleted();
903    this.__allowClose.aboutToBeDeleted();
904    this.__closeOptions.aboutToBeDeleted();
905    this.__chipDirection.aboutToBeDeleted();
906    this.__prefixIcon.aboutToBeDeleted();
907    this.__prefixSymbol.aboutToBeDeleted();
908    this.__label.aboutToBeDeleted();
909    this.__suffixIcon.aboutToBeDeleted();
910    this.__suffixSymbol.aboutToBeDeleted();
911    this.__suffixSymbolOptions.aboutToBeDeleted();
912    this.__chipNodeBackgroundColor.aboutToBeDeleted();
913    this.__chipNodeActivatedBackgroundColor.aboutToBeDeleted();
914    this.__isHovering.aboutToBeDeleted();
915    this.__chipNodeRadius.aboutToBeDeleted();
916    this.__chipEnabled.aboutToBeDeleted();
917    this.__chipActivated.aboutToBeDeleted();
918    this.__chipAccessibilitySelectedType.aboutToBeDeleted();
919    this.__chipAccessibilityDescription.aboutToBeDeleted();
920    this.__chipAccessibilityLevel.aboutToBeDeleted();
921    this.__isHover.aboutToBeDeleted();
922    this.__chipScale.aboutToBeDeleted();
923    this.__chipOpacity.aboutToBeDeleted();
924    this.__chipBlendColor.aboutToBeDeleted();
925    this.__deleteChip.aboutToBeDeleted();
926    this.__chipNodeOnFocus.aboutToBeDeleted();
927    this.__useDefaultSuffixIcon.aboutToBeDeleted();
928    this.__suffixIconOnFocus.aboutToBeDeleted();
929    this.__chipBreakPoints.aboutToBeDeleted();
930    this.__isShowPressedBackGroundColor.aboutToBeDeleted();
931    this.__fontSizeScale.aboutToBeDeleted();
932    this.__fontWeightScale.aboutToBeDeleted();
933    this.__prefixSymbolWidth.aboutToBeDeleted();
934    this.__suffixSymbolWidth.aboutToBeDeleted();
935    this.__allowCloseSymbolWidth.aboutToBeDeleted();
936    this.__symbolEffect.aboutToBeDeleted();
937    SubscriberManager.Get().delete(this.id__());
938    this.aboutToBeDeletedInternal();
939  }
940  get chipSize() {
941    return this.__chipSize.get();
942  }
943  set chipSize(newValue) {
944    this.__chipSize.set(newValue);
945  }
946  get allowClose() {
947    return this.__allowClose.get();
948  }
949  set allowClose(newValue) {
950    this.__allowClose.set(newValue);
951  }
952  get closeOptions() {
953    return this.__closeOptions.get();
954  }
955  set closeOptions(newValue) {
956    this.__closeOptions.set(newValue);
957  }
958  get chipDirection() {
959    return this.__chipDirection.get();
960  }
961  set chipDirection(newValue) {
962    this.__chipDirection.set(newValue);
963  }
964  get prefixIcon() {
965    return this.__prefixIcon.get();
966  }
967  set prefixIcon(newValue) {
968    this.__prefixIcon.set(newValue);
969  }
970  get prefixSymbol() {
971    return this.__prefixSymbol.get();
972  }
973  set prefixSymbol(newValue) {
974    this.__prefixSymbol.set(newValue);
975  }
976  get label() {
977    return this.__label.get();
978  }
979  set label(newValue) {
980    this.__label.set(newValue);
981  }
982  get suffixIcon() {
983    return this.__suffixIcon.get();
984  }
985  set suffixIcon(newValue) {
986    this.__suffixIcon.set(newValue);
987  }
988  get suffixSymbol() {
989    return this.__suffixSymbol.get();
990  }
991  set suffixSymbol(newValue) {
992    this.__suffixSymbol.set(newValue);
993  }
994  get suffixSymbolOptions() {
995    return this.__suffixSymbolOptions.get();
996  }
997  set suffixSymbolOptions(newValue) {
998    this.__suffixSymbolOptions.set(newValue);
999  }
1000  get chipNodeBackgroundColor() {
1001    return this.__chipNodeBackgroundColor.get();
1002  }
1003  set chipNodeBackgroundColor(newValue) {
1004    this.__chipNodeBackgroundColor.set(newValue);
1005  }
1006  get chipNodeActivatedBackgroundColor() {
1007    return this.__chipNodeActivatedBackgroundColor.get();
1008  }
1009  set chipNodeActivatedBackgroundColor(newValue) {
1010    this.__chipNodeActivatedBackgroundColor.set(newValue);
1011  }
1012  get isHovering() {
1013    return this.__isHovering.get();
1014  }
1015  set isHovering(newValue) {
1016    this.__isHovering.set(newValue);
1017  }
1018  get chipNodeRadius() {
1019    return this.__chipNodeRadius.get();
1020  }
1021  set chipNodeRadius(newValue) {
1022    this.__chipNodeRadius.set(newValue);
1023  }
1024  get chipEnabled() {
1025    return this.__chipEnabled.get();
1026  }
1027  set chipEnabled(newValue) {
1028    this.__chipEnabled.set(newValue);
1029  }
1030  get chipActivated() {
1031    return this.__chipActivated.get();
1032  }
1033  set chipActivated(newValue) {
1034    this.__chipActivated.set(newValue);
1035  }
1036  get chipAccessibilitySelectedType() {
1037    return this.__chipAccessibilitySelectedType.get();
1038  }
1039  set chipAccessibilitySelectedType(newValue) {
1040    this.__chipAccessibilitySelectedType.set(newValue);
1041  }
1042  get chipAccessibilityDescription() {
1043    return this.__chipAccessibilityDescription.get();
1044  }
1045  set chipAccessibilityDescription(newValue) {
1046    this.__chipAccessibilityDescription.set(newValue);
1047  }
1048  get chipAccessibilityLevel() {
1049    return this.__chipAccessibilityLevel.get();
1050  }
1051  set chipAccessibilityLevel(newValue) {
1052    this.__chipAccessibilityLevel.set(newValue);
1053  }
1054  get isHover() {
1055    return this.__isHover.get();
1056  }
1057  set isHover(newValue) {
1058    this.__isHover.set(newValue);
1059  }
1060  get chipScale() {
1061    return this.__chipScale.get();
1062  }
1063  set chipScale(newValue) {
1064    this.__chipScale.set(newValue);
1065  }
1066  get chipOpacity() {
1067    return this.__chipOpacity.get();
1068  }
1069  set chipOpacity(newValue) {
1070    this.__chipOpacity.set(newValue);
1071  }
1072  get chipBlendColor() {
1073    return this.__chipBlendColor.get();
1074  }
1075  set chipBlendColor(newValue) {
1076    this.__chipBlendColor.set(newValue);
1077  }
1078  get deleteChip() {
1079    return this.__deleteChip.get();
1080  }
1081  set deleteChip(newValue) {
1082    this.__deleteChip.set(newValue);
1083  }
1084  get chipNodeOnFocus() {
1085    return this.__chipNodeOnFocus.get();
1086  }
1087  set chipNodeOnFocus(newValue) {
1088    this.__chipNodeOnFocus.set(newValue);
1089  }
1090  get useDefaultSuffixIcon() {
1091    return this.__useDefaultSuffixIcon.get();
1092  }
1093  set useDefaultSuffixIcon(newValue) {
1094    this.__useDefaultSuffixIcon.set(newValue);
1095  }
1096  get suffixIconOnFocus() {
1097    return this.__suffixIconOnFocus.get();
1098  }
1099  set suffixIconOnFocus(newValue) {
1100    this.__suffixIconOnFocus.set(newValue);
1101  }
1102  get chipBreakPoints() {
1103    return this.__chipBreakPoints.get();
1104  }
1105  set chipBreakPoints(newValue) {
1106    this.__chipBreakPoints.set(newValue);
1107  }
1108  get isShowPressedBackGroundColor() {
1109    return this.__isShowPressedBackGroundColor.get();
1110  }
1111  set isShowPressedBackGroundColor(newValue) {
1112    this.__isShowPressedBackGroundColor.set(newValue);
1113  }
1114  get fontSizeScale() {
1115    return this.__fontSizeScale.get();
1116  }
1117  set fontSizeScale(newValue) {
1118    this.__fontSizeScale.set(newValue);
1119  }
1120  get fontWeightScale() {
1121    return this.__fontWeightScale.get();
1122  }
1123  set fontWeightScale(newValue) {
1124    this.__fontWeightScale.set(newValue);
1125  }
1126  get prefixSymbolWidth() {
1127    return this.__prefixSymbolWidth.get();
1128  }
1129  set prefixSymbolWidth(newValue) {
1130    this.__prefixSymbolWidth.set(newValue);
1131  }
1132  get suffixSymbolWidth() {
1133    return this.__suffixSymbolWidth.get();
1134  }
1135  set suffixSymbolWidth(newValue) {
1136    this.__suffixSymbolWidth.set(newValue);
1137  }
1138  get allowCloseSymbolWidth() {
1139    return this.__allowCloseSymbolWidth.get();
1140  }
1141  set allowCloseSymbolWidth(newValue) {
1142    this.__allowCloseSymbolWidth.set(newValue);
1143  }
1144  get symbolEffect() {
1145    return this.__symbolEffect.get();
1146  }
1147  set symbolEffect(newValue) {
1148    this.__symbolEffect.set(newValue);
1149  }
1150  isChipSizeEnum() {
1151    return typeof this.chipSize === 'string';
1152  }
1153  isShowCloseIconMargin() {
1154    return this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 0 && this.allowClose;
1155  }
1156  getLabelFontSize() {
1157    if (this.label?.fontSize !== void 0 && this.toVp(this.label.fontSize) >= 0) {
1158      return this.label.fontSize;
1159    } else {
1160      if (this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL) {
1161        try {
1162          resourceManager
1163            .getSystemResourceManager()
1164            .getNumberByName(this.theme.label.smallFontSize.params[0].split('.')[2]);
1165          return this.theme.label.smallFontSize;
1166        } catch (error) {
1167          return this.theme.label.defaultFontSize;
1168        }
1169      } else {
1170        try {
1171          resourceManager
1172            .getSystemResourceManager()
1173            .getNumberByName(this.theme.label.normalFontSize.params[0].split('.')[2]);
1174          return this.theme.label.normalFontSize;
1175        } catch (error) {
1176          return this.theme.label.defaultFontSize;
1177        }
1178      }
1179    }
1180  }
1181  defaultSymbolFontsize() {
1182    return this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1183      ? this.theme.defaultSymbol.smallSymbolFontSize
1184      : this.theme.defaultSymbol.normalSymbolFontSize;
1185  }
1186  resourceToVp(resource) {
1187    let metrics = LengthMetrics.resource(resource);
1188    return this.lengthMetricsToVp(metrics);
1189  }
1190  getActiveFontColor() {
1191    return this.chipNodeOnFocus ? this.theme.label.focusActiveFontColor : this.theme.label.activatedFontColor;
1192  }
1193  getFontColor() {
1194    return this.chipNodeOnFocus ? this.theme.label.focusFontColor : this.theme.label.fontColor;
1195  }
1196  getLabelFontColor() {
1197    if (this.getChipActive()) {
1198      return this.label?.activatedFontColor ?? this.getActiveFontColor();
1199    }
1200    return this.label?.fontColor ?? this.getFontColor();
1201  }
1202  getLabelFontFamily() {
1203    return this.label?.fontFamily ?? this.theme.label.fontFamily;
1204  }
1205  getLabelFontWeight() {
1206    if (this.getChipActive()) {
1207      return FontWeight.Medium;
1208    }
1209    return this.resourceToNumber(this.theme.label.fontWeight, FontWeight.Regular);
1210  }
1211  lengthMetricsToVp(lengthMetrics) {
1212    let defaultValue = 0;
1213    if (lengthMetrics) {
1214      switch (lengthMetrics.unit) {
1215        case LengthUnit.PX:
1216          return px2vp(lengthMetrics.value);
1217        case LengthUnit.VP:
1218          return lengthMetrics.value;
1219        case LengthUnit.FP:
1220          return px2vp(fp2px(lengthMetrics.value));
1221        case LengthUnit.PERCENT:
1222          return Number.NEGATIVE_INFINITY;
1223        case LengthUnit.LPX:
1224          return px2vp(lpx2px(lengthMetrics.value));
1225      }
1226    }
1227    return defaultValue;
1228  }
1229  toVp(value) {
1230    if (value === void 0) {
1231      return Number.NEGATIVE_INFINITY;
1232    }
1233    switch (typeof value) {
1234      case 'number':
1235        return value;
1236      case 'object':
1237        try {
1238          let returnValue = this.lengthMetricsToVp(LengthMetrics.resource(value));
1239          if (returnValue === 0 && !isValidResource(getContext(this), value)) {
1240            return Number.NEGATIVE_INFINITY;
1241          }
1242          return returnValue;
1243        } catch (error) {
1244          return Number.NEGATIVE_INFINITY;
1245        }
1246      case 'string':
1247        let regex = new RegExp('(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$', 'i');
1248        let matches = value.match(regex);
1249        if (!matches) {
1250          return Number.NEGATIVE_INFINITY;
1251        }
1252        let length = Number(matches?.[1] ?? 0);
1253        let unit = matches?.[2] ?? 'vp';
1254        switch (unit.toLowerCase()) {
1255          case 'px':
1256            length = px2vp(length);
1257            break;
1258          case 'fp':
1259            length = px2vp(fp2px(length));
1260            break;
1261          case 'lpx':
1262            length = px2vp(lpx2px(length));
1263            break;
1264          case '%':
1265            length = Number.NEGATIVE_INFINITY;
1266            break;
1267          case 'vp':
1268            break;
1269          default:
1270            break;
1271        }
1272        return length;
1273      default:
1274        return Number.NEGATIVE_INFINITY;
1275    }
1276  }
1277  getChipNodeBorderWidth() {
1278    return this.resourceToVp(this.theme.chipNode.defaultBorderWidth);
1279  }
1280  getChipNodeBorderColor() {
1281    let themeChipNode = this.theme.chipNode;
1282    return this.getChipActive() ? themeChipNode.activatedBorderColor : themeChipNode.borderColor;
1283  }
1284  getLabelMargin() {
1285    let labelMargin = { left: 0, right: 0 };
1286    if (this.label?.labelMargin?.left !== void 0 && this.toVp(this.label.labelMargin.left) >= 0) {
1287      labelMargin.left = this.label?.labelMargin?.left;
1288    } else if (this.prefixSymbol?.normal || this.prefixSymbol?.activated || this.prefixIcon?.src) {
1289      if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) {
1290        labelMargin.left = this.theme.label.smallMargin.left;
1291      } else {
1292        labelMargin.left = this.theme.label.normalMargin.left;
1293      }
1294    }
1295    if (this.label?.labelMargin?.right !== void 0 && this.toVp(this.label.labelMargin.right) >= 0) {
1296      labelMargin.right = this.label?.labelMargin?.right;
1297    } else if (
1298      this.suffixSymbol?.normal ||
1299      this.suffixSymbol?.activated ||
1300      this.suffixIcon?.src ||
1301      this.useDefaultSuffixIcon
1302    ) {
1303      if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) {
1304        labelMargin.right = this.theme.label.smallMargin.right;
1305      } else {
1306        labelMargin.right = this.theme.label.normalMargin.right;
1307      }
1308    }
1309    return labelMargin;
1310  }
1311  getLocalizedLabelMargin() {
1312    let localizedLabelMargin = { start: LengthMetrics.vp(0), end: LengthMetrics.vp(0) };
1313    if (
1314      this.label?.localizedLabelMargin?.start?.value !== void 0 &&
1315      this.lengthMetricsToVp(this.label.localizedLabelMargin.start) >= 0
1316    ) {
1317      localizedLabelMargin.start = this.label?.localizedLabelMargin?.start;
1318    } else if (this.prefixSymbol?.normal || this.prefixSymbol?.activated || this.prefixIcon?.src) {
1319      if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) {
1320        localizedLabelMargin.start = this.theme.label.localizedSmallMargin.start;
1321      } else {
1322        localizedLabelMargin.start = this.theme.label.localizedNormalMargin.start;
1323      }
1324    }
1325    if (
1326      this.label?.localizedLabelMargin?.end?.value !== void 0 &&
1327      this.lengthMetricsToVp(this.label.localizedLabelMargin.end) >= 0
1328    ) {
1329      localizedLabelMargin.end = this.label?.localizedLabelMargin?.end;
1330    } else if (
1331      this.suffixSymbol?.normal ||
1332      this.suffixSymbol?.activated ||
1333      this.suffixIcon?.src ||
1334      this.useDefaultSuffixIcon ||
1335      this.isShowCloseIconMargin()
1336    ) {
1337      if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) {
1338        localizedLabelMargin.end = this.theme.label.localizedSmallMargin.end;
1339      } else {
1340        localizedLabelMargin.end = this.theme.label.localizedNormalMargin.end;
1341      }
1342    }
1343    return localizedLabelMargin;
1344  }
1345  getLabelStartEndVp() {
1346    let labelMargin = this.getLocalizedLabelMargin();
1347    if (this.label && this.label.labelMargin !== void 0 && this.label.localizedLabelMargin === void 0) {
1348      let margin = this.getLabelMargin();
1349      return {
1350        start: LengthMetrics.vp(this.toVp(margin.left)),
1351        end: LengthMetrics.vp(this.toVp(margin.right)),
1352      };
1353    }
1354    return {
1355      start: LengthMetrics.vp(this.lengthMetricsToVp(labelMargin.start)),
1356      end: LengthMetrics.vp(this.lengthMetricsToVp(labelMargin.end)),
1357    };
1358  }
1359  getActualLabelMargin() {
1360    let localizedLabelMargin = this.getLocalizedLabelMargin();
1361    if (this.label && this.label.localizedLabelMargin !== void 0) {
1362      return localizedLabelMargin;
1363    }
1364    if (this.label && this.label.labelMargin !== void 0) {
1365      return this.getLabelMargin();
1366    }
1367    return localizedLabelMargin;
1368  }
1369  getSuffixIconSize() {
1370    let suffixIconSize = { width: 0, height: 0 };
1371    if (this.suffixIcon?.size?.width !== void 0 && this.toVp(this.suffixIcon?.size?.width) >= 0) {
1372      suffixIconSize.width = this.suffixIcon?.size?.width;
1373    } else {
1374      if (this.getSuffixIconSrc()) {
1375        suffixIconSize.width =
1376          this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1377            ? this.theme.suffixIcon.smallSize.width
1378            : this.theme.suffixIcon.normalSize.width;
1379      } else {
1380        suffixIconSize.width = 0;
1381      }
1382    }
1383    if (this.suffixIcon?.size?.height !== void 0 && this.toVp(this.suffixIcon?.size?.height) >= 0) {
1384      suffixIconSize.height = this.suffixIcon?.size?.height;
1385    } else {
1386      if (this.getSuffixIconSrc()) {
1387        suffixIconSize.height =
1388          this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1389            ? this.theme.suffixIcon.smallSize.height
1390            : this.theme.suffixIcon.normalSize.height;
1391      } else {
1392        suffixIconSize.height = 0;
1393      }
1394    }
1395    return suffixIconSize;
1396  }
1397  getPrefixIconSize() {
1398    let prefixIconSize = { width: 0, height: 0 };
1399    if (this.prefixIcon?.size?.width !== void 0 && this.toVp(this.prefixIcon?.size?.width) >= 0) {
1400      prefixIconSize.width = this.prefixIcon?.size?.width;
1401    } else {
1402      if (this.prefixIcon?.src) {
1403        prefixIconSize.width =
1404          this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1405            ? this.theme.prefixIcon.smallSize.width
1406            : this.theme.prefixIcon.normalSize.width;
1407      } else {
1408        prefixIconSize.width = 0;
1409      }
1410    }
1411    if (this.prefixIcon?.size?.height !== void 0 && this.toVp(this.prefixIcon?.size?.height) >= 0) {
1412      prefixIconSize.height = this.prefixIcon?.size?.height;
1413    } else {
1414      if (this.prefixIcon?.src) {
1415        prefixIconSize.height =
1416          this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1417            ? this.theme.prefixIcon.smallSize.height
1418            : this.theme.prefixIcon.normalSize.height;
1419      } else {
1420        prefixIconSize.height = 0;
1421      }
1422    }
1423    return prefixIconSize;
1424  }
1425  getDefaultActiveIconColor(iconType) {
1426    if (iconType === IconType.PREFIX_ICON) {
1427      return this.chipNodeOnFocus
1428        ? this.theme.prefixIcon.focusActivatedColor
1429        : this.theme.prefixIcon.activatedFillColor;
1430    } else {
1431      return this.chipNodeOnFocus
1432        ? this.theme.suffixIcon.focusActivatedColor
1433        : this.theme.suffixIcon.activatedFillColor;
1434    }
1435  }
1436  getDefaultFillIconColor(iconType) {
1437    if (iconType === IconType.PREFIX_ICON) {
1438      return this.chipNodeOnFocus ? this.theme.prefixIcon.focusFillColor : this.theme.prefixIcon.fillColor;
1439    } else {
1440      return this.chipNodeOnFocus ? this.theme.suffixIcon.focusFillColor : this.theme.suffixIcon.fillColor;
1441    }
1442  }
1443  getSymbolActiveColor(iconType) {
1444    if (iconType === IconType.PREFIX_SYMBOL) {
1445      return this.getColorArray(
1446        this.prefixIcon?.activatedFillColor,
1447        this.theme.prefixIcon.focusActivatedColor,
1448        this.theme.prefixIcon.activatedFillColor
1449      );
1450    } else if (iconType === IconType.SUFFIX_SYMBOL) {
1451      return this.getColorArray(
1452        this.suffixIcon?.activatedFillColor,
1453        this.theme.suffixIcon.focusActivatedColor,
1454        this.theme.suffixIcon.activatedFillColor
1455      );
1456    } else {
1457      return this.theme.defaultSymbol.activatedFontColor;
1458    }
1459  }
1460  getSymbolFillColor(iconType) {
1461    if (iconType === IconType.PREFIX_SYMBOL) {
1462      return this.getColorArray(
1463        this.prefixIcon?.fillColor,
1464        this.theme.prefixIcon.focusFillColor,
1465        this.theme.prefixIcon.fillColor
1466      );
1467    } else if (iconType === IconType.SUFFIX_SYMBOL) {
1468      return this.getColorArray(
1469        this.suffixIcon?.fillColor,
1470        this.theme.suffixIcon.focusFillColor,
1471        this.theme.suffixIcon.fillColor
1472      );
1473    } else {
1474      return this.theme.defaultSymbol.normalFontColor;
1475    }
1476  }
1477  getColorArray(userDefined, focusColor, normalColor) {
1478    if (userDefined) {
1479      return [userDefined];
1480    }
1481    return this.chipNodeOnFocus ? [focusColor] : [normalColor];
1482  }
1483  getPrefixIconFilledColor() {
1484    if (this.getChipActive()) {
1485      return this.prefixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON);
1486    }
1487    return this.prefixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.PREFIX_ICON);
1488  }
1489  getSuffixIconFilledColor() {
1490    if (this.getChipActive()) {
1491      return this.suffixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.SUFFIX_ICON);
1492    }
1493    return this.suffixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.SUFFIX_ICON);
1494  }
1495  getDefaultSymbolColor(iconType) {
1496    if (this.getChipActive()) {
1497      return this.getSymbolActiveColor(iconType);
1498    }
1499    return this.getSymbolFillColor(iconType);
1500  }
1501  getPrefixSymbolModifier() {
1502    if (this.getChipActive()) {
1503      return this.prefixSymbol?.activated;
1504    }
1505    return this.prefixSymbol?.normal;
1506  }
1507  getSuffixSymbolModifier() {
1508    if (this.getChipActive()) {
1509      return this.suffixSymbol?.activated;
1510    }
1511    return this.suffixSymbol?.normal;
1512  }
1513  getSuffixIconFocusable() {
1514    return (
1515      !this.isSuffixIconFocusStyleCustomized &&
1516      ((this.useDefaultSuffixIcon && (this.allowClose ?? true)) || this.suffixIcon?.action !== void 0)
1517    );
1518  }
1519  getChipNodePadding() {
1520    return this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL
1521      ? this.theme.chipNode.localizedSmallPadding
1522      : this.theme.chipNode.localizedNormalPadding;
1523  }
1524  getChipNodeRadius() {
1525    if (this.chipNodeRadius !== void 0 && this.toVp(this.chipNodeRadius) >= 0) {
1526      return this.chipNodeRadius;
1527    } else {
1528      return this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL
1529        ? this.theme.chipNode.smallBorderRadius
1530        : this.theme.chipNode.normalBorderRadius;
1531    }
1532  }
1533  getChipNodeBackGroundColor() {
1534    let currentColor;
1535    let themeChipNode = this.theme.chipNode;
1536    if (this.getChipActive()) {
1537      currentColor =
1538        (this.chipNodeOnFocus || this.isHover) && !this.isSetActiveChipBgColor()
1539          ? themeChipNode.focusActivatedBgColor
1540          : (this.chipNodeActivatedBackgroundColor ?? this.theme.chipNode.activatedBackgroundColor);
1541    } else {
1542      currentColor =
1543        (this.chipNodeOnFocus || this.isHover) && !this.isSetNormalChipBgColor()
1544          ? themeChipNode.focusBgColor
1545          : (this.chipNodeBackgroundColor ?? this.theme.chipNode.backgroundColor);
1546    }
1547    let sourceColor;
1548    try {
1549      sourceColor = ColorMetrics.resourceColor(currentColor);
1550    } catch (err) {
1551      hilog.error(0x3900, 'Ace', `Chip resourceColor, error: ${err.toString()}`);
1552      sourceColor = ColorMetrics.resourceColor(Color.Transparent);
1553    }
1554    if (!this.isShowPressedBackGroundColor) {
1555      return sourceColor.color;
1556    }
1557    return sourceColor.blendColor(ColorMetrics.resourceColor('#19000000')).color;
1558  }
1559  getChipNodeHeight() {
1560    if (this.isChipSizeEnum()) {
1561      return this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight;
1562    } else {
1563      this.chipNodeSize = this.chipSize;
1564      return this.chipNodeSize?.height !== void 0 && this.toVp(this.chipNodeSize?.height) >= 0
1565        ? this.toVp(this.chipNodeSize?.height)
1566        : this.theme.chipNode.normalHeight;
1567    }
1568  }
1569  getLabelWidth() {
1570    return px2vp(
1571      measure.measureText({
1572        textContent: this.label?.text ?? '',
1573        fontSize: this.getLabelFontSize(),
1574        fontFamily: this.label?.fontFamily ?? this.theme.label.fontFamily,
1575        fontWeight: this.getLabelFontWeight(),
1576        maxLines: 1,
1577        overflow: TextOverflow.Ellipsis,
1578        textAlign: TextAlign.Center,
1579      })
1580    );
1581  }
1582  getCalculateChipNodeWidth() {
1583    let calWidth = 0;
1584    let startEndVp = this.getLabelStartEndVp();
1585    calWidth += this.getChipNodeBorderWidth() * 2;
1586    calWidth += this.getChipNodePadding().start?.value ?? 0;
1587    calWidth += this.toVp(this.getPrefixChipWidth());
1588    calWidth += this.toVp(startEndVp.start?.value ?? 0);
1589    calWidth += this.getLabelWidth();
1590    calWidth += this.toVp(startEndVp.end?.value ?? 0);
1591    calWidth += this.toVp(this.getSuffixChipWidth());
1592    calWidth += this.getChipNodePadding().end?.value ?? 0;
1593    return calWidth;
1594  }
1595  getPrefixChipWidth() {
1596    if (this.prefixSymbol?.normal || this.prefixSymbol?.activated) {
1597      return this.prefixSymbolWidth;
1598    } else if (this.prefixIcon?.src) {
1599      return this.getPrefixIconSize().width;
1600    } else {
1601      return 0;
1602    }
1603  }
1604  getSuffixChipWidth() {
1605    if (this.suffixSymbol?.normal || this.suffixSymbol?.activated) {
1606      return this.suffixSymbolWidth;
1607    } else if (this.suffixIcon?.src) {
1608      return this.getSuffixIconSize().width;
1609    } else if (!this.suffixIcon?.src && (this.allowClose ?? true)) {
1610      return this.allowCloseSymbolWidth;
1611    } else {
1612      return 0;
1613    }
1614  }
1615  getReserveChipNodeWidth() {
1616    return this.getCalculateChipNodeWidth() - this.getLabelWidth() + this.theme.chipNode.minLabelWidth;
1617  }
1618  getChipEnable() {
1619    return this.chipEnabled || this.chipEnabled === void 0;
1620  }
1621  getChipActive() {
1622    if (typeof this.chipActivated === 'undefined') {
1623      return false;
1624    }
1625    return this.chipActivated;
1626  }
1627  getChipNodeOpacity() {
1628    return this.chipOpacity;
1629  }
1630  handleTouch(event) {
1631    if (!this.getChipEnable()) {
1632      return;
1633    }
1634    if (this.isHover) {
1635      if (event.type === TouchType.Down || event.type === TouchType.Move) {
1636        this.isShowPressedBackGroundColor = true;
1637      } else if (event.type === TouchType.Up) {
1638        this.isShowPressedBackGroundColor = false;
1639      } else {
1640        this.isShowPressedBackGroundColor = false;
1641      }
1642    } else {
1643      if (event.type === TouchType.Down || event.type === TouchType.Move) {
1644        this.isShowPressedBackGroundColor = true;
1645      } else if (event.type === TouchType.Up) {
1646        this.isShowPressedBackGroundColor = false;
1647      } else {
1648        this.isShowPressedBackGroundColor = false;
1649      }
1650    }
1651  }
1652  hoverAnimate(isHover) {
1653    if (!this.getChipEnable()) {
1654      return;
1655    }
1656    this.isHover = isHover;
1657    if (this.isHover) {
1658      this.isShowPressedBackGroundColor = true;
1659    } else {
1660      this.isShowPressedBackGroundColor = false;
1661    }
1662  }
1663  deleteChipNodeAnimate() {
1664    Context.animateTo({ duration: 150, curve: Curve.Sharp }, () => {
1665      this.chipOpacity = 0;
1666      this.chipBlendColor = Color.Transparent;
1667    });
1668    Context.animateTo(
1669      {
1670        duration: 150,
1671        curve: Curve.FastOutLinearIn,
1672        onFinish: () => {
1673          this.deleteChip = true;
1674        },
1675      },
1676      () => {
1677        this.chipScale = { x: 0.85, y: 0.85 };
1678      }
1679    );
1680  }
1681  getSuffixIconSrc() {
1682    this.useDefaultSuffixIcon = !this.suffixIcon?.src && (this.allowClose ?? true);
1683    return this.useDefaultSuffixIcon ? this.theme.suffixIcon.defaultDeleteIcon : (this.suffixIcon?.src ?? void 0);
1684  }
1685  getChipNodeWidth() {
1686    if (!this.isChipSizeEnum()) {
1687      this.chipNodeSize = this.chipSize;
1688      if (this.chipNodeSize?.width !== void 0 && this.toVp(this.chipNodeSize.width) >= 0) {
1689        return this.toVp(this.chipNodeSize.width);
1690      }
1691    }
1692    let constraintWidth = this.getChipConstraintWidth();
1693    return Math.min(Math.max(this.getCalculateChipNodeWidth(), constraintWidth.minWidth), constraintWidth.maxWidth);
1694  }
1695  getFocusOverlaySize() {
1696    return {
1697      width: Math.max(this.getChipNodeWidth(), this.getChipConstraintWidth().minWidth) + 8,
1698      height: this.getChipNodeHeight() + 8,
1699    };
1700  }
1701  getChipConstraintWidth() {
1702    let calcMinWidth = this.getReserveChipNodeWidth();
1703    let constraintWidth = this.getCalculateChipNodeWidth();
1704    let constraintSize;
1705    switch (this.chipBreakPoints) {
1706      case BreakPointsType.SM:
1707        constraintSize = {
1708          minWidth: calcMinWidth,
1709          maxWidth: Math.min(constraintWidth, this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth),
1710        };
1711        break;
1712      case BreakPointsType.MD:
1713        constraintSize = {
1714          minWidth: Math.max(constraintWidth, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth),
1715          maxWidth: Math.min(constraintWidth, this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth),
1716        };
1717        break;
1718      case BreakPointsType.LG:
1719        constraintSize = {
1720          minWidth: Math.max(constraintWidth, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth),
1721          maxWidth: Math.min(constraintWidth, this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth),
1722        };
1723        break;
1724      default:
1725        constraintSize = { minWidth: calcMinWidth, maxWidth: constraintWidth };
1726        break;
1727    }
1728    constraintSize.minWidth = Math.min(
1729      Math.max(this.getCalculateChipNodeWidth(), constraintSize.minWidth),
1730      constraintSize.maxWidth
1731    );
1732    constraintSize.minHeight = this.getChipNodeHeight();
1733    if (!this.isChipSizeEnum() && this.chipNodeSize?.height !== void 0 && this.toVp(this.chipNodeSize?.height) >= 0) {
1734      constraintSize.maxHeight = this.toVp(this.chipNodeSize.height);
1735      constraintSize.minHeight = this.toVp(this.chipNodeSize.height);
1736    }
1737    if (!this.isChipSizeEnum() && this.chipNodeSize?.width !== void 0 && this.toVp(this.chipNodeSize?.width) >= 0) {
1738      constraintSize.minWidth = this.toVp(this.chipNodeSize.width);
1739      constraintSize.maxWidth = this.toVp(this.chipNodeSize.width);
1740    } else if (this.toVp(this.fontSizeScale) >= this.theme.chipNode.suitAgeScale) {
1741      constraintSize.minWidth = void 0;
1742      constraintSize.maxWidth = void 0;
1743    }
1744    return constraintSize;
1745  }
1746  focusOverlay(parent = null) {
1747    this.observeComponentCreation2((elmtId, isInitialRender) => {
1748      Stack.create();
1749      Stack.direction(this.chipDirection);
1750      Stack.size({ width: 1, height: 1 });
1751      Stack.align(Alignment.Center);
1752    }, Stack);
1753    this.observeComponentCreation2((elmtId, isInitialRender) => {
1754      If.create();
1755      if (this.chipNodeOnFocus && !this.suffixIconOnFocus) {
1756        this.ifElseBranchUpdateFunction(0, () => {
1757          this.observeComponentCreation2((elmtId, isInitialRender) => {
1758            Stack.create();
1759            Stack.direction(this.chipDirection);
1760            Stack.borderRadius(this.toVp(this.getChipNodeRadius()) + 4);
1761            Stack.size(this.getFocusOverlaySize());
1762            Stack.borderColor(this.theme.chipNode.focusOutlineColor);
1763            Stack.borderWidth(this.theme.chipNode.borderWidth);
1764          }, Stack);
1765          Stack.pop();
1766        });
1767      } else {
1768        this.ifElseBranchUpdateFunction(1, () => {});
1769      }
1770    }, If);
1771    If.pop();
1772    Stack.pop();
1773  }
1774  aboutToAppear() {
1775    let uiContent = this.getUIContext();
1776    this.fontSizeScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1;
1777    this.smListener.on('change', mediaQueryResult => {
1778      if (mediaQueryResult.matches) {
1779        this.chipBreakPoints = BreakPointsType.SM;
1780      }
1781    });
1782    this.mdListener.on('change', mediaQueryResult => {
1783      if (mediaQueryResult.matches) {
1784        this.chipBreakPoints = BreakPointsType.MD;
1785      }
1786    });
1787    this.lgListener.on('change', mediaQueryResult => {
1788      if (mediaQueryResult.matches) {
1789        this.chipBreakPoints = BreakPointsType.LG;
1790      }
1791    });
1792    this.callbackId = this.getUIContext().getHostContext()?.getApplicationContext()?.on('environment', this.callbacks);
1793  }
1794  getVisibility() {
1795    if (this.toVp(this.getChipNodeHeight()) > 0) {
1796      return Visibility.Visible;
1797    } else {
1798      return Visibility.None;
1799    }
1800  }
1801  isSetActiveChipBgColor() {
1802    if (!this.chipNodeActivatedBackgroundColor) {
1803      return false;
1804    }
1805    try {
1806      return (
1807        ColorMetrics.resourceColor(this.chipNodeActivatedBackgroundColor).color !==
1808        ColorMetrics.resourceColor(this.theme.chipNode.activatedBackgroundColor).color
1809      );
1810    } catch (error) {
1811      console.error(`[Chip] failed to get resourceColor`);
1812      return false;
1813    }
1814  }
1815  isSetNormalChipBgColor() {
1816    if (!this.chipNodeBackgroundColor) {
1817      return false;
1818    }
1819    try {
1820      return (
1821        ColorMetrics.resourceColor(this.chipNodeBackgroundColor).color !==
1822        ColorMetrics.resourceColor(this.theme.chipNode.backgroundColor).color
1823      );
1824    } catch (error) {
1825      console.error(`[Chip] failed to get resourceColor`);
1826      return false;
1827    }
1828  }
1829  getShadowStyles() {
1830    if (!this.chipNodeOnFocus) {
1831      return undefined;
1832    }
1833    return this.resourceToNumber(
1834      this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL
1835        ? this.theme.chipNode.smallShadowStyle
1836        : this.theme.chipNode.normalShadowStyle,
1837      -1
1838    );
1839  }
1840  aboutToDisappear() {
1841    this.smListener.off('change');
1842    this.mdListener.off('change');
1843    this.lgListener.off('change');
1844    if (this.callbackId) {
1845      this.getUIContext()?.getHostContext()?.getApplicationContext()?.off('environment', this.callbackId);
1846      this.callbackId = void 0;
1847    }
1848  }
1849  chipBuilder(parent = null) {
1850    this.observeComponentCreation2((elmtId, isInitialRender) => {
1851      Button.createWithChild();
1852      Button.constraintSize(this.getChipConstraintWidth());
1853      Button.direction(this.chipDirection);
1854      Button.type(ButtonType.Normal);
1855      Button.clip(false);
1856      Button.backgroundColor(this.getChipNodeBackGroundColor());
1857      Button.borderRadius(this.getChipNodeRadius());
1858      Button.borderWidth(this.getChipNodeBorderWidth());
1859      Button.borderColor(this.getChipNodeBorderColor());
1860      Button.enabled(this.getChipEnable());
1861      Button.scale(ObservedObject.GetRawObject(this.chipScale));
1862      Button.focusable(true);
1863      Button.opacity(this.getChipNodeOpacity());
1864      Button.shadow(this.getShadowStyles());
1865      Button.padding(0);
1866      Button.accessibilityGroup(true);
1867      Button.accessibilityDescription(this.getAccessibilityDescription());
1868      Button.accessibilityLevel(this.getAccessibilityLevel());
1869      Button.accessibilityChecked(this.getAccessibilityChecked());
1870      Button.accessibilitySelected(this.getAccessibilitySelected());
1871      Button.onFocus(() => {
1872        this.chipNodeOnFocus = true;
1873        this.chipZoomIn();
1874      });
1875      Button.onBlur(() => {
1876        this.chipNodeOnFocus = false;
1877        this.chipZoomOut();
1878      });
1879      Button.onTouch(event => {
1880        this.handleTouch(event);
1881      });
1882      Button.onHover(isHover => {
1883        if (isHover) {
1884          this.isShowPressedBackGroundColor = true;
1885          this.chipZoomIn();
1886        } else {
1887          if (!this.isShowPressedBackGroundColor && isHover) {
1888            this.isShowPressedBackGroundColor = true;
1889          } else {
1890            this.isShowPressedBackGroundColor = false;
1891          }
1892          this.chipZoomOut();
1893        }
1894        this.isHover = isHover;
1895      });
1896      Button.onKeyEvent(event => {
1897        if (!event || event.type === null || event.type !== KeyType.Down) {
1898          return;
1899        }
1900        let isDeleteChip = event.keyCode === KeyCode.KEYCODE_FORWARD_DEL && !this.suffixIconOnFocus;
1901        let isEnterDeleteChip =
1902          event.keyCode === KeyCode.KEYCODE_ENTER &&
1903          this.allowClose !== false &&
1904          !this.suffixIcon?.src &&
1905          this.isSuffixIconFocusStyleCustomized;
1906        if (isDeleteChip || isEnterDeleteChip) {
1907          this.deleteChipNodeAnimate();
1908        }
1909      });
1910      Button.onClick(this.onClicked === noop ? undefined : this.onClicked.bind(this));
1911    }, Button);
1912    this.observeComponentCreation2((elmtId, isInitialRender) => {
1913      Row.create();
1914      Row.direction(this.chipDirection);
1915      Row.alignItems(VerticalAlign.Center);
1916      Row.justifyContent(FlexAlign.Center);
1917      Row.padding(this.getChipNodePadding());
1918      Row.constraintSize(this.getChipConstraintWidth());
1919    }, Row);
1920    this.observeComponentCreation2((elmtId, isInitialRender) => {
1921      If.create();
1922      if (this.prefixSymbol?.normal || this.prefixSymbol?.activated) {
1923        this.ifElseBranchUpdateFunction(0, () => {
1924          this.observeComponentCreation2((elmtId, isInitialRender) => {
1925            SymbolGlyph.create();
1926            SymbolGlyph.fontSize(this.defaultSymbolFontsize());
1927            SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.PREFIX_SYMBOL));
1928            SymbolGlyph.attributeModifier.bind(this)(this.getPrefixSymbolModifier());
1929            SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE);
1930            SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false);
1931            SymbolGlyph.symbolEffect(
1932              ObservedObject.GetRawObject(this.symbolEffect),
1933              this.theme.defaultSymbol.defaultEffect
1934            );
1935            SymbolGlyph.onSizeChange((oldValue, newValue) => {
1936              this.prefixSymbolWidth = newValue?.width;
1937            });
1938            SymbolGlyph.key('PrefixSymbolGlyph');
1939          }, SymbolGlyph);
1940        });
1941      } else if (this.prefixIcon?.src !== '') {
1942        this.ifElseBranchUpdateFunction(1, () => {
1943          this.observeComponentCreation2((elmtId, isInitialRender) => {
1944            Image.create(this.prefixIcon?.src);
1945            Image.direction(this.chipDirection);
1946            Image.opacity(this.getChipNodeOpacity());
1947            Image.size(this.getPrefixIconSize());
1948            Image.fillColor(this.getPrefixIconFilledColor());
1949            Image.enabled(this.getChipEnable());
1950            Image.objectFit(ImageFit.Cover);
1951            Image.focusable(false);
1952            Image.flexShrink(0);
1953            Image.visibility(this.getVisibility());
1954            Image.draggable(false);
1955          }, Image);
1956        });
1957      } else {
1958        this.ifElseBranchUpdateFunction(2, () => {});
1959      }
1960    }, If);
1961    If.pop();
1962    this.observeComponentCreation2((elmtId, isInitialRender) => {
1963      Text.create(this.label?.text ?? '');
1964      Text.direction(this.chipDirection);
1965      Text.opacity(this.getChipNodeOpacity());
1966      Text.fontSize(this.getLabelFontSize());
1967      Text.fontColor(this.getLabelFontColor());
1968      Text.fontFamily(this.getLabelFontFamily());
1969      Text.fontWeight(this.getLabelFontWeight());
1970      Text.margin(this.getActualLabelMargin());
1971      Text.enabled(this.getChipEnable());
1972      Text.maxLines(1);
1973      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
1974      Text.flexShrink(1);
1975      Text.focusable(true);
1976      Text.textAlign(TextAlign.Center);
1977      Text.visibility(this.getVisibility());
1978      Text.draggable(false);
1979    }, Text);
1980    Text.pop();
1981    this.observeComponentCreation2((elmtId, isInitialRender) => {
1982      If.create();
1983      if (this.suffixSymbol?.normal || this.suffixSymbol?.activated) {
1984        this.ifElseBranchUpdateFunction(0, () => {
1985          this.observeComponentCreation2((elmtId, isInitialRender) => {
1986            Button.createWithChild({ type: ButtonType.Normal });
1987            Button.onClick(this.getSuffixSymbolAction());
1988            Button.accessibilityText(this.getSuffixSymbolAccessibilityText());
1989            Button.accessibilityDescription(this.getSuffixSymbolAccessibilityDescription());
1990            Button.accessibilityLevel(this.getSuffixSymbolAccessibilityLevel());
1991            Button.backgroundColor(Color.Transparent);
1992            Button.borderRadius(0);
1993            Button.padding(0);
1994            Button.stateEffect(false);
1995            Button.focusable(!this.isSuffixIconFocusStyleCustomized);
1996            Button.hoverEffect(this.setHoverEffect());
1997          }, Button);
1998          this.observeComponentCreation2((elmtId, isInitialRender) => {
1999            SymbolGlyph.create();
2000            SymbolGlyph.fontSize(this.defaultSymbolFontsize());
2001            SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL));
2002            SymbolGlyph.attributeModifier.bind(this)(this.getSuffixSymbolModifier());
2003            SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE);
2004            SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false);
2005            SymbolGlyph.symbolEffect(
2006              ObservedObject.GetRawObject(this.symbolEffect),
2007              this.theme.defaultSymbol.defaultEffect
2008            );
2009            SymbolGlyph.onSizeChange((oldValue, newValue) => {
2010              this.suffixSymbolWidth = newValue?.width;
2011            });
2012            SymbolGlyph.key('SuffixSymbolGlyph');
2013          }, SymbolGlyph);
2014          Button.pop();
2015        });
2016      } else if (this.suffixIcon?.src !== '') {
2017        this.ifElseBranchUpdateFunction(1, () => {
2018          this.observeComponentCreation2((elmtId, isInitialRender) => {
2019            Button.createWithChild({ type: ButtonType.Normal });
2020            Button.backgroundColor(Color.Transparent);
2021            Button.borderRadius(0);
2022            Button.padding(0);
2023            Button.size(this.getSuffixIconSize());
2024            Button.accessibilityText(this.getSuffixIconAccessibilityText());
2025            Button.accessibilityDescription(this.getSuffixIconAccessibilityDescription());
2026            Button.accessibilityLevel(this.getSuffixIconAccessibilityLevel());
2027            Button.onClick(() => {
2028              if (!this.getChipEnable()) {
2029                return;
2030              }
2031              if (this.suffixIcon?.action) {
2032                this.suffixIcon.action();
2033                return;
2034              }
2035              if ((this.allowClose ?? true) && this.useDefaultSuffixIcon) {
2036                this.onClose();
2037                this.deleteChipNodeAnimate();
2038                return;
2039              }
2040              this.onClicked();
2041            });
2042            Button.focusable(this.getSuffixIconFocusable());
2043            Button.hoverEffect(this.setHoverEffect());
2044            Button.stateEffect(this.setPressEffect());
2045          }, Button);
2046          this.observeComponentCreation2((elmtId, isInitialRender) => {
2047            Image.create(this.getSuffixIconSrc());
2048            Image.direction(this.chipDirection);
2049            Image.opacity(this.getChipNodeOpacity());
2050            Image.size(this.getSuffixIconSize());
2051            Image.fillColor(this.getSuffixIconFilledColor());
2052            Image.enabled(this.getChipEnable());
2053            Image.objectFit(ImageFit.Cover);
2054            Image.flexShrink(0);
2055            Image.visibility(this.getVisibility());
2056            Image.draggable(false);
2057            Image.onFocus(() => {
2058              this.suffixIconOnFocus = true;
2059            });
2060            Image.onBlur(() => {
2061              this.suffixIconOnFocus = false;
2062            });
2063          }, Image);
2064          Button.pop();
2065        });
2066      } else if (this.allowClose ?? true) {
2067        this.ifElseBranchUpdateFunction(2, () => {
2068          this.observeComponentCreation2((elmtId, isInitialRender) => {
2069            Button.createWithChild({ type: ButtonType.Normal });
2070            Button.backgroundColor(Color.Transparent);
2071            Button.borderRadius(0);
2072            Button.padding(0);
2073            Button.accessibilityText(this.getCloseIconAccessibilityText());
2074            Button.accessibilityDescription(this.getCloseIconAccessibilityDescription());
2075            Button.accessibilityLevel(this.getCloseIconAccessibilityLevel());
2076            Button.onClick(() => {
2077              if (!this.getChipEnable()) {
2078                return;
2079              }
2080              this.onClose();
2081              this.deleteChipNodeAnimate();
2082            });
2083            Button.focusable(!this.isSuffixIconFocusStyleCustomized);
2084            Button.hoverEffect(this.setHoverEffect());
2085            Button.stateEffect(this.setPressEffect());
2086          }, Button);
2087          this.observeComponentCreation2((elmtId, isInitialRender) => {
2088            SymbolGlyph.create({
2089              id: -1,
2090              type: 40000,
2091              params: ['sys.symbol.xmark'],
2092              bundleName: '__harDefaultBundleName__',
2093              moduleName: '__harDefaultModuleName__',
2094            });
2095            SymbolGlyph.fontSize(this.defaultSymbolFontsize());
2096            SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL));
2097            SymbolGlyph.onSizeChange((oldValue, newValue) => {
2098              this.allowCloseSymbolWidth = newValue?.width;
2099            });
2100            SymbolGlyph.key('AllowCloseSymbolGlyph');
2101          }, SymbolGlyph);
2102          Button.pop();
2103        });
2104      } else {
2105        this.ifElseBranchUpdateFunction(3, () => {});
2106      }
2107    }, If);
2108    If.pop();
2109    Row.pop();
2110    Button.pop();
2111  }
2112  setHoverEffect() {
2113    return this.isSuffixIconFocusStyleCustomized ? HoverEffect.None : undefined;
2114  }
2115  setPressEffect() {
2116    return this.isSuffixIconFocusStyleCustomized ? false : undefined;
2117  }
2118  chipZoomOut() {
2119    if (this.isSuffixIconFocusStyleCustomized) {
2120      this.chipScale = {
2121        x: 1,
2122        y: 1,
2123      };
2124    }
2125  }
2126  chipZoomIn() {
2127    if (this.isSuffixIconFocusStyleCustomized) {
2128      this.chipScale = {
2129        x: this.resourceToNumber(this.theme.chipNode.focusBtnScaleX, 1),
2130        y: this.resourceToNumber(this.theme.chipNode.focusBtnScaleY, 1),
2131      };
2132    }
2133  }
2134  getSuffixSymbolAccessibilityLevel() {
2135    if (this.getChipActive()) {
2136      if (
2137        this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no' ||
2138        this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no-hide-descendants'
2139      ) {
2140        return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel;
2141      }
2142      return this.suffixSymbolOptions?.action ? 'yes' : 'no';
2143    }
2144    if (
2145      this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no' ||
2146      this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no-hide-descendants'
2147    ) {
2148      return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel;
2149    }
2150    return this.suffixSymbolOptions?.action ? 'yes' : 'no';
2151  }
2152  getSuffixSymbolAccessibilityDescription() {
2153    if (this.getChipActive()) {
2154      if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityDescription !== 'undefined') {
2155        return this.suffixSymbolOptions.activatedAccessibility.accessibilityDescription;
2156      }
2157      return undefined;
2158    }
2159    if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityDescription !== 'undefined') {
2160      return this.suffixSymbolOptions.normalAccessibility.accessibilityDescription;
2161    }
2162    return undefined;
2163  }
2164  getSuffixSymbolAccessibilityText() {
2165    if (this.getChipActive()) {
2166      if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityText !== 'undefined') {
2167        return this.suffixSymbolOptions.activatedAccessibility.accessibilityText;
2168      }
2169      return undefined;
2170    }
2171    if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityText !== 'undefined') {
2172      return this.suffixSymbolOptions.normalAccessibility.accessibilityText;
2173    }
2174    return undefined;
2175  }
2176  getSuffixSymbolAction() {
2177    if (typeof this.suffixSymbolOptions?.action === 'undefined') {
2178      return undefined;
2179    }
2180    return () => {
2181      if (!this.getChipEnable()) {
2182        return;
2183      }
2184      this.suffixSymbolOptions?.action?.();
2185    };
2186  }
2187  getAccessibilitySelected() {
2188    if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.SELECTED) {
2189      return this.getChipActive();
2190    }
2191    return undefined;
2192  }
2193  getAccessibilityChecked() {
2194    if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.CHECKED) {
2195      return this.getChipActive();
2196    }
2197    return undefined;
2198  }
2199  getChipAccessibilitySelectedType() {
2200    if (typeof this.chipActivated === 'undefined') {
2201      return AccessibilitySelectedType.CLICKED;
2202    }
2203    return this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED;
2204  }
2205  getCloseIconAccessibilityLevel() {
2206    if (
2207      this.closeOptions?.accessibilityLevel === 'no' ||
2208      this.closeOptions?.accessibilityLevel === 'no-hide-descendants'
2209    ) {
2210      return this.closeOptions.accessibilityLevel;
2211    }
2212    return 'yes';
2213  }
2214  getCloseIconAccessibilityDescription() {
2215    if (typeof this.closeOptions?.accessibilityDescription === 'undefined') {
2216      return undefined;
2217    }
2218    return this.closeOptions.accessibilityDescription;
2219  }
2220  getCloseIconAccessibilityText() {
2221    if (typeof this.closeOptions?.accessibilityText === 'undefined') {
2222      return {
2223        id: -1,
2224        type: 10003,
2225        params: ['sys.string.delete_used_for_accessibility_text'],
2226        bundleName: '__harDefaultBundleName__',
2227        moduleName: '__harDefaultModuleName__',
2228      };
2229    }
2230    return this.closeOptions.accessibilityText;
2231  }
2232  getSuffixIconAccessibilityLevel() {
2233    if (this.suffixIcon?.accessibilityLevel === 'no' || this.suffixIcon?.accessibilityLevel === 'no-hide-descendants') {
2234      return this.suffixIcon.accessibilityLevel;
2235    }
2236    return this.suffixIcon?.action ? 'yes' : 'no';
2237  }
2238  getSuffixIconAccessibilityDescription() {
2239    if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') {
2240      return undefined;
2241    }
2242    return this.suffixIcon.accessibilityDescription;
2243  }
2244  getSuffixIconAccessibilityText() {
2245    if (typeof this.suffixIcon?.accessibilityText === 'undefined') {
2246      return undefined;
2247    }
2248    return this.suffixIcon.accessibilityText;
2249  }
2250  getAccessibilityLevel() {
2251    return this.chipAccessibilityLevel;
2252  }
2253  getAccessibilityDescription() {
2254    if (typeof this.chipAccessibilityDescription === 'undefined') {
2255      return undefined;
2256    }
2257    return this.chipAccessibilityDescription;
2258  }
2259  resourceToNumber(resource, defaultValue) {
2260    if (!resource || !resource.type) {
2261      console.error('[Chip] failed: resource get fail.');
2262      return defaultValue;
2263    }
2264    const resourceManager = this.getUIContext().getHostContext()?.resourceManager;
2265    if (!resourceManager) {
2266      console.error('[Chip] failed to get resourceManager.');
2267      return defaultValue;
2268    }
2269    switch (resource.type) {
2270      case RESOURCE_TYPE_FLOAT:
2271      case RESOURCE_TYPE_INTEGER:
2272        try {
2273          if (resource.id !== -1) {
2274            return resourceManager.getNumber(resource);
2275          }
2276          return resourceManager.getNumberByName(resource.params[0].split('.')[2]);
2277        } catch (error) {
2278          console.error(`[Chip] get resource error, return defaultValue`);
2279          return defaultValue;
2280        }
2281      default:
2282        return defaultValue;
2283    }
2284  }
2285  initialRender() {
2286    this.observeComponentCreation2((elmtId, isInitialRender) => {
2287      If.create();
2288      if (!this.deleteChip) {
2289        this.ifElseBranchUpdateFunction(0, () => {
2290          this.chipBuilder.bind(this)();
2291        });
2292      } else {
2293        this.ifElseBranchUpdateFunction(1, () => {});
2294      }
2295    }, If);
2296    If.pop();
2297  }
2298  rerender() {
2299    this.updateDirtyElements();
2300  }
2301}
2302export default {
2303  Chip,
2304  ChipSize,
2305  AccessibilitySelectedType,
2306};
2307