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 this.chipScale = { 1077 x: this.resourceToNumber(this.theme.chipNode.focusBtnScaleX, 1), 1078 y: this.resourceToNumber(this.theme.chipNode.focusBtnScaleY, 1), 1079 }; 1080 } 1081 }); 1082 Button.onBlur(() => { 1083 if (this.isSuffixIconFocusStyleCustomized) { 1084 this.chipNodeInFocus = false; 1085 this.chipScale = { 1086 x: 1, 1087 y: 1, 1088 }; 1089 } 1090 }); 1091 }, Button); 1092 this.observeComponentCreation2((elmtId, isInitialRender) => { 1093 Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }); 1094 Flex.direction(this.chipDirection); 1095 Flex.padding(this.getChipPadding()); 1096 Flex.size(this.getChipSize()); 1097 Flex.constraintSize(this.getChipConstraintSize()); 1098 }, Flex); 1099 this.observeComponentCreation2((elmtId, isInitialRender) => { 1100 If.create(); 1101 if (this.hasPrefixSymbol()) { 1102 this.ifElseBranchUpdateFunction(0, () => { 1103 this.observeComponentCreation2((elmtId, isInitialRender) => { 1104 SymbolGlyph.create(); 1105 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1106 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.PREFIX_SYMBOL)); 1107 SymbolGlyph.flexShrink(0); 1108 SymbolGlyph.attributeModifier.bind(this)(this.getPrefixSymbolModifier()); 1109 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1110 SymbolGlyph.symbolEffect(this.symbolEffect, false); 1111 SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect); 1112 }, SymbolGlyph); 1113 }); 1114 } else if (this.prefixIcon?.src) { 1115 this.ifElseBranchUpdateFunction(1, () => { 1116 this.observeComponentCreation2((elmtId, isInitialRender) => { 1117 Image.create(this.prefixIcon.src); 1118 Image.direction(this.chipDirection); 1119 Image.size(this.getPrefixIconSize()); 1120 Image.fillColor(this.getPrefixIconFilledColor()); 1121 Image.objectFit(ImageFit.Cover); 1122 Image.focusable(false); 1123 Image.flexShrink(0); 1124 Image.draggable(false); 1125 }, Image); 1126 }); 1127 } else { 1128 this.ifElseBranchUpdateFunction(2, () => {}); 1129 } 1130 }, If); 1131 If.pop(); 1132 this.observeComponentCreation2((elmtId, isInitialRender) => { 1133 Text.create(this.getChipText()); 1134 Text.draggable(false); 1135 Text.flexShrink(1); 1136 Text.focusable(true); 1137 Text.maxLines(1); 1138 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1139 Text.textAlign(TextAlign.Center); 1140 Text.direction(this.chipDirection); 1141 Text.fontSize(this.getLabelFontSize()); 1142 Text.fontColor(this.getLabelFontColor()); 1143 Text.fontFamily(this.getLabelFontFamily()); 1144 Text.fontWeight(this.getLabelFontWeight()); 1145 Text.margin(this.getLabelMargin()); 1146 }, Text); 1147 Text.pop(); 1148 this.observeComponentCreation2((elmtId, isInitialRender) => { 1149 If.create(); 1150 if (this.hasSuffixSymbol()) { 1151 this.ifElseBranchUpdateFunction(0, () => { 1152 this.observeComponentCreation2((elmtId, isInitialRender) => { 1153 Button.createWithChild({ type: ButtonType.Normal }); 1154 Button.onClick(this.getSuffixSymbolAction()); 1155 Button.accessibilityText(this.getSuffixSymbolAccessibilityText()); 1156 Button.accessibilityDescription(this.getSuffixSymbolAccessibilityDescription()); 1157 Button.accessibilityLevel(this.getSuffixSymbolAccessibilityLevel()); 1158 Button.flexShrink(0); 1159 Button.backgroundColor(Color.Transparent); 1160 Button.borderRadius(0); 1161 Button.padding(0); 1162 Button.stateEffect(false); 1163 Button.hoverEffect(HoverEffect.None); 1164 Button.focusable(this.isSuffixIconFocusable); 1165 }, Button); 1166 this.observeComponentCreation2((elmtId, isInitialRender) => { 1167 SymbolGlyph.create(); 1168 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1169 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL)); 1170 SymbolGlyph.attributeModifier.bind(this)(this.getSuffixSymbolModifier()); 1171 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1172 SymbolGlyph.symbolEffect(this.symbolEffect, false); 1173 SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect); 1174 }, SymbolGlyph); 1175 Button.pop(); 1176 }); 1177 } else if (this.suffixIcon?.src) { 1178 this.ifElseBranchUpdateFunction(1, () => { 1179 this.observeComponentCreation2((elmtId, isInitialRender) => { 1180 Button.createWithChild({ type: ButtonType.Normal }); 1181 Button.backgroundColor(Color.Transparent); 1182 Button.borderRadius(0); 1183 Button.padding(0); 1184 Button.flexShrink(0); 1185 Button.stateEffect(false); 1186 Button.hoverEffect(HoverEffect.None); 1187 Button.size(this.getSuffixIconSize()); 1188 Button.accessibilityText(this.getSuffixIconAccessibilityText()); 1189 Button.accessibilityDescription(this.getSuffixIconAccessibilityDescription()); 1190 Button.accessibilityLevel(this.getSuffixIconAccessibilityLevel()); 1191 Button.onClick(this.getSuffixIconAction()); 1192 Button.focusable(this.isSuffixIconFocusable); 1193 }, Button); 1194 this.observeComponentCreation2((elmtId, isInitialRender) => { 1195 Image.create(this.suffixIcon.src); 1196 Image.direction(this.chipDirection); 1197 Image.size(this.getSuffixIconSize()); 1198 Image.fillColor(this.getSuffixIconFilledColor()); 1199 Image.objectFit(ImageFit.Cover); 1200 Image.draggable(false); 1201 }, Image); 1202 Button.pop(); 1203 }); 1204 } else if (this.isClosable()) { 1205 this.ifElseBranchUpdateFunction(2, () => { 1206 this.observeComponentCreation2((elmtId, isInitialRender) => { 1207 Button.createWithChild({ type: ButtonType.Normal }); 1208 Button.backgroundColor(Color.Transparent); 1209 Button.borderRadius(0); 1210 Button.padding(0); 1211 Button.flexShrink(0); 1212 Button.stateEffect(false); 1213 Button.hoverEffect(HoverEffect.None); 1214 Button.accessibilityText(this.getCloseIconAccessibilityText()); 1215 Button.accessibilityDescription(this.getCloseIconAccessibilityDescription()); 1216 Button.accessibilityLevel(this.getCloseIconAccessibilityLevel()); 1217 Button.onClick(() => { 1218 if (!this.isChipEnabled()) { 1219 return; 1220 } 1221 this.onClose?.(); 1222 this.deleteChip(); 1223 }); 1224 Button.focusable(this.isSuffixIconFocusable); 1225 }, Button); 1226 this.observeComponentCreation2((elmtId, isInitialRender) => { 1227 SymbolGlyph.create({ 1228 id: -1, 1229 type: 40000, 1230 params: ['sys.symbol.xmark'], 1231 bundleName: '__harDefaultBundleName__', 1232 moduleName: '__harDefaultModuleName__', 1233 }); 1234 SymbolGlyph.fontSize(this.defaultSymbolFontsize()); 1235 SymbolGlyph.fontColor(this.getDefaultSymbolColor(IconType.SUFFIX_SYMBOL)); 1236 }, SymbolGlyph); 1237 Button.pop(); 1238 }); 1239 } else { 1240 this.ifElseBranchUpdateFunction(3, () => {}); 1241 } 1242 }, If); 1243 If.pop(); 1244 Flex.pop(); 1245 Button.pop(); 1246 } 1247 getCloseIconAccessibilityLevel() { 1248 if ( 1249 this.closeOptions?.accessibilityLevel === 'no' || 1250 this.closeOptions?.accessibilityLevel === 'no-hide-descendants' 1251 ) { 1252 return this.closeOptions.accessibilityLevel; 1253 } 1254 return 'yes'; 1255 } 1256 getCloseIconAccessibilityDescription() { 1257 if (typeof this.closeOptions?.accessibilityDescription === 'undefined') { 1258 return void 0; 1259 } 1260 return this.closeOptions.accessibilityDescription; 1261 } 1262 getCloseIconAccessibilityText() { 1263 if (typeof this.closeOptions?.accessibilityText === 'undefined') { 1264 return { 1265 id: -1, 1266 type: 10003, 1267 params: ['sys.string.delete_used_for_accessibility_text'], 1268 bundleName: '__harDefaultBundleName__', 1269 moduleName: '__harDefaultModuleName__', 1270 }; 1271 } 1272 return this.closeOptions.accessibilityText; 1273 } 1274 getSuffixIconAction() { 1275 if (this.suffixIcon?.src) { 1276 if (!this.suffixIcon?.action) { 1277 return void 0; 1278 } 1279 return () => { 1280 if (this.isChipEnabled()) { 1281 this.suffixIcon?.action?.(); 1282 } 1283 }; 1284 } 1285 return void 0; 1286 } 1287 getSuffixIconFilledColor() { 1288 if (this.isChipActivated()) { 1289 return this.suffixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON); 1290 } 1291 return this.suffixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.SUFFIX_ICON); 1292 } 1293 getSuffixIconSize() { 1294 let suffixIconSize = { width: 0, height: 0 }; 1295 if (typeof this.suffixIcon?.size?.width !== 'undefined' && this.isValidLength(this.suffixIcon.size.width)) { 1296 suffixIconSize.width = this.suffixIcon.size.width; 1297 } else { 1298 suffixIconSize.width = this.isSmallChipSize() 1299 ? this.theme.suffixIcon.smallSize.width 1300 : this.theme.suffixIcon.normalSize.width; 1301 } 1302 if (typeof this.suffixIcon?.size?.height !== 'undefined' && this.isValidLength(this.suffixIcon.size.height)) { 1303 suffixIconSize.height = this.suffixIcon.size.height; 1304 } else { 1305 suffixIconSize.height = this.isSmallChipSize() 1306 ? this.theme.suffixIcon.smallSize.height 1307 : this.theme.suffixIcon.normalSize.height; 1308 } 1309 return suffixIconSize; 1310 } 1311 getSuffixIconAccessibilityLevel() { 1312 if (this.suffixIcon?.accessibilityLevel === 'no' || this.suffixIcon?.accessibilityLevel === 'no-hide-descendants') { 1313 return this.suffixIcon.accessibilityLevel; 1314 } 1315 return this.suffixIcon?.action ? 'yes' : 'no'; 1316 } 1317 getSuffixIconAccessibilityDescription() { 1318 if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') { 1319 return void 0; 1320 } 1321 return this.suffixIcon.accessibilityDescription; 1322 } 1323 getSuffixIconAccessibilityText() { 1324 if (typeof this.suffixIcon?.accessibilityText === 'undefined') { 1325 return void 0; 1326 } 1327 return this.suffixIcon.accessibilityText; 1328 } 1329 isClosable() { 1330 return this.allowClose ?? true; 1331 } 1332 getSuffixSymbolModifier() { 1333 if (this.isChipActivated()) { 1334 return this.suffixSymbol?.activated; 1335 } 1336 return this.suffixSymbol?.normal; 1337 } 1338 getSuffixSymbolAccessibilityLevel() { 1339 if (this.isChipActivated()) { 1340 if ( 1341 this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no' || 1342 this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel === 'no-hide-descendants' 1343 ) { 1344 return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel; 1345 } 1346 return this.suffixSymbolOptions?.action ? 'yes' : 'no'; 1347 } 1348 if ( 1349 this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no' || 1350 this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel === 'no-hide-descendants' 1351 ) { 1352 return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel; 1353 } 1354 return this.suffixSymbolOptions?.action ? 'yes' : 'no'; 1355 } 1356 getSuffixSymbolAccessibilityDescription() { 1357 if (this.isChipActivated()) { 1358 if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityDescription !== 'undefined') { 1359 return this.suffixSymbolOptions.activatedAccessibility.accessibilityDescription; 1360 } 1361 return void 0; 1362 } 1363 if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityDescription !== 'undefined') { 1364 return this.suffixSymbolOptions.normalAccessibility.accessibilityDescription; 1365 } 1366 return void 0; 1367 } 1368 getSuffixSymbolAccessibilityText() { 1369 if (this.isChipActivated()) { 1370 if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityText !== 'undefined') { 1371 return this.suffixSymbolOptions.activatedAccessibility.accessibilityText; 1372 } 1373 return void 0; 1374 } 1375 if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityText !== 'undefined') { 1376 return this.suffixSymbolOptions.normalAccessibility.accessibilityText; 1377 } 1378 return void 0; 1379 } 1380 getSuffixSymbolAction() { 1381 if (typeof this.suffixSymbolOptions?.action === 'undefined') { 1382 return void 0; 1383 } 1384 return () => { 1385 if (!this.isChipEnabled()) { 1386 return; 1387 } 1388 this.suffixSymbolOptions?.action?.(); 1389 }; 1390 } 1391 hasSuffixSymbol() { 1392 return !!(this.suffixSymbol?.normal || this.suffixSymbol?.activated); 1393 } 1394 getPrefixIconFilledColor() { 1395 if (this.isChipActivated()) { 1396 return this.prefixIcon?.activatedFillColor ?? this.getDefaultActiveIconColor(IconType.PREFIX_ICON); 1397 } 1398 return this.prefixIcon?.fillColor ?? this.getDefaultFillIconColor(IconType.PREFIX_ICON); 1399 } 1400 getPrefixIconSize() { 1401 let prefixIconSize = { width: 0, height: 0 }; 1402 if (typeof this.prefixIcon?.size?.width !== 'undefined' && this.isValidLength(this.prefixIcon.size.width)) { 1403 prefixIconSize.width = this.prefixIcon.size.width; 1404 } else { 1405 prefixIconSize.width = this.isSmallChipSize() 1406 ? this.theme.prefixIcon.smallSize.width 1407 : this.theme.prefixIcon.normalSize.width; 1408 } 1409 if (typeof this.prefixIcon?.size?.height !== 'undefined' && this.isValidLength(this.prefixIcon.size.height)) { 1410 prefixIconSize.height = this.prefixIcon.size.height; 1411 } else { 1412 prefixIconSize.height = this.isSmallChipSize() 1413 ? this.theme.prefixIcon.smallSize.height 1414 : this.theme.prefixIcon.normalSize.height; 1415 } 1416 return prefixIconSize; 1417 } 1418 getPrefixSymbolModifier() { 1419 if (this.isChipActivated()) { 1420 return this.prefixSymbol?.activated; 1421 } 1422 return this.prefixSymbol?.normal; 1423 } 1424 getDefaultSymbolColor(iconType) { 1425 return this.isChipActivated() ? this.getSymbolActiveColor(iconType) : this.getSymbolFillColor(iconType); 1426 } 1427 getDefaultActiveIconColor(iconType) { 1428 if (iconType === IconType.PREFIX_ICON) { 1429 return this.chipNodeInFocus 1430 ? this.theme.prefixIcon.focusActivatedColor 1431 : this.theme.prefixIcon.activatedFillColor; 1432 } else { 1433 return this.chipNodeInFocus 1434 ? this.theme.suffixIcon.focusActivatedColor 1435 : this.theme.suffixIcon.activatedFillColor; 1436 } 1437 } 1438 getDefaultFillIconColor(iconType) { 1439 if (iconType === IconType.PREFIX_ICON) { 1440 return this.chipNodeInFocus ? this.theme.prefixIcon.focusFillColor : this.theme.prefixIcon.fillColor; 1441 } else { 1442 return this.chipNodeInFocus ? this.theme.suffixIcon.focusFillColor : this.theme.suffixIcon.fillColor; 1443 } 1444 } 1445 getSymbolActiveColor(iconType) { 1446 if (!this.chipNodeInFocus) { 1447 return this.theme.defaultSymbol.activatedFontColor; 1448 } 1449 if (iconType === IconType.PREFIX_SYMBOL) { 1450 return [this.theme.prefixIcon.focusActivatedColor]; 1451 } 1452 if (iconType === IconType.SUFFIX_SYMBOL) { 1453 return [this.theme.suffixIcon.focusActivatedColor]; 1454 } 1455 return this.theme.defaultSymbol.activatedFontColor; 1456 } 1457 getSymbolFillColor(iconType) { 1458 if (!this.chipNodeInFocus) { 1459 return this.theme.defaultSymbol.normalFontColor; 1460 } 1461 if (iconType === IconType.PREFIX_SYMBOL) { 1462 return [this.theme.prefixIcon.focusFillColor]; 1463 } 1464 if (iconType === IconType.SUFFIX_SYMBOL) { 1465 return [this.theme.suffixIcon.focusFillColor]; 1466 } 1467 return this.theme.defaultSymbol.normalFontColor; 1468 } 1469 hasPrefixSymbol() { 1470 return !!(this.prefixSymbol?.normal || this.prefixSymbol?.activated); 1471 } 1472 getChipConstraintSize() { 1473 const constraintSize = {}; 1474 if (typeof this.chipSize === 'string') { 1475 constraintSize.maxWidth = this.getChipMaxWidth(); 1476 constraintSize.minHeight = 1477 this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight; 1478 } else { 1479 if (typeof this.chipSize?.width === 'undefined' || !this.isValidLength(this.chipSize.width)) { 1480 constraintSize.maxWidth = this.getChipMaxWidth(); 1481 } 1482 if (typeof this.chipSize?.height === 'undefined' || !this.isValidLength(this.chipSize.height)) { 1483 constraintSize.minHeight = this.theme.chipNode.normalHeight; 1484 } 1485 } 1486 return constraintSize; 1487 } 1488 getChipMaxWidth() { 1489 if (this.fontSizeScale >= this.theme.chipNode.suitAgeScale) { 1490 return void 0; 1491 } 1492 if (this.breakPoint === BreakPointsType.SM) { 1493 return this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth; 1494 } 1495 if (this.breakPoint === BreakPointsType.MD) { 1496 return this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth; 1497 } 1498 if (this.breakPoint === BreakPointsType.LG) { 1499 return this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth; 1500 } 1501 return void 0; 1502 } 1503 getChipSize() { 1504 const chipSize = { 1505 width: 'auto', 1506 height: 'auto', 1507 }; 1508 if (typeof this.chipSize !== 'string') { 1509 if (typeof this.chipSize?.width !== 'undefined' && this.isValidLength(this.chipSize.width)) { 1510 chipSize.width = this.chipSize.width; 1511 } 1512 if (typeof this.chipSize?.height !== 'undefined' && this.isValidLength(this.chipSize.height)) { 1513 chipSize.height = this.chipSize.height; 1514 } 1515 } 1516 return chipSize; 1517 } 1518 getChipPadding() { 1519 return this.isSmallChipSize() 1520 ? this.theme.chipNode.localizedSmallPadding 1521 : this.theme.chipNode.localizedNormalPadding; 1522 } 1523 getLabelMargin() { 1524 const localizedLabelMargin = { 1525 start: LengthMetrics.vp(0), 1526 end: LengthMetrics.vp(0), 1527 }; 1528 const defaultLocalizedMargin = this.isSmallChipSize() 1529 ? this.theme.label.localizedSmallMargin 1530 : this.theme.label.localizedNormalMargin; 1531 if ( 1532 typeof this.label?.localizedLabelMargin?.start !== 'undefined' && 1533 this.label.localizedLabelMargin.start.value >= 0 1534 ) { 1535 localizedLabelMargin.start = this.label.localizedLabelMargin.start; 1536 } else if (this.hasPrefix()) { 1537 localizedLabelMargin.start = defaultLocalizedMargin.start; 1538 } 1539 if ( 1540 typeof this.label?.localizedLabelMargin?.end !== 'undefined' && 1541 this.label.localizedLabelMargin.end.value >= 0 1542 ) { 1543 localizedLabelMargin.end = this.label.localizedLabelMargin.end; 1544 } else if (this.hasSuffix()) { 1545 localizedLabelMargin.end = defaultLocalizedMargin.end; 1546 } 1547 if (typeof this.label?.localizedLabelMargin === 'object') { 1548 return localizedLabelMargin; 1549 } 1550 if (typeof this.label.labelMargin === 'object') { 1551 const labelMargin = { left: 0, right: 0 }; 1552 const defaultLabelMargin = this.isSmallChipSize() ? this.theme.label.smallMargin : this.theme.label.normalMargin; 1553 if (typeof this.label?.labelMargin?.left !== 'undefined' && this.isValidLength(this.label.labelMargin.left)) { 1554 labelMargin.left = this.label.labelMargin.left; 1555 } else if (this.hasPrefix()) { 1556 labelMargin.left = defaultLabelMargin.left; 1557 } 1558 if (typeof this.label?.labelMargin?.right !== 'undefined' && this.isValidLength(this.label.labelMargin.right)) { 1559 labelMargin.right = this.label.labelMargin.right; 1560 } else if (this.hasSuffix()) { 1561 labelMargin.right = defaultLabelMargin.right; 1562 } 1563 return labelMargin; 1564 } 1565 return localizedLabelMargin; 1566 } 1567 hasSuffix() { 1568 if (this.suffixIcon?.src) { 1569 return true; 1570 } 1571 return this.isChipActivated() ? !!this.suffixSymbol?.activated : !!this.suffixSymbol?.normal; 1572 } 1573 hasPrefix() { 1574 if (this.prefixIcon?.src) { 1575 return true; 1576 } 1577 return this.isChipActivated() ? !!this.prefixSymbol?.activated : !!this.prefixSymbol?.normal; 1578 } 1579 getLabelFontWeight() { 1580 if (this.isChipActivated()) { 1581 return FontWeight.Medium; 1582 } 1583 return this.resourceToNumber(this.theme.label.fontWeight, FontWeight.Regular); 1584 } 1585 getLabelFontFamily() { 1586 return this.label?.fontFamily ?? this.theme.label.fontFamily; 1587 } 1588 defaultSymbolFontsize() { 1589 return this.isSmallChipSize() 1590 ? this.theme.defaultSymbol.smallSymbolFontSize 1591 : this.theme.defaultSymbol.normalSymbolFontSize; 1592 } 1593 getActiveFontColor() { 1594 return this.chipNodeInFocus ? this.theme.label.focusActiveFontColor : this.theme.label.activatedFontColor; 1595 } 1596 getFontColor() { 1597 return this.chipNodeInFocus ? this.theme.label.focusFontColor : this.theme.label.fontColor; 1598 } 1599 getChipNodeBorderColor() { 1600 let themeChipNode = this.theme.chipNode; 1601 return this.isChipActivated() ? themeChipNode.activatedBorderColor : themeChipNode.borderColor; 1602 } 1603 getLabelFontColor() { 1604 if (this.isChipActivated()) { 1605 return this.label?.activatedFontColor ?? this.getActiveFontColor(); 1606 } 1607 return this.label?.fontColor ?? this.getFontColor(); 1608 } 1609 getLabelFontSize() { 1610 if (typeof this.label.fontSize !== 'undefined' && this.isValidLength(this.label.fontSize)) { 1611 return this.label.fontSize; 1612 } 1613 if (this.isSmallChipSize()) { 1614 return this.theme.label.smallFontSize; 1615 } 1616 return this.theme.label.normalFontSize; 1617 } 1618 getChipText() { 1619 return this.label?.text ?? ''; 1620 } 1621 deleteChip() { 1622 Context.animateTo({ curve: Curve.Sharp, duration: 150 }, () => { 1623 this.chipOpacity = 0; 1624 }); 1625 Context.animateTo( 1626 { 1627 curve: Curve.FastOutLinearIn, 1628 duration: 150, 1629 onFinish: () => { 1630 this.isChipExist = false; 1631 }, 1632 }, 1633 () => { 1634 this.chipScale = { x: 0.85, y: 0.85 }; 1635 } 1636 ); 1637 } 1638 getChipOnClicked() { 1639 if (this.onClicked) { 1640 return this.onClicked.bind(this); 1641 } 1642 return void 0; 1643 } 1644 getAccessibilitySelected() { 1645 if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.SELECTED) { 1646 return this.isChipActivated(); 1647 } 1648 return void 0; 1649 } 1650 getAccessibilityChecked() { 1651 if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.CHECKED) { 1652 return this.isChipActivated(); 1653 } 1654 return void 0; 1655 } 1656 getChipAccessibilitySelectedType() { 1657 if (typeof this.chipActivated === 'undefined') { 1658 return AccessibilitySelectedType.CLICKED; 1659 } 1660 return this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED; 1661 } 1662 getAccessibilityLevel() { 1663 return this.chipAccessibilityLevel; 1664 } 1665 getAccessibilityDescription() { 1666 if (typeof this.chipAccessibilityDescription === 'undefined') { 1667 return void 0; 1668 } 1669 return this.chipAccessibilityDescription; 1670 } 1671 isChipEnabled() { 1672 return this.chipEnabled ?? true; 1673 } 1674 getChipBorderRadius() { 1675 if (typeof this.chipNodeRadius !== 'undefined' && this.isValidLength(this.chipNodeRadius)) { 1676 return this.chipNodeRadius; 1677 } 1678 return this.isSmallChipSize() ? this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius; 1679 } 1680 isSmallChipSize() { 1681 return typeof this.chipSize === 'string' && this.chipSize === ChipSize.SMALL; 1682 } 1683 getChipBackgroundColor() { 1684 let themeChipNode = this.theme.chipNode; 1685 if (this.isChipActivated()) { 1686 return this.chipNodeInFocus && !this.isSetActiveChipBgColor() 1687 ? themeChipNode.focusActivatedBgColor 1688 : this.getColor(this.chipNodeActivatedBackgroundColor, themeChipNode.activatedBackgroundColor); 1689 } 1690 return this.chipNodeInFocus && !this.isSetNormalChipBgColor() 1691 ? themeChipNode.focusBgColor 1692 : this.getColor(this.chipNodeBackgroundColor, this.theme.chipNode.backgroundColor); 1693 } 1694 getColor(color, defaultColor) { 1695 if (!color) { 1696 return defaultColor; 1697 } 1698 try { 1699 ColorMetrics.resourceColor(color).color; 1700 return color; 1701 } catch (e) { 1702 console.error(`[Chip] failed to get color`); 1703 return Color.Transparent; 1704 } 1705 } 1706 isChipActivated() { 1707 return this.chipActivated ?? false; 1708 } 1709 resourceToNumber(resource, defaultValue) { 1710 if (!resource || !resource.type) { 1711 console.error('[Chip] failed: resource get fail'); 1712 return defaultValue; 1713 } 1714 const resourceManager = this.getUIContext().getHostContext()?.resourceManager; 1715 if (!resourceManager) { 1716 console.error('[Chip] failed to get resourceManager'); 1717 return defaultValue; 1718 } 1719 switch (resource.type) { 1720 case RESOURCE_TYPE_FLOAT: 1721 case RESOURCE_TYPE_INTEGER: 1722 try { 1723 if (resource.id !== -1) { 1724 return resourceManager.getNumber(resource); 1725 } 1726 return resourceManager.getNumberByName(resource.params[0].split('.')[2]); 1727 } catch (error) { 1728 console.error(`[Chip] get resource error, return defaultValue`); 1729 return defaultValue; 1730 } 1731 default: 1732 return defaultValue; 1733 } 1734 } 1735 isValidLength(length) { 1736 if (typeof length === 'number') { 1737 return length >= 0; 1738 } else if (typeof length === 'string') { 1739 return this.isValidLengthString(length); 1740 } else if (typeof length === 'object') { 1741 const resource = length; 1742 const resourceManager = this.getUIContext().getHostContext()?.resourceManager; 1743 if (!resourceManager) { 1744 console.error('[Chip] failed to get resourceManager.'); 1745 return false; 1746 } 1747 switch (resource.type) { 1748 case RESOURCE_TYPE_FLOAT: 1749 case RESOURCE_TYPE_INTEGER: 1750 return resourceManager.getNumber(resource) >= 0; 1751 case RESOURCE_TYPE_STRING: 1752 return this.isValidLengthString(resourceManager.getStringSync(resource)); 1753 default: 1754 return false; 1755 } 1756 } 1757 return false; 1758 } 1759 isValidLengthString(length) { 1760 const matches = length.match(/(-?\d+(?:\.\d+)?)_?(fp|vp|px|lpx)?$/i); 1761 if (!matches || matches.length < 3) { 1762 return false; 1763 } 1764 return Number.parseInt(matches[1], 10) >= 0; 1765 } 1766 initialRender() { 1767 this.observeComponentCreation2((elmtId, isInitialRender) => { 1768 If.create(); 1769 if (this.isChipExist) { 1770 this.ifElseBranchUpdateFunction(0, () => { 1771 this.ChipBuilder.bind(this)(); 1772 }); 1773 } else { 1774 this.ifElseBranchUpdateFunction(1, () => {}); 1775 } 1776 }, If); 1777 If.pop(); 1778 } 1779 rerender() { 1780 this.updateDirtyElements(); 1781 } 1782} 1783 1784export default { 1785 Chip, 1786 ChipSize, 1787 AccessibilitySelectedType, 1788}; 1789