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} 19const ColorMetrics = requireNapi('arkui.node').ColorMetrics; 20const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 21const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; 22const mediaquery = requireNapi('mediaquery'); 23 24export var ChipSize; 25(function (ChipSize) { 26 ChipSize['NORMAL'] = 'NORMAL'; 27 ChipSize['SMALL'] = 'SMALL'; 28})(ChipSize || (ChipSize = {})); 29var IconType; 30(function (IconType) { 31 IconType['PREFIX_ICON'] = 'PREFIXICON'; 32 IconType['SUFFIX_ICON'] = 'SUFFIXICON'; 33 IconType['PREFIX_SYMBOL'] = 'PREFIXSYMBOL'; 34 IconType['SUFFIX_SYMBOL'] = 'SUFFIXSYMBOL'; 35})(IconType || (IconType = {})); 36var BreakPointsType; 37(function (BreakPointsType) { 38 BreakPointsType['SM'] = 'SM'; 39 BreakPointsType['MD'] = 'MD'; 40 BreakPointsType['LG'] = 'LG'; 41})(BreakPointsType || (BreakPointsType = {})); 42export var AccessibilitySelectedType; 43(function (AccessibilitySelectedType) { 44 AccessibilitySelectedType[(AccessibilitySelectedType['CLICKED'] = 0)] = 'CLICKED'; 45 AccessibilitySelectedType[(AccessibilitySelectedType['CHECKED'] = 1)] = 'CHECKED'; 46 AccessibilitySelectedType[(AccessibilitySelectedType['SELECTED'] = 2)] = 'SELECTED'; 47})(AccessibilitySelectedType || (AccessibilitySelectedType = {})); 48const RESOURCE_TYPE_STRING = 10003; 49const RESOURCE_TYPE_FLOAT = 10002; 50const RESOURCE_TYPE_INTEGER = 10007; 51export function Chip(options, parent = null) { 52 const __options__ = options; 53 { 54 (parent ? parent : this).observeComponentCreation2( 55 (elmtId, isInitialRender, options = __options__) => { 56 if (isInitialRender) { 57 let componentCall = new ChipComponent( 58 parent ? parent : this, 59 { 60 chipSize: options.size, 61 prefixIcon: options.prefixIcon, 62 prefixSymbol: options.prefixSymbol, 63 label: options.label, 64 suffixIcon: options.suffixIcon, 65 suffixSymbol: options.suffixSymbol, 66 suffixSymbolOptions: options.suffixSymbolOptions, 67 allowClose: options.allowClose, 68 closeOptions: options.closeOptions, 69 chipEnabled: options.enabled, 70 chipActivated: options.activated, 71 chipNodeBackgroundColor: options.backgroundColor, 72 chipNodeActivatedBackgroundColor: options.activatedBackgroundColor, 73 chipNodeRadius: options.borderRadius, 74 chipDirection: options.direction, 75 chipAccessibilitySelectedType: options.accessibilitySelectedType, 76 chipAccessibilityDescription: options.accessibilityDescription, 77 chipAccessibilityLevel: options.accessibilityLevel, 78 onClose: options.onClose, 79 onClicked: options.onClicked, 80 }, 81 undefined, 82 elmtId, 83 () => {}, 84 { page: 'library/src/main/ets/components/MainPage.ets', line: 224, col: 3 } 85 ); 86 ViewPU.create(componentCall); 87 let paramsLambda = () => { 88 return { 89 chipSize: options.size, 90 prefixIcon: options.prefixIcon, 91 prefixSymbol: options.prefixSymbol, 92 label: options.label, 93 suffixIcon: options.suffixIcon, 94 suffixSymbol: options.suffixSymbol, 95 suffixSymbolOptions: options.suffixSymbolOptions, 96 allowClose: options.allowClose, 97 closeOptions: options.closeOptions, 98 chipEnabled: options.enabled, 99 chipActivated: options.activated, 100 chipNodeBackgroundColor: options.backgroundColor, 101 chipNodeActivatedBackgroundColor: options.activatedBackgroundColor, 102 chipNodeRadius: options.borderRadius, 103 chipDirection: options.direction, 104 chipAccessibilitySelectedType: options.accessibilitySelectedType, 105 chipAccessibilityDescription: options.accessibilityDescription, 106 chipAccessibilityLevel: options.accessibilityLevel, 107 onClose: options.onClose, 108 onClicked: options.onClicked, 109 }; 110 }; 111 componentCall.paramsGenerator_ = paramsLambda; 112 } else { 113 (parent ? parent : this).updateStateVarsOfChildByElmtId(elmtId, { 114 chipSize: options.size, 115 prefixIcon: options.prefixIcon, 116 prefixSymbol: options.prefixSymbol, 117 label: options.label, 118 suffixIcon: options.suffixIcon, 119 suffixSymbol: options.suffixSymbol, 120 suffixSymbolOptions: options.suffixSymbolOptions, 121 allowClose: options.allowClose, 122 closeOptions: options.closeOptions, 123 chipEnabled: options.enabled, 124 chipActivated: options.activated, 125 chipNodeBackgroundColor: options.backgroundColor, 126 chipNodeActivatedBackgroundColor: options.activatedBackgroundColor, 127 chipNodeRadius: options.borderRadius, 128 chipDirection: options.direction, 129 chipAccessibilitySelectedType: options.accessibilitySelectedType, 130 chipAccessibilityDescription: options.accessibilityDescription, 131 chipAccessibilityLevel: options.accessibilityLevel, 132 }); 133 } 134 }, 135 { name: 'ChipComponent' } 136 ); 137 } 138} 139export class ChipComponent extends ViewPU { 140 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 141 super(parent, __localStorage, elmtId, extraInfo); 142 if (typeof paramsLambda === 'function') { 143 this.paramsGenerator_ = paramsLambda; 144 } 145 this.theme = { 146 prefixIcon: { 147 normalSize: { 148 width: { 149 id: -1, 150 type: 10002, 151 params: ['sys.float.chip_normal_icon_size'], 152 bundleName: '__harDefaultBundleName__', 153 moduleName: '__harDefaultModuleName__', 154 }, 155 height: { 156 id: -1, 157 type: 10002, 158 params: ['sys.float.chip_normal_icon_size'], 159 bundleName: '__harDefaultBundleName__', 160 moduleName: '__harDefaultModuleName__', 161 }, 162 }, 163 smallSize: { 164 width: { 165 id: -1, 166 type: 10002, 167 params: ['sys.float.chip_small_icon_size'], 168 bundleName: '__harDefaultBundleName__', 169 moduleName: '__harDefaultModuleName__', 170 }, 171 height: { 172 id: -1, 173 type: 10002, 174 params: ['sys.float.chip_small_icon_size'], 175 bundleName: '__harDefaultBundleName__', 176 moduleName: '__harDefaultModuleName__', 177 }, 178 }, 179 fillColor: { 180 id: -1, 181 type: 10001, 182 params: ['sys.color.chip_usually_icon_color'], 183 bundleName: '__harDefaultBundleName__', 184 moduleName: '__harDefaultModuleName__', 185 }, 186 activatedFillColor: { 187 id: -1, 188 type: 10001, 189 params: ['sys.color.chip_active_icon_color'], 190 bundleName: '__harDefaultBundleName__', 191 moduleName: '__harDefaultModuleName__', 192 }, 193 focusFillColor: { 194 id: -1, 195 type: 10001, 196 params: ['sys.color.chip_icon_focus_fill'], 197 bundleName: '__harDefaultBundleName__', 198 moduleName: '__harDefaultModuleName__', 199 }, 200 focusActivatedColor: { 201 id: -1, 202 type: 10001, 203 params: ['sys.color.chip_icon_activated_focus_color'], 204 bundleName: '__harDefaultBundleName__', 205 moduleName: '__harDefaultModuleName__', 206 }, 207 }, 208 label: { 209 normalFontSize: { 210 id: -1, 211 type: 10002, 212 params: ['sys.float.chip_normal_font_size'], 213 bundleName: '__harDefaultBundleName__', 214 moduleName: '__harDefaultModuleName__', 215 }, 216 smallFontSize: { 217 id: -1, 218 type: 10002, 219 params: ['sys.float.chip_small_font_size'], 220 bundleName: '__harDefaultBundleName__', 221 moduleName: '__harDefaultModuleName__', 222 }, 223 focusFontColor: { 224 id: -1, 225 type: 10001, 226 params: ['sys.color.chip_focus_text'], 227 bundleName: '__harDefaultBundleName__', 228 moduleName: '__harDefaultModuleName__', 229 }, 230 focusActiveFontColor: { 231 id: -1, 232 type: 10001, 233 params: ['sys.color.chip_activated_focus_font_color'], 234 bundleName: '__harDefaultBundleName__', 235 moduleName: '__harDefaultModuleName__', 236 }, 237 fontColor: { 238 id: -1, 239 type: 10001, 240 params: ['sys.color.chip_font_color'], 241 bundleName: '__harDefaultBundleName__', 242 moduleName: '__harDefaultModuleName__', 243 }, 244 activatedFontColor: { 245 id: -1, 246 type: 10001, 247 params: ['sys.color.chip_activated_fontcolor'], 248 bundleName: '__harDefaultBundleName__', 249 moduleName: '__harDefaultModuleName__', 250 }, 251 fontFamily: 'HarmonyOS Sans', 252 fontWeight: { 253 id: -1, 254 type: 10002, 255 params: ['sys.float.chip_text_font_weight'], 256 bundleName: '__harDefaultBundleName__', 257 moduleName: '__harDefaultModuleName__', 258 }, 259 normalMargin: { 260 left: 6, 261 right: 6, 262 top: 0, 263 bottom: 0, 264 }, 265 smallMargin: { 266 left: 4, 267 right: 4, 268 top: 0, 269 bottom: 0, 270 }, 271 defaultFontSize: 14, 272 localizedNormalMargin: { 273 start: LengthMetrics.resource({ 274 id: -1, 275 type: 10002, 276 params: ['sys.float.chip_normal_text_margin'], 277 bundleName: '__harDefaultBundleName__', 278 moduleName: '__harDefaultModuleName__', 279 }), 280 end: LengthMetrics.resource({ 281 id: -1, 282 type: 10002, 283 params: ['sys.float.chip_normal_text_margin'], 284 bundleName: '__harDefaultBundleName__', 285 moduleName: '__harDefaultModuleName__', 286 }), 287 top: LengthMetrics.vp(0), 288 bottom: LengthMetrics.vp(0), 289 }, 290 localizedSmallMargin: { 291 start: LengthMetrics.resource({ 292 id: -1, 293 type: 10002, 294 params: ['sys.float.chip_small_text_margin'], 295 bundleName: '__harDefaultBundleName__', 296 moduleName: '__harDefaultModuleName__', 297 }), 298 end: LengthMetrics.resource({ 299 id: -1, 300 type: 10002, 301 params: ['sys.float.chip_small_text_margin'], 302 bundleName: '__harDefaultBundleName__', 303 moduleName: '__harDefaultModuleName__', 304 }), 305 top: LengthMetrics.vp(0), 306 bottom: LengthMetrics.vp(0), 307 }, 308 }, 309 suffixIcon: { 310 normalSize: { 311 width: { 312 id: -1, 313 type: 10002, 314 params: ['sys.float.chip_normal_icon_size'], 315 bundleName: '__harDefaultBundleName__', 316 moduleName: '__harDefaultModuleName__', 317 }, 318 height: { 319 id: -1, 320 type: 10002, 321 params: ['sys.float.chip_normal_icon_size'], 322 bundleName: '__harDefaultBundleName__', 323 moduleName: '__harDefaultModuleName__', 324 }, 325 }, 326 smallSize: { 327 width: { 328 id: -1, 329 type: 10002, 330 params: ['sys.float.chip_small_icon_size'], 331 bundleName: '__harDefaultBundleName__', 332 moduleName: '__harDefaultModuleName__', 333 }, 334 height: { 335 id: -1, 336 type: 10002, 337 params: ['sys.float.chip_small_icon_size'], 338 bundleName: '__harDefaultBundleName__', 339 moduleName: '__harDefaultModuleName__', 340 }, 341 }, 342 fillColor: { 343 id: -1, 344 type: 10001, 345 params: ['sys.color.chip_usually_icon_color'], 346 bundleName: '__harDefaultBundleName__', 347 moduleName: '__harDefaultModuleName__', 348 }, 349 activatedFillColor: { 350 id: -1, 351 type: 10001, 352 params: ['sys.color.chip_active_icon_color'], 353 bundleName: '__harDefaultBundleName__', 354 moduleName: '__harDefaultModuleName__', 355 }, 356 focusFillColor: { 357 id: -1, 358 type: 10001, 359 params: ['sys.color.chip_icon_focus_fill'], 360 bundleName: '__harDefaultBundleName__', 361 moduleName: '__harDefaultModuleName__', 362 }, 363 focusActivatedColor: { 364 id: -1, 365 type: 10001, 366 params: ['sys.color.chip_icon_activated_focus_color'], 367 bundleName: '__harDefaultBundleName__', 368 moduleName: '__harDefaultModuleName__', 369 }, 370 defaultDeleteIcon: { 371 id: -1, 372 type: 20000, 373 params: ['sys.media.ohos_ic_public_cancel', 16, 16], 374 bundleName: '__harDefaultBundleName__', 375 moduleName: '__harDefaultModuleName__', 376 }, 377 focusable: false, 378 isShowMargin: { 379 id: -1, 380 type: 10002, 381 params: ['sys.float.chip_show_close_icon_margin'], 382 bundleName: '__harDefaultBundleName__', 383 moduleName: '__harDefaultModuleName__', 384 }, 385 }, 386 defaultSymbol: { 387 normalFontColor: [ 388 { 389 id: -1, 390 type: 10001, 391 params: ['sys.color.chip_usually_icon_color'], 392 bundleName: '__harDefaultBundleName__', 393 moduleName: '__harDefaultModuleName__', 394 }, 395 ], 396 activatedFontColor: [ 397 { 398 id: -1, 399 type: 10001, 400 params: ['sys.color.chip_active_icon_color'], 401 bundleName: '__harDefaultBundleName__', 402 moduleName: '__harDefaultModuleName__', 403 }, 404 ], 405 normalSymbolFontSize: LengthMetrics.resource({ 406 id: -1, 407 type: 10002, 408 params: ['sys.float.chip_normal_icon_size'], 409 bundleName: '__harDefaultBundleName__', 410 moduleName: '__harDefaultModuleName__', 411 }).value, 412 smallSymbolFontSize: LengthMetrics.resource({ 413 id: -1, 414 type: 10002, 415 params: ['sys.float.chip_small_icon_size'], 416 bundleName: '__harDefaultBundleName__', 417 moduleName: '__harDefaultModuleName__', 418 }).value, 419 defaultEffect: -1, 420 }, 421 chipNode: { 422 suitAgeScale: 1.75, 423 minLabelWidth: 12, 424 normalHeight: { 425 id: -1, 426 type: 10002, 427 params: ['sys.float.chip_normal_height'], 428 bundleName: '__harDefaultBundleName__', 429 moduleName: '__harDefaultModuleName__', 430 }, 431 smallHeight: { 432 id: -1, 433 type: 10002, 434 params: ['sys.float.chip_small_height'], 435 bundleName: '__harDefaultBundleName__', 436 moduleName: '__harDefaultModuleName__', 437 }, 438 enabled: true, 439 activated: false, 440 backgroundColor: { 441 id: -1, 442 type: 10001, 443 params: ['sys.color.chip_background_color'], 444 bundleName: '__harDefaultBundleName__', 445 moduleName: '__harDefaultModuleName__', 446 }, 447 activatedBackgroundColor: { 448 id: -1, 449 type: 10001, 450 params: ['sys.color.chip_container_activated_color'], 451 bundleName: '__harDefaultBundleName__', 452 moduleName: '__harDefaultModuleName__', 453 }, 454 focusOutlineColor: { 455 id: -1, 456 type: 10001, 457 params: ['sys.color.ohos_id_color_focused_outline'], 458 bundleName: '__harDefaultBundleName__', 459 moduleName: '__harDefaultModuleName__', 460 }, 461 focusOutlineMargin: 2, 462 borderColor: { 463 id: -1, 464 type: 10001, 465 params: ['sys.color.chip_border_color'], 466 bundleName: '__harDefaultBundleName__', 467 moduleName: '__harDefaultModuleName__', 468 }, 469 defaultBorderWidth: { 470 id: -1, 471 type: 10002, 472 params: ['sys.float.chip_border_width'], 473 bundleName: '__harDefaultBundleName__', 474 moduleName: '__harDefaultModuleName__', 475 }, 476 activatedBorderColor: { 477 id: -1, 478 type: 10001, 479 params: ['sys.color.chip_activated_border_color'], 480 bundleName: '__harDefaultBundleName__', 481 moduleName: '__harDefaultModuleName__', 482 }, 483 normalBorderRadius: { 484 id: -1, 485 type: 10002, 486 params: ['sys.float.chip_border_radius_normal'], 487 bundleName: '__harDefaultBundleName__', 488 moduleName: '__harDefaultModuleName__', 489 }, 490 smallBorderRadius: { 491 id: -1, 492 type: 10002, 493 params: ['sys.float.chip_border_radius_small'], 494 bundleName: '__harDefaultBundleName__', 495 moduleName: '__harDefaultModuleName__', 496 }, 497 borderWidth: 2, 498 focusBtnScaleX: { 499 id: -1, 500 type: 10002, 501 params: ['sys.float.chip_focused_btn_scale'], 502 bundleName: '__harDefaultBundleName__', 503 moduleName: '__harDefaultModuleName__', 504 }, 505 focusBtnScaleY: { 506 id: -1, 507 type: 10002, 508 params: ['sys.float.chip_focused_btn_scale'], 509 bundleName: '__harDefaultBundleName__', 510 moduleName: '__harDefaultModuleName__', 511 }, 512 localizedNormalPadding: { 513 start: LengthMetrics.resource({ 514 id: -1, 515 type: 10002, 516 params: ['sys.float.chip_normal_text_padding'], 517 bundleName: '__harDefaultBundleName__', 518 moduleName: '__harDefaultModuleName__', 519 }), 520 end: LengthMetrics.resource({ 521 id: -1, 522 type: 10002, 523 params: ['sys.float.chip_normal_text_padding'], 524 bundleName: '__harDefaultBundleName__', 525 moduleName: '__harDefaultModuleName__', 526 }), 527 top: LengthMetrics.vp(4), 528 bottom: LengthMetrics.vp(4), 529 }, 530 localizedSmallPadding: { 531 start: LengthMetrics.resource({ 532 id: -1, 533 type: 10002, 534 params: ['sys.float.chip_small_text_padding'], 535 bundleName: '__harDefaultBundleName__', 536 moduleName: '__harDefaultModuleName__', 537 }), 538 end: LengthMetrics.resource({ 539 id: -1, 540 type: 10002, 541 params: ['sys.float.chip_small_text_padding'], 542 bundleName: '__harDefaultBundleName__', 543 moduleName: '__harDefaultModuleName__', 544 }), 545 top: LengthMetrics.vp(4), 546 bottom: LengthMetrics.vp(4), 547 }, 548 hoverBlendColor: { 549 id: -1, 550 type: 10001, 551 params: ['sys.color.chip_hover_color'], 552 bundleName: '__harDefaultBundleName__', 553 moduleName: '__harDefaultModuleName__', 554 }, 555 pressedBlendColor: { 556 id: -1, 557 type: 10001, 558 params: ['sys.color.chip_press_color'], 559 bundleName: '__harDefaultBundleName__', 560 moduleName: '__harDefaultModuleName__', 561 }, 562 focusBgColor: { 563 id: -1, 564 type: 10001, 565 params: ['sys.color.chip_focus_color'], 566 bundleName: '__harDefaultBundleName__', 567 moduleName: '__harDefaultModuleName__', 568 }, 569 focusActivatedBgColor: { 570 id: -1, 571 type: 10001, 572 params: ['sys.color.chip_container_activated_focus_color'], 573 bundleName: '__harDefaultBundleName__', 574 moduleName: '__harDefaultModuleName__', 575 }, 576 opacity: { normal: 1, hover: 0.95, pressed: 0.9 }, 577 normalShadowStyle: { 578 id: -1, 579 type: 10002, 580 params: ['sys.float.chip_normal_shadow_style'], 581 bundleName: '__harDefaultBundleName__', 582 moduleName: '__harDefaultModuleName__', 583 }, 584 smallShadowStyle: { 585 id: -1, 586 type: 10002, 587 params: ['sys.float.chip_small_shadow_style'], 588 bundleName: '__harDefaultBundleName__', 589 moduleName: '__harDefaultModuleName__', 590 }, 591 breakPointConstraintWidth: { 592 breakPointMinWidth: 128, 593 breakPointSmMaxWidth: 156, 594 breakPointMdMaxWidth: 280, 595 breakPointLgMaxWidth: 400, 596 }, 597 }, 598 }; 599 this.__chipSize = new SynchedPropertyObjectOneWayPU(params.chipSize, this, 'chipSize'); 600 this.__allowClose = new SynchedPropertySimpleOneWayPU(params.allowClose, this, 'allowClose'); 601 this.__closeOptions = new SynchedPropertyObjectOneWayPU(params.closeOptions, this, 'closeOptions'); 602 this.__chipDirection = new SynchedPropertySimpleOneWayPU(params.chipDirection, this, 'chipDirection'); 603 this.__prefixIcon = new SynchedPropertyObjectOneWayPU(params.prefixIcon, this, 'prefixIcon'); 604 this.__prefixSymbol = new SynchedPropertyObjectOneWayPU(params.prefixSymbol, this, 'prefixSymbol'); 605 this.__label = new SynchedPropertyObjectOneWayPU(params.label, this, 'label'); 606 this.__suffixIcon = new SynchedPropertyObjectOneWayPU(params.suffixIcon, this, 'suffixIcon'); 607 this.__suffixSymbol = new SynchedPropertyObjectOneWayPU(params.suffixSymbol, this, 'suffixSymbol'); 608 this.__suffixSymbolOptions = new SynchedPropertyObjectOneWayPU( 609 params.suffixSymbolOptions, 610 this, 611 'suffixSymbolOptions' 612 ); 613 this.__chipNodeBackgroundColor = new SynchedPropertyObjectOneWayPU( 614 params.chipNodeBackgroundColor, 615 this, 616 'chipNodeBackgroundColor' 617 ); 618 this.__chipNodeActivatedBackgroundColor = new SynchedPropertyObjectOneWayPU( 619 params.chipNodeActivatedBackgroundColor, 620 this, 621 'chipNodeActivatedBackgroundColor' 622 ); 623 this.__chipNodeRadius = new SynchedPropertyObjectOneWayPU(params.chipNodeRadius, this, 'chipNodeRadius'); 624 this.__chipEnabled = new SynchedPropertySimpleOneWayPU(params.chipEnabled, this, 'chipEnabled'); 625 this.__chipActivated = new SynchedPropertySimpleOneWayPU(params.chipActivated, this, 'chipActivated'); 626 this.__chipAccessibilitySelectedType = new SynchedPropertySimpleOneWayPU( 627 params.chipAccessibilitySelectedType, 628 this, 629 'chipAccessibilitySelectedType' 630 ); 631 this.__chipAccessibilityDescription = new SynchedPropertyObjectOneWayPU( 632 params.chipAccessibilityDescription, 633 this, 634 'chipAccessibilityDescription' 635 ); 636 this.__chipAccessibilityLevel = new SynchedPropertySimpleOneWayPU( 637 params.chipAccessibilityLevel, 638 this, 639 'chipAccessibilityLevel' 640 ); 641 this.__isChipExist = new ObservedPropertySimplePU(true, this, 'isChipExist'); 642 this.__chipScale = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, 'chipScale'); 643 this.__chipOpacity = new ObservedPropertySimplePU(1, this, 'chipOpacity'); 644 this.__suffixSymbolHeight = new ObservedPropertySimplePU(0, this, 'suffixSymbolHeight'); 645 this.__suffixSymbolWidth = new ObservedPropertySimplePU(0, this, 'suffixSymbolWidth'); 646 this.__breakPoint = new ObservedPropertySimplePU(BreakPointsType.SM, this, 'breakPoint'); 647 this.__fontSizeScale = new ObservedPropertySimplePU(1, this, 'fontSizeScale'); 648 this.isSuffixIconFocusStyleCustomized = this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 0; 649 this.isSuffixIconFocusable = this.resourceToNumber(this.theme.suffixIcon.isShowMargin, 0) !== 0; 650 this.onClose = undefined; 651 this.onClicked = undefined; 652 this.__chipNodeInFocus = new ObservedPropertySimplePU(false, this, 'chipNodeInFocus'); 653 this.smListener = mediaquery.matchMediaSync('(0vp<width) and (width<600vp)'); 654 this.mdListener = mediaquery.matchMediaSync('(600vp<=width) and (width<840vp)'); 655 this.lgListener = mediaquery.matchMediaSync('(840vp<=width)'); 656 this.symbolEffect = new SymbolEffect(); 657 this.environmentCallbackID = undefined; 658 this.environmentCallback = { 659 onConfigurationUpdated: configuration => { 660 this.fontSizeScale = configuration.fontSizeScale ?? 1; 661 }, 662 onMemoryLevel() {}, 663 }; 664 this.setInitiallyProvidedValue(params); 665 this.finalizeConstruction(); 666 } 667 setInitiallyProvidedValue(params) { 668 if (params.theme !== undefined) { 669 this.theme = params.theme; 670 } 671 if (params.chipSize === undefined) { 672 this.__chipSize.set(ChipSize.NORMAL); 673 } 674 if (params.chipDirection === undefined) { 675 this.__chipDirection.set(Direction.Auto); 676 } 677 if (params.chipEnabled === undefined) { 678 this.__chipEnabled.set(true); 679 } 680 if (params.isChipExist !== undefined) { 681 this.isChipExist = params.isChipExist; 682 } 683 if (params.chipScale !== undefined) { 684 this.chipScale = params.chipScale; 685 } 686 if (params.chipOpacity !== undefined) { 687 this.chipOpacity = params.chipOpacity; 688 } 689 if (params.suffixSymbolHeight !== undefined) { 690 this.suffixSymbolHeight = params.suffixSymbolHeight; 691 } 692 if (params.suffixSymbolWidth !== undefined) { 693 this.suffixSymbolWidth = params.suffixSymbolWidth; 694 } 695 if (params.breakPoint !== undefined) { 696 this.breakPoint = params.breakPoint; 697 } 698 if (params.fontSizeScale !== undefined) { 699 this.fontSizeScale = params.fontSizeScale; 700 } 701 if (params.isSuffixIconFocusStyleCustomized !== undefined) { 702 this.isSuffixIconFocusStyleCustomized = params.isSuffixIconFocusStyleCustomized; 703 } 704 if (params.isSuffixIconFocusable !== undefined) { 705 this.isSuffixIconFocusable = params.isSuffixIconFocusable; 706 } 707 if (params.onClose !== undefined) { 708 this.onClose = params.onClose; 709 } 710 if (params.onClicked !== undefined) { 711 this.onClicked = params.onClicked; 712 } 713 if (params.chipNodeInFocus !== undefined) { 714 this.chipNodeInFocus = params.chipNodeInFocus; 715 } 716 if (params.smListener !== undefined) { 717 this.smListener = params.smListener; 718 } 719 if (params.mdListener !== undefined) { 720 this.mdListener = params.mdListener; 721 } 722 if (params.lgListener !== undefined) { 723 this.lgListener = params.lgListener; 724 } 725 if (params.symbolEffect !== undefined) { 726 this.symbolEffect = params.symbolEffect; 727 } 728 if (params.environmentCallbackID !== undefined) { 729 this.environmentCallbackID = params.environmentCallbackID; 730 } 731 if (params.environmentCallback !== undefined) { 732 this.environmentCallback = params.environmentCallback; 733 } 734 } 735 updateStateVars(params) { 736 this.__chipSize.reset(params.chipSize); 737 this.__allowClose.reset(params.allowClose); 738 this.__closeOptions.reset(params.closeOptions); 739 this.__chipDirection.reset(params.chipDirection); 740 this.__prefixIcon.reset(params.prefixIcon); 741 this.__prefixSymbol.reset(params.prefixSymbol); 742 this.__label.reset(params.label); 743 this.__suffixIcon.reset(params.suffixIcon); 744 this.__suffixSymbol.reset(params.suffixSymbol); 745 this.__suffixSymbolOptions.reset(params.suffixSymbolOptions); 746 this.__chipNodeBackgroundColor.reset(params.chipNodeBackgroundColor); 747 this.__chipNodeActivatedBackgroundColor.reset(params.chipNodeActivatedBackgroundColor); 748 this.__chipNodeRadius.reset(params.chipNodeRadius); 749 this.__chipEnabled.reset(params.chipEnabled); 750 this.__chipActivated.reset(params.chipActivated); 751 this.__chipAccessibilitySelectedType.reset(params.chipAccessibilitySelectedType); 752 this.__chipAccessibilityDescription.reset(params.chipAccessibilityDescription); 753 this.__chipAccessibilityLevel.reset(params.chipAccessibilityLevel); 754 } 755 purgeVariableDependenciesOnElmtId(rmElmtId) { 756 this.__chipSize.purgeDependencyOnElmtId(rmElmtId); 757 this.__allowClose.purgeDependencyOnElmtId(rmElmtId); 758 this.__closeOptions.purgeDependencyOnElmtId(rmElmtId); 759 this.__chipDirection.purgeDependencyOnElmtId(rmElmtId); 760 this.__prefixIcon.purgeDependencyOnElmtId(rmElmtId); 761 this.__prefixSymbol.purgeDependencyOnElmtId(rmElmtId); 762 this.__label.purgeDependencyOnElmtId(rmElmtId); 763 this.__suffixIcon.purgeDependencyOnElmtId(rmElmtId); 764 this.__suffixSymbol.purgeDependencyOnElmtId(rmElmtId); 765 this.__suffixSymbolOptions.purgeDependencyOnElmtId(rmElmtId); 766 this.__chipNodeBackgroundColor.purgeDependencyOnElmtId(rmElmtId); 767 this.__chipNodeActivatedBackgroundColor.purgeDependencyOnElmtId(rmElmtId); 768 this.__chipNodeRadius.purgeDependencyOnElmtId(rmElmtId); 769 this.__chipEnabled.purgeDependencyOnElmtId(rmElmtId); 770 this.__chipActivated.purgeDependencyOnElmtId(rmElmtId); 771 this.__chipAccessibilitySelectedType.purgeDependencyOnElmtId(rmElmtId); 772 this.__chipAccessibilityDescription.purgeDependencyOnElmtId(rmElmtId); 773 this.__chipAccessibilityLevel.purgeDependencyOnElmtId(rmElmtId); 774 this.__isChipExist.purgeDependencyOnElmtId(rmElmtId); 775 this.__chipScale.purgeDependencyOnElmtId(rmElmtId); 776 this.__chipOpacity.purgeDependencyOnElmtId(rmElmtId); 777 this.__suffixSymbolHeight.purgeDependencyOnElmtId(rmElmtId); 778 this.__suffixSymbolWidth.purgeDependencyOnElmtId(rmElmtId); 779 this.__breakPoint.purgeDependencyOnElmtId(rmElmtId); 780 this.__fontSizeScale.purgeDependencyOnElmtId(rmElmtId); 781 this.__chipNodeInFocus.purgeDependencyOnElmtId(rmElmtId); 782 } 783 aboutToBeDeleted() { 784 this.__chipSize.aboutToBeDeleted(); 785 this.__allowClose.aboutToBeDeleted(); 786 this.__closeOptions.aboutToBeDeleted(); 787 this.__chipDirection.aboutToBeDeleted(); 788 this.__prefixIcon.aboutToBeDeleted(); 789 this.__prefixSymbol.aboutToBeDeleted(); 790 this.__label.aboutToBeDeleted(); 791 this.__suffixIcon.aboutToBeDeleted(); 792 this.__suffixSymbol.aboutToBeDeleted(); 793 this.__suffixSymbolOptions.aboutToBeDeleted(); 794 this.__chipNodeBackgroundColor.aboutToBeDeleted(); 795 this.__chipNodeActivatedBackgroundColor.aboutToBeDeleted(); 796 this.__chipNodeRadius.aboutToBeDeleted(); 797 this.__chipEnabled.aboutToBeDeleted(); 798 this.__chipActivated.aboutToBeDeleted(); 799 this.__chipAccessibilitySelectedType.aboutToBeDeleted(); 800 this.__chipAccessibilityDescription.aboutToBeDeleted(); 801 this.__chipAccessibilityLevel.aboutToBeDeleted(); 802 this.__isChipExist.aboutToBeDeleted(); 803 this.__chipScale.aboutToBeDeleted(); 804 this.__chipOpacity.aboutToBeDeleted(); 805 this.__suffixSymbolHeight.aboutToBeDeleted(); 806 this.__suffixSymbolWidth.aboutToBeDeleted(); 807 this.__breakPoint.aboutToBeDeleted(); 808 this.__fontSizeScale.aboutToBeDeleted(); 809 this.__chipNodeInFocus.aboutToBeDeleted(); 810 SubscriberManager.Get().delete(this.id__()); 811 this.aboutToBeDeletedInternal(); 812 } 813 get chipSize() { 814 return this.__chipSize.get(); 815 } 816 set chipSize(newValue) { 817 this.__chipSize.set(newValue); 818 } 819 get allowClose() { 820 return this.__allowClose.get(); 821 } 822 set allowClose(newValue) { 823 this.__allowClose.set(newValue); 824 } 825 get closeOptions() { 826 return this.__closeOptions.get(); 827 } 828 set closeOptions(newValue) { 829 this.__closeOptions.set(newValue); 830 } 831 get chipDirection() { 832 return this.__chipDirection.get(); 833 } 834 set chipDirection(newValue) { 835 this.__chipDirection.set(newValue); 836 } 837 get prefixIcon() { 838 return this.__prefixIcon.get(); 839 } 840 set prefixIcon(newValue) { 841 this.__prefixIcon.set(newValue); 842 } 843 get prefixSymbol() { 844 return this.__prefixSymbol.get(); 845 } 846 set prefixSymbol(newValue) { 847 this.__prefixSymbol.set(newValue); 848 } 849 get label() { 850 return this.__label.get(); 851 } 852 set label(newValue) { 853 this.__label.set(newValue); 854 } 855 get suffixIcon() { 856 return this.__suffixIcon.get(); 857 } 858 set suffixIcon(newValue) { 859 this.__suffixIcon.set(newValue); 860 } 861 get suffixSymbol() { 862 return this.__suffixSymbol.get(); 863 } 864 set suffixSymbol(newValue) { 865 this.__suffixSymbol.set(newValue); 866 } 867 get suffixSymbolOptions() { 868 return this.__suffixSymbolOptions.get(); 869 } 870 set suffixSymbolOptions(newValue) { 871 this.__suffixSymbolOptions.set(newValue); 872 } 873 get chipNodeBackgroundColor() { 874 return this.__chipNodeBackgroundColor.get(); 875 } 876 set chipNodeBackgroundColor(newValue) { 877 this.__chipNodeBackgroundColor.set(newValue); 878 } 879 get chipNodeActivatedBackgroundColor() { 880 return this.__chipNodeActivatedBackgroundColor.get(); 881 } 882 set chipNodeActivatedBackgroundColor(newValue) { 883 this.__chipNodeActivatedBackgroundColor.set(newValue); 884 } 885 get chipNodeRadius() { 886 return this.__chipNodeRadius.get(); 887 } 888 set chipNodeRadius(newValue) { 889 this.__chipNodeRadius.set(newValue); 890 } 891 get chipEnabled() { 892 return this.__chipEnabled.get(); 893 } 894 set chipEnabled(newValue) { 895 this.__chipEnabled.set(newValue); 896 } 897 get chipActivated() { 898 return this.__chipActivated.get(); 899 } 900 set chipActivated(newValue) { 901 this.__chipActivated.set(newValue); 902 } 903 get chipAccessibilitySelectedType() { 904 return this.__chipAccessibilitySelectedType.get(); 905 } 906 set chipAccessibilitySelectedType(newValue) { 907 this.__chipAccessibilitySelectedType.set(newValue); 908 } 909 get chipAccessibilityDescription() { 910 return this.__chipAccessibilityDescription.get(); 911 } 912 set chipAccessibilityDescription(newValue) { 913 this.__chipAccessibilityDescription.set(newValue); 914 } 915 get chipAccessibilityLevel() { 916 return this.__chipAccessibilityLevel.get(); 917 } 918 set chipAccessibilityLevel(newValue) { 919 this.__chipAccessibilityLevel.set(newValue); 920 } 921 get isChipExist() { 922 return this.__isChipExist.get(); 923 } 924 set isChipExist(newValue) { 925 this.__isChipExist.set(newValue); 926 } 927 get chipScale() { 928 return this.__chipScale.get(); 929 } 930 set chipScale(newValue) { 931 this.__chipScale.set(newValue); 932 } 933 get chipOpacity() { 934 return this.__chipOpacity.get(); 935 } 936 set chipOpacity(newValue) { 937 this.__chipOpacity.set(newValue); 938 } 939 get suffixSymbolHeight() { 940 return this.__suffixSymbolHeight.get(); 941 } 942 set suffixSymbolHeight(newValue) { 943 this.__suffixSymbolHeight.set(newValue); 944 } 945 get suffixSymbolWidth() { 946 return this.__suffixSymbolWidth.get(); 947 } 948 set suffixSymbolWidth(newValue) { 949 this.__suffixSymbolWidth.set(newValue); 950 } 951 get breakPoint() { 952 return this.__breakPoint.get(); 953 } 954 set breakPoint(newValue) { 955 this.__breakPoint.set(newValue); 956 } 957 get fontSizeScale() { 958 return this.__fontSizeScale.get(); 959 } 960 set fontSizeScale(newValue) { 961 this.__fontSizeScale.set(newValue); 962 } 963 get chipNodeInFocus() { 964 return this.__chipNodeInFocus.get(); 965 } 966 set chipNodeInFocus(newValue) { 967 this.__chipNodeInFocus.set(newValue); 968 } 969 aboutToAppear() { 970 this.smListener.on('change', mediaQueryResult => { 971 if (mediaQueryResult.matches) { 972 this.breakPoint = BreakPointsType.SM; 973 } 974 }); 975 this.mdListener.on('change', mediaQueryResult => { 976 if (mediaQueryResult.matches) { 977 this.breakPoint = BreakPointsType.MD; 978 } 979 }); 980 this.lgListener.on('change', mediaQueryResult => { 981 if (mediaQueryResult.matches) { 982 this.breakPoint = BreakPointsType.LG; 983 } 984 }); 985 let abilityContext = this.getUIContext().getHostContext(); 986 if (abilityContext) { 987 this.fontSizeScale = abilityContext.config?.fontSizeScale ?? 1; 988 this.environmentCallbackID = abilityContext.getApplicationContext().on('environment', this.environmentCallback); 989 } 990 } 991 aboutToDisappear() { 992 this.smListener.off('change'); 993 this.mdListener.off('change'); 994 this.lgListener.off('change'); 995 if (this.environmentCallbackID) { 996 this.getUIContext()?.getHostContext()?.getApplicationContext().off('environment', this.environmentCallbackID); 997 this.environmentCallbackID = void 0; 998 } 999 } 1000 isSetActiveChipBgColor() { 1001 if (this.chipNodeActivatedBackgroundColor) { 1002 return false; 1003 } 1004 try { 1005 return ( 1006 ColorMetrics.resourceColor(this.chipNodeActivatedBackgroundColor).color !== 1007 ColorMetrics.resourceColor(this.theme.chipNode.activatedBackgroundColor).color 1008 ); 1009 } catch (error) { 1010 console.error(`[Chip] failed to get ColorMetrics.resourceColor`); 1011 return false; 1012 } 1013 } 1014 isSetNormalChipBgColor() { 1015 if (this.chipNodeBackgroundColor) { 1016 return false; 1017 } 1018 try { 1019 return ( 1020 ColorMetrics.resourceColor(this.chipNodeBackgroundColor).color !== 1021 ColorMetrics.resourceColor(this.theme.chipNode.backgroundColor).color 1022 ); 1023 } catch (error) { 1024 console.error(`[Chip] failed to get resourceColor`); 1025 return false; 1026 } 1027 } 1028 getShadowStyles() { 1029 if (!this.chipNodeInFocus) { 1030 return undefined; 1031 } 1032 return this.resourceToNumber( 1033 this.isSmallChipSize() ? this.theme.chipNode.smallShadowStyle : this.theme.chipNode.normalShadowStyle, 1034 -1 1035 ); 1036 } 1037 ChipBuilder(parent = null) { 1038 this.observeComponentCreation2((elmtId, isInitialRender) => { 1039 Button.createWithChild({ type: ButtonType.Normal }); 1040 Button.clip(false); 1041 Button.shadow(this.getShadowStyles()); 1042 Button.padding(0); 1043 Button.focusable(true); 1044 Button.size(this.getChipSize()); 1045 Button.enabled(this.isChipEnabled()); 1046 Button.direction(this.chipDirection); 1047 Button.backgroundColor(this.getChipBackgroundColor()); 1048 Button.borderWidth(this.theme.chipNode.defaultBorderWidth); 1049 Button.borderColor(this.getChipNodeBorderColor()); 1050 Button.borderRadius(this.getChipBorderRadius()); 1051 Button.scale(ObservedObject.GetRawObject(this.chipScale)); 1052 Button.opacity(this.chipOpacity); 1053 Button.accessibilityGroup(true); 1054 Button.accessibilityDescription(this.getAccessibilityDescription()); 1055 Button.accessibilityLevel(this.getAccessibilityLevel()); 1056 Button.accessibilityChecked(this.getAccessibilityChecked()); 1057 Button.accessibilitySelected(this.getAccessibilitySelected()); 1058 Button.onClick(this.getChipOnClicked()); 1059 Button.onKeyEvent(event => { 1060 if (!event || event.type === null || event.type !== KeyType.Down) { 1061 return; 1062 } 1063 let isDeleteChip = event.keyCode === KeyCode.KEYCODE_FORWARD_DEL; 1064 let isEnterDeleteChip = 1065 event.keyCode === KeyCode.KEYCODE_ENTER && 1066 this.allowClose !== false && 1067 !this.suffixIcon?.src && 1068 this.isSuffixIconFocusStyleCustomized; 1069 if (isDeleteChip || isEnterDeleteChip) { 1070 this.deleteChip(); 1071 } 1072 }); 1073 Button.onFocus(() => { 1074 if (this.isSuffixIconFocusStyleCustomized) { 1075 this.chipNodeInFocus = true; 1076 } 1077 this.chipZoomIn(); 1078 }); 1079 Button.onBlur(() => { 1080 if (this.isSuffixIconFocusStyleCustomized) { 1081 this.chipNodeInFocus = false; 1082 } 1083 this.chipZoomOut(); 1084 }); 1085 Button.onHover( 1086 !this.isSuffixIconFocusStyleCustomized 1087 ? undefined 1088 : isHover => { 1089 isHover ? this.chipZoomIn() : this.chipZoomOut(); 1090 } 1091 ); 1092 }, Button); 1093 this.observeComponentCreation2((elmtId, isInitialRender) => { 1094 Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }); 1095 Flex.direction(this.chipDirection); 1096 Flex.padding(this.getChipPadding()); 1097 Flex.size(this.getChipSize()); 1098 Flex.constraintSize(this.getChipConstraintSize()); 1099 }, Flex); 1100 this.observeComponentCreation2((elmtId, isInitialRender) => { 1101 If.create(); 1102 if (this.hasPrefixSymbol()) { 1103 this.ifElseBranchUpdateFunction(0, () => { 1104 this.observeComponentCreation2((elmtId, isInitialRender) => { 1105 SymbolGlyph.create(); 1106 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1107 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.PREFIX_SYMBOL)); 1108 SymbolGlyph.flexShrink(0); 1109 SymbolGlyph.attributeModifier.bind(this)(this.getPrefixSymbolModifier()); 1110 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1111 SymbolGlyph.symbolEffect(this.symbolEffect, false); 1112 SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect); 1113 }, SymbolGlyph); 1114 }); 1115 } else if (this.prefixIcon?.src) { 1116 this.ifElseBranchUpdateFunction(1, () => { 1117 this.observeComponentCreation2((elmtId, isInitialRender) => { 1118 Image.create(this.prefixIcon.src); 1119 Image.direction(this.chipDirection); 1120 Image.size(this.getPrefixIconSize()); 1121 Image.fillColor(this.getPrefixIconFilledColor()); 1122 Image.objectFit(ImageFit.Cover); 1123 Image.focusable(false); 1124 Image.flexShrink(0); 1125 Image.draggable(false); 1126 }, Image); 1127 }); 1128 } else { 1129 this.ifElseBranchUpdateFunction(2, () => {}); 1130 } 1131 }, If); 1132 If.pop(); 1133 this.observeComponentCreation2((elmtId, isInitialRender) => { 1134 Text.create(this.getChipText()); 1135 Text.draggable(false); 1136 Text.flexShrink(1); 1137 Text.focusable(true); 1138 Text.maxLines(1); 1139 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1140 Text.textAlign(TextAlign.Center); 1141 Text.direction(this.chipDirection); 1142 Text.fontSize(this.getLabelFontSize()); 1143 Text.fontColor(this.getLabelFontColor()); 1144 Text.fontFamily(this.getLabelFontFamily()); 1145 Text.fontWeight(this.getLabelFontWeight()); 1146 Text.margin(this.getLabelMargin()); 1147 }, Text); 1148 Text.pop(); 1149 this.observeComponentCreation2((elmtId, isInitialRender) => { 1150 If.create(); 1151 if (this.hasSuffixSymbol()) { 1152 this.ifElseBranchUpdateFunction(0, () => { 1153 this.observeComponentCreation2((elmtId, isInitialRender) => { 1154 Button.createWithChild({ type: ButtonType.Normal }); 1155 Button.onClick(this.getSuffixSymbolAction()); 1156 Button.accessibilityText(this.getSuffixSymbolAccessibilityText()); 1157 Button.accessibilityDescription(this.getSuffixSymbolAccessibilityDescription()); 1158 Button.accessibilityLevel(this.getSuffixSymbolAccessibilityLevel()); 1159 Button.flexShrink(0); 1160 Button.backgroundColor(Color.Transparent); 1161 Button.borderRadius(0); 1162 Button.padding(0); 1163 Button.stateEffect(false); 1164 Button.hoverEffect(HoverEffect.None); 1165 Button.focusable(this.isSuffixIconFocusable); 1166 }, Button); 1167 this.observeComponentCreation2((elmtId, isInitialRender) => { 1168 SymbolGlyph.create(); 1169 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1170 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL)); 1171 SymbolGlyph.attributeModifier.bind(this)(this.getSuffixSymbolModifier()); 1172 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1173 SymbolGlyph.symbolEffect(this.symbolEffect, false); 1174 SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect); 1175 }, SymbolGlyph); 1176 Button.pop(); 1177 }); 1178 } else if (this.suffixIcon?.src) { 1179 this.ifElseBranchUpdateFunction(1, () => { 1180 this.observeComponentCreation2((elmtId, isInitialRender) => { 1181 Button.createWithChild({ type: ButtonType.Normal }); 1182 Button.backgroundColor(Color.Transparent); 1183 Button.borderRadius(0); 1184 Button.padding(0); 1185 Button.flexShrink(0); 1186 Button.stateEffect(false); 1187 Button.hoverEffect(HoverEffect.None); 1188 Button.size(this.getSuffixIconSize()); 1189 Button.accessibilityText(this.getSuffixIconAccessibilityText()); 1190 Button.accessibilityDescription(this.getSuffixIconAccessibilityDescription()); 1191 Button.accessibilityLevel(this.getSuffixIconAccessibilityLevel()); 1192 Button.onClick(this.getSuffixIconAction()); 1193 Button.focusable(this.isSuffixIconFocusable); 1194 }, Button); 1195 this.observeComponentCreation2((elmtId, isInitialRender) => { 1196 Image.create(this.suffixIcon.src); 1197 Image.direction(this.chipDirection); 1198 Image.size(this.getSuffixIconSize()); 1199 Image.fillColor(this.getSuffixIconFilledColor()); 1200 Image.objectFit(ImageFit.Cover); 1201 Image.draggable(false); 1202 }, Image); 1203 Button.pop(); 1204 }); 1205 } else if (this.isClosable()) { 1206 this.ifElseBranchUpdateFunction(2, () => { 1207 this.observeComponentCreation2((elmtId, isInitialRender) => { 1208 Button.createWithChild({ type: ButtonType.Normal }); 1209 Button.backgroundColor(Color.Transparent); 1210 Button.borderRadius(0); 1211 Button.padding(0); 1212 Button.flexShrink(0); 1213 Button.stateEffect(false); 1214 Button.hoverEffect(HoverEffect.None); 1215 Button.accessibilityText(this.getCloseIconAccessibilityText()); 1216 Button.accessibilityDescription(this.getCloseIconAccessibilityDescription()); 1217 Button.accessibilityLevel(this.getCloseIconAccessibilityLevel()); 1218 Button.onClick(() => { 1219 if (!this.isChipEnabled()) { 1220 return; 1221 } 1222 this.onClose?.(); 1223 this.deleteChip(); 1224 }); 1225 Button.focusable(this.isSuffixIconFocusable); 1226 }, Button); 1227 this.observeComponentCreation2((elmtId, isInitialRender) => { 1228 SymbolGlyph.create({ 1229 id: -1, 1230 type: 40000, 1231 params: ['sys.symbol.xmark'], 1232 bundleName: '__harDefaultBundleName__', 1233 moduleName: '__harDefaultModuleName__', 1234 }); 1235 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1236 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL)); 1237 }, SymbolGlyph); 1238 Button.pop(); 1239 }); 1240 } else { 1241 this.ifElseBranchUpdateFunction(3, () => {}); 1242 } 1243 }, If); 1244 If.pop(); 1245 Flex.pop(); 1246 Button.pop(); 1247 } 1248 getCloseIconAccessibilityLevel() { 1249 if ( 1250 this.closeOptions?.accessibilityLevel === 'no' || 1251 this.closeOptions?.accessibilityLevel === 'no-hide-descendants' 1252 ) { 1253 return this.closeOptions.accessibilityLevel; 1254 } 1255 return 'yes'; 1256 } 1257 getCloseIconAccessibilityDescription() { 1258 if (typeof this.closeOptions?.accessibilityDescription === 'undefined') { 1259 return void 0; 1260 } 1261 return this.closeOptions.accessibilityDescription; 1262 } 1263 getCloseIconAccessibilityText() { 1264 if (typeof this.closeOptions?.accessibilityText === 'undefined') { 1265 return { 1266 id: -1, 1267 type: 10003, 1268 params: ['sys.string.delete_used_for_accessibility_text'], 1269 bundleName: '__harDefaultBundleName__', 1270 moduleName: '__harDefaultModuleName__', 1271 }; 1272 } 1273 return this.closeOptions.accessibilityText; 1274 } 1275 getSuffixIconAction() { 1276 if (this.suffixIcon?.src) { 1277 if (!this.suffixIcon?.action) { 1278 return void 0; 1279 } 1280 return () => { 1281 if (this.isChipEnabled()) { 1282 this.suffixIcon?.action?.(); 1283 } 1284 }; 1285 } 1286 return void 0; 1287 } 1288 getSuffixIconFilledColor() { 1289 if (this.isChipActivated()) { 1290 return this.suffixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON); 1291 } 1292 return this.suffixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.SUFFIX_ICON); 1293 } 1294 getSuffixIconSize() { 1295 let suffixIconSize = { width: 0, height: 0 }; 1296 if (typeof this.suffixIcon?.size?.width !== 'undefined' && this.isValidLength(this.suffixIcon.size.width)) { 1297 suffixIconSize.width = this.suffixIcon.size.width; 1298 } else { 1299 suffixIconSize.width = this.isSmallChipSize() 1300 ? this.theme.suffixIcon.smallSize.width 1301 : this.theme.suffixIcon.normalSize.width; 1302 } 1303 if (typeof this.suffixIcon?.size?.height !== 'undefined' && this.isValidLength(this.suffixIcon.size.height)) { 1304 suffixIconSize.height = this.suffixIcon.size.height; 1305 } else { 1306 suffixIconSize.height = this.isSmallChipSize() 1307 ? this.theme.suffixIcon.smallSize.height 1308 : this.theme.suffixIcon.normalSize.height; 1309 } 1310 return suffixIconSize; 1311 } 1312 getSuffixIconAccessibilityLevel() { 1313 if (this.suffixIcon?.accessibilityLevel === 'no' || this.suffixIcon?.accessibilityLevel === 'no-hide-descendants') { 1314 return this.suffixIcon.accessibilityLevel; 1315 } 1316 return this.suffixIcon?.action ? 'yes' : 'no'; 1317 } 1318 getSuffixIconAccessibilityDescription() { 1319 if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') { 1320 return void 0; 1321 } 1322 return this.suffixIcon.accessibilityDescription; 1323 } 1324 getSuffixIconAccessibilityText() { 1325 if (typeof this.suffixIcon?.accessibilityText === 'undefined') { 1326 return void 0; 1327 } 1328 return this.suffixIcon.accessibilityText; 1329 } 1330 isClosable() { 1331 return this.allowClose ?? true; 1332 } 1333 getSuffixSymbolModifier() { 1334 if (this.isChipActivated()) { 1335 return this.suffixSymbol?.activated; 1336 } 1337 return this.suffixSymbol?.normal; 1338 } 1339 getSuffixSymbolAccessibilityLevel() { 1340 if (this.isChipActivated()) { 1341 if ( 1342 this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no' || 1343 this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no-hide-descendants' 1344 ) { 1345 return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel; 1346 } 1347 return this.suffixSymbolOptions?.action ? 'yes' : 'no'; 1348 } 1349 if ( 1350 this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no' || 1351 this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no-hide-descendants' 1352 ) { 1353 return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel; 1354 } 1355 return this.suffixSymbolOptions?.action ? 'yes' : 'no'; 1356 } 1357 getSuffixSymbolAccessibilityDescription() { 1358 if (this.isChipActivated()) { 1359 if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityDescription !== 'undefined') { 1360 return this.suffixSymbolOptions.activatedAccessibility.accessibilityDescription; 1361 } 1362 return void 0; 1363 } 1364 if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityDescription !== 'undefined') { 1365 return this.suffixSymbolOptions.normalAccessibility.accessibilityDescription; 1366 } 1367 return void 0; 1368 } 1369 getSuffixSymbolAccessibilityText() { 1370 if (this.isChipActivated()) { 1371 if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityText !== 'undefined') { 1372 return this.suffixSymbolOptions.activatedAccessibility.accessibilityText; 1373 } 1374 return void 0; 1375 } 1376 if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityText !== 'undefined') { 1377 return this.suffixSymbolOptions.normalAccessibility.accessibilityText; 1378 } 1379 return void 0; 1380 } 1381 getSuffixSymbolAction() { 1382 if (typeof this.suffixSymbolOptions?.action === 'undefined') { 1383 return void 0; 1384 } 1385 return () => { 1386 if (!this.isChipEnabled()) { 1387 return; 1388 } 1389 this.suffixSymbolOptions?.action?.(); 1390 }; 1391 } 1392 hasSuffixSymbol() { 1393 return !!(this.suffixSymbol?.normal || this.suffixSymbol?.activated); 1394 } 1395 getPrefixIconFilledColor() { 1396 if (this.isChipActivated()) { 1397 return this.prefixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON); 1398 } 1399 return this.prefixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.PREFIX_ICON); 1400 } 1401 getPrefixIconSize() { 1402 let prefixIconSize = { width: 0, height: 0 }; 1403 if (typeof this.prefixIcon?.size?.width !== 'undefined' && this.isValidLength(this.prefixIcon.size.width)) { 1404 prefixIconSize.width = this.prefixIcon.size.width; 1405 } else { 1406 prefixIconSize.width = this.isSmallChipSize() 1407 ? this.theme.prefixIcon.smallSize.width 1408 : this.theme.prefixIcon.normalSize.width; 1409 } 1410 if (typeof this.prefixIcon?.size?.height !== 'undefined' && this.isValidLength(this.prefixIcon.size.height)) { 1411 prefixIconSize.height = this.prefixIcon.size.height; 1412 } else { 1413 prefixIconSize.height = this.isSmallChipSize() 1414 ? this.theme.prefixIcon.smallSize.height 1415 : this.theme.prefixIcon.normalSize.height; 1416 } 1417 return prefixIconSize; 1418 } 1419 getPrefixSymbolModifier() { 1420 if (this.isChipActivated()) { 1421 return this.prefixSymbol?.activated; 1422 } 1423 return this.prefixSymbol?.normal; 1424 } 1425 getDefaultSymbolColor(iconType) { 1426 return this.isChipActivated() ? this.getSymbolActiveColor(iconType) : this.getSymbolFillColor(iconType); 1427 } 1428 getDefaultActiveIconColor(iconType) { 1429 if (iconType === IconType.PREFIX_ICON) { 1430 return this.chipNodeInFocus 1431 ? this.theme.prefixIcon.focusActivatedColor 1432 : this.theme.prefixIcon.activatedFillColor; 1433 } else { 1434 return this.chipNodeInFocus 1435 ? this.theme.suffixIcon.focusActivatedColor 1436 : this.theme.suffixIcon.activatedFillColor; 1437 } 1438 } 1439 getDefaultFillIconColor(iconType) { 1440 if (iconType === IconType.PREFIX_ICON) { 1441 return this.chipNodeInFocus ? this.theme.prefixIcon.focusFillColor : this.theme.prefixIcon.fillColor; 1442 } else { 1443 return this.chipNodeInFocus ? this.theme.suffixIcon.focusFillColor : this.theme.suffixIcon.fillColor; 1444 } 1445 } 1446 getSymbolActiveColor(iconType) { 1447 if (!this.chipNodeInFocus) { 1448 return this.theme.defaultSymbol.activatedFontColor; 1449 } 1450 if (iconType === IconType.PREFIX_SYMBOL) { 1451 return [this.theme.prefixIcon.focusActivatedColor]; 1452 } 1453 if (iconType === IconType.SUFFIX_SYMBOL) { 1454 return [this.theme.suffixIcon.focusActivatedColor]; 1455 } 1456 return this.theme.defaultSymbol.activatedFontColor; 1457 } 1458 getSymbolFillColor(iconType) { 1459 if (!this.chipNodeInFocus) { 1460 return this.theme.defaultSymbol.normalFontColor; 1461 } 1462 if (iconType === IconType.PREFIX_SYMBOL) { 1463 return [this.theme.prefixIcon.focusFillColor]; 1464 } 1465 if (iconType === IconType.SUFFIX_SYMBOL) { 1466 return [this.theme.suffixIcon.focusFillColor]; 1467 } 1468 return this.theme.defaultSymbol.normalFontColor; 1469 } 1470 hasPrefixSymbol() { 1471 return !!(this.prefixSymbol?.normal || this.prefixSymbol?.activated); 1472 } 1473 getChipConstraintSize() { 1474 const constraintSize = {}; 1475 if (typeof this.chipSize === 'string') { 1476 constraintSize.maxWidth = this.getChipMaxWidth(); 1477 constraintSize.minHeight = 1478 this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight; 1479 } else { 1480 if (typeof this.chipSize?.width === 'undefined' || !this.isValidLength(this.chipSize.width)) { 1481 constraintSize.maxWidth = this.getChipMaxWidth(); 1482 } 1483 if (typeof this.chipSize?.height === 'undefined' || !this.isValidLength(this.chipSize.height)) { 1484 constraintSize.minHeight = this.theme.chipNode.normalHeight; 1485 } 1486 } 1487 return constraintSize; 1488 } 1489 getChipMaxWidth() { 1490 if (this.fontSizeScale >= this.theme.chipNode.suitAgeScale) { 1491 return void 0; 1492 } 1493 if (this.breakPoint === BreakPointsType.SM) { 1494 return this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth; 1495 } 1496 if (this.breakPoint === BreakPointsType.MD) { 1497 return this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth; 1498 } 1499 if (this.breakPoint === BreakPointsType.LG) { 1500 return this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth; 1501 } 1502 return void 0; 1503 } 1504 getChipSize() { 1505 const chipSize = { 1506 width: 'auto', 1507 height: 'auto', 1508 }; 1509 if (typeof this.chipSize !== 'string') { 1510 if (typeof this.chipSize?.width !== 'undefined' && this.isValidLength(this.chipSize.width)) { 1511 chipSize.width = this.chipSize.width; 1512 } 1513 if (typeof this.chipSize?.height !== 'undefined' && this.isValidLength(this.chipSize.height)) { 1514 chipSize.height = this.chipSize.height; 1515 } 1516 } 1517 return chipSize; 1518 } 1519 getChipPadding() { 1520 return this.isSmallChipSize() 1521 ? this.theme.chipNode.localizedSmallPadding 1522 : this.theme.chipNode.localizedNormalPadding; 1523 } 1524 getLabelMargin() { 1525 const localizedLabelMargin = { 1526 start: LengthMetrics.vp(0), 1527 end: LengthMetrics.vp(0), 1528 }; 1529 const defaultLocalizedMargin = this.isSmallChipSize() 1530 ? this.theme.label.localizedSmallMargin 1531 : this.theme.label.localizedNormalMargin; 1532 if ( 1533 typeof this.label?.localizedLabelMargin?.start !== 'undefined' && 1534 this.label.localizedLabelMargin.start.value >= 0 1535 ) { 1536 localizedLabelMargin.start = this.label.localizedLabelMargin.start; 1537 } else if (this.hasPrefix()) { 1538 localizedLabelMargin.start = defaultLocalizedMargin.start; 1539 } 1540 if ( 1541 typeof this.label?.localizedLabelMargin?.end !== 'undefined' && 1542 this.label.localizedLabelMargin.end.value >= 0 1543 ) { 1544 localizedLabelMargin.end = this.label.localizedLabelMargin.end; 1545 } else if (this.hasSuffix() || this.isNeedShowCloseIconMargin()) { 1546 localizedLabelMargin.end = defaultLocalizedMargin.end; 1547 } 1548 if (typeof this.label?.localizedLabelMargin === 'object') { 1549 return localizedLabelMargin; 1550 } 1551 if (typeof this.label.labelMargin === 'object') { 1552 const labelMargin = { left: 0, right: 0 }; 1553 const defaultLabelMargin = this.isSmallChipSize() ? this.theme.label.smallMargin : this.theme.label.normalMargin; 1554 if (typeof this.label?.labelMargin?.left !== 'undefined' && this.isValidLength(this.label.labelMargin.left)) { 1555 labelMargin.left = this.label.labelMargin.left; 1556 } else if (this.hasPrefix()) { 1557 labelMargin.left = defaultLabelMargin.left; 1558 } 1559 if (typeof this.label?.labelMargin?.right !== 'undefined' && this.isValidLength(this.label.labelMargin.right)) { 1560 labelMargin.right = this.label.labelMargin.right; 1561 } else if (this.hasSuffix()) { 1562 labelMargin.right = defaultLabelMargin.right; 1563 } 1564 return labelMargin; 1565 } 1566 return localizedLabelMargin; 1567 } 1568 hasSuffix() { 1569 if (this.suffixIcon?.src) { 1570 return true; 1571 } 1572 return this.isChipActivated() ? !!this.suffixSymbol?.activated : !!this.suffixSymbol?.normal; 1573 } 1574 hasPrefix() { 1575 if (this.prefixIcon?.src) { 1576 return true; 1577 } 1578 return this.isChipActivated() ? !!this.prefixSymbol?.activated : !!this.prefixSymbol?.normal; 1579 } 1580 getLabelFontWeight() { 1581 if (this.isChipActivated()) { 1582 return FontWeight.Medium; 1583 } 1584 return this.resourceToNumber(this.theme.label.fontWeight, FontWeight.Regular); 1585 } 1586 getLabelFontFamily() { 1587 return this.label?.fontFamily ?? this.theme.label.fontFamily; 1588 } 1589 defaultSymbolFontsize() { 1590 return this.isSmallChipSize() 1591 ? this.theme.defaultSymbol.smallSymbolFontSize 1592 : this.theme.defaultSymbol.normalSymbolFontSize; 1593 } 1594 getActiveFontColor() { 1595 return this.chipNodeInFocus ? this.theme.label.focusActiveFontColor : this.theme.label.activatedFontColor; 1596 } 1597 getFontColor() { 1598 return this.chipNodeInFocus ? this.theme.label.focusFontColor : this.theme.label.fontColor; 1599 } 1600 getChipNodeBorderColor() { 1601 let themeChipNode = this.theme.chipNode; 1602 return this.isChipActivated() ? themeChipNode.activatedBorderColor : themeChipNode.borderColor; 1603 } 1604 getLabelFontColor() { 1605 if (this.isChipActivated()) { 1606 return this.label?.activatedFontColor ?? this.getActiveFontColor(); 1607 } 1608 return this.label?.fontColor ?? this.getFontColor(); 1609 } 1610 getLabelFontSize() { 1611 if (typeof this.label.fontSize !== 'undefined' && this.isValidLength(this.label.fontSize)) { 1612 return this.label.fontSize; 1613 } 1614 if (this.isSmallChipSize()) { 1615 return this.theme.label.smallFontSize; 1616 } 1617 return this.theme.label.normalFontSize; 1618 } 1619 getChipText() { 1620 return this.label?.text ?? ''; 1621 } 1622 deleteChip() { 1623 Context.animateTo({ curve: Curve.Sharp, duration: 150 }, () => { 1624 this.chipOpacity = 0; 1625 }); 1626 Context.animateTo( 1627 { 1628 curve: Curve.FastOutLinearIn, 1629 duration: 150, 1630 onFinish: () => { 1631 this.isChipExist = false; 1632 }, 1633 }, 1634 () => { 1635 this.chipScale = { x: 0.85, y: 0.85 }; 1636 } 1637 ); 1638 } 1639 getChipOnClicked() { 1640 if (this.onClicked) { 1641 return this.onClicked.bind(this); 1642 } 1643 return void 0; 1644 } 1645 getAccessibilitySelected() { 1646 if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.SELECTED) { 1647 return this.isChipActivated(); 1648 } 1649 return void 0; 1650 } 1651 getAccessibilityChecked() { 1652 if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.CHECKED) { 1653 return this.isChipActivated(); 1654 } 1655 return void 0; 1656 } 1657 getChipAccessibilitySelectedType() { 1658 if (typeof this.chipActivated === 'undefined') { 1659 return AccessibilitySelectedType.CLICKED; 1660 } 1661 return this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED; 1662 } 1663 getAccessibilityLevel() { 1664 return this.chipAccessibilityLevel; 1665 } 1666 getAccessibilityDescription() { 1667 if (typeof this.chipAccessibilityDescription === 'undefined') { 1668 return void 0; 1669 } 1670 return this.chipAccessibilityDescription; 1671 } 1672 isChipEnabled() { 1673 return this.chipEnabled ?? true; 1674 } 1675 getChipBorderRadius() { 1676 if (typeof this.chipNodeRadius !== 'undefined' && this.isValidLength(this.chipNodeRadius)) { 1677 return this.chipNodeRadius; 1678 } 1679 return this.isSmallChipSize() ? this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius; 1680 } 1681 isSmallChipSize() { 1682 return typeof this.chipSize === 'string' && this.chipSize === ChipSize.SMALL; 1683 } 1684 getChipBackgroundColor() { 1685 let themeChipNode = this.theme.chipNode; 1686 if (this.isChipActivated()) { 1687 return this.chipNodeInFocus && !this.isSetActiveChipBgColor() 1688 ? themeChipNode.focusActivatedBgColor 1689 : this.getColor(this.chipNodeActivatedBackgroundColor, themeChipNode.activatedBackgroundColor); 1690 } 1691 return this.chipNodeInFocus && !this.isSetNormalChipBgColor() 1692 ? themeChipNode.focusBgColor 1693 : this.getColor(this.chipNodeBackgroundColor, this.theme.chipNode.backgroundColor); 1694 } 1695 getColor(color, defaultColor) { 1696 if (!color) { 1697 return defaultColor; 1698 } 1699 try { 1700 ColorMetrics.resourceColor(color).color; 1701 return color; 1702 } catch (e) { 1703 console.error(`[Chip] failed to get color`); 1704 return Color.Transparent; 1705 } 1706 } 1707 isChipActivated() { 1708 return this.chipActivated ?? false; 1709 } 1710 resourceToNumber(resource, defaultValue) { 1711 if (!resource || !resource.type) { 1712 console.error('[Chip] failed: resource get fail'); 1713 return defaultValue; 1714 } 1715 const resourceManager = this.getUIContext().getHostContext()?.resourceManager; 1716 if (!resourceManager) { 1717 console.error('[Chip] failed to get resourceManager'); 1718 return defaultValue; 1719 } 1720 switch (resource.type) { 1721 case RESOURCE_TYPE_FLOAT: 1722 case RESOURCE_TYPE_INTEGER: 1723 try { 1724 if (resource.id !== -1) { 1725 return resourceManager.getNumber(resource); 1726 } 1727 return resourceManager.getNumberByName(resource.params[0].split('.')[2]); 1728 } catch (error) { 1729 console.error(`[Chip] get resource error, return defaultValue`); 1730 return defaultValue; 1731 } 1732 default: 1733 return defaultValue; 1734 } 1735 } 1736 isValidLength(length) { 1737 if (typeof length === 'number') { 1738 return length >= 0; 1739 } else if (typeof length === 'string') { 1740 return this.isValidLengthString(length); 1741 } else if (typeof length === 'object') { 1742 const resource = length; 1743 const resourceManager = this.getUIContext().getHostContext()?.resourceManager; 1744 if (!resourceManager) { 1745 console.error('[Chip] failed to get resourceManager.'); 1746 return false; 1747 } 1748 switch (resource.type) { 1749 case RESOURCE_TYPE_FLOAT: 1750 case RESOURCE_TYPE_INTEGER: 1751 return resourceManager.getNumber(resource) >= 0; 1752 case RESOURCE_TYPE_STRING: 1753 return this.isValidLengthString(resourceManager.getStringSync(resource)); 1754 default: 1755 return false; 1756 } 1757 } 1758 return false; 1759 } 1760 isValidLengthString(length) { 1761 const matches = length.match(/(-?\d+(?:\.\d+)?)_?(fp|vp|px|lpx)?$/i); 1762 if (!matches || matches.length < 3) { 1763 return false; 1764 } 1765 return Number.parseInt(matches[1], 10) >= 0; 1766 } 1767 initialRender() { 1768 this.observeComponentCreation2((elmtId, isInitialRender) => { 1769 If.create(); 1770 if (this.isChipExist) { 1771 this.ifElseBranchUpdateFunction(0, () => { 1772 this.ChipBuilder.bind(this)(); 1773 }); 1774 } else { 1775 this.ifElseBranchUpdateFunction(1, () => {}); 1776 } 1777 }, If); 1778 If.pop(); 1779 } 1780 chipZoomOut() { 1781 if (this.isSuffixIconFocusStyleCustomized) { 1782 this.chipScale = { 1783 x: 1, 1784 y: 1, 1785 }; 1786 } 1787 } 1788 chipZoomIn() { 1789 if (this.isSuffixIconFocusStyleCustomized) { 1790 this.chipScale = { 1791 x: this.resourceToNumber(this.theme.chipNode.focusBtnScaleX, 1), 1792 y: this.resourceToNumber(this.theme.chipNode.focusBtnScaleY, 1), 1793 }; 1794 } 1795 } 1796 isNeedShowCloseIconMargin() { 1797 return this.isClosable() && this.isSuffixIconFocusStyleCustomized; 1798 } 1799 rerender() { 1800 this.updateDirtyElements(); 1801 } 1802} 1803 1804export default { 1805 Chip, 1806 ChipSize, 1807 AccessibilitySelectedType, 1808}; 1809