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 16const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; 17const measure = requireNapi('measure'); 18const mediaquery = requireNapi('mediaquery'); 19const resourceManager = requireNapi('resourceManager'); 20const componentUtils = requireNapi('arkui.componentUtils'); 21const hilog = requireNapi('hilog'); 22const ColorMetrics = requireNapi('arkui.node').ColorMetrics; 23const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 24const LengthUnit = requireNapi('arkui.node').LengthUnit; 25const EnvironmentCallback = requireNapi('EnvironmentCallback'); 26 27if (!("finalizeConstruction" in ViewPU.prototype)) { 28 Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { 29 }); 30} 31 32export var ChipSize; 33(function (d6) { 34 d6["NORMAL"] = "NORMAL"; 35 d6["SMALL"] = "SMALL"; 36})(ChipSize || (ChipSize = {})); 37var BreakPointsType; 38(function (c6) { 39 c6["SM"] = "SM"; 40 c6["MD"] = "MD"; 41 c6["LG"] = "LG"; 42})(BreakPointsType || (BreakPointsType = {})); 43 44export const defaultTheme = { 45 prefixIcon: { 46 size: { width: 16, height: 16 }, 47 fillColor: { 48 "id": -1, 49 "type": 10001, 50 params: ['sys.color.ohos_id_color_secondary'], 51 "bundleName": "__harDefaultBundleName__", 52 "moduleName": "__harDefaultModuleName__" 53 }, 54 activatedFillColor: { 55 "id": -1, 56 "type": 10001, 57 params: ['sys.color.ohos_id_color_text_primary_contrary'], 58 "bundleName": "__harDefaultBundleName__", 59 "moduleName": "__harDefaultModuleName__" 60 }, 61 }, 62 label: { 63 normalFontSize: { 64 "id": -1, 65 "type": 10002, 66 params: ['sys.float.ohos_id_text_size_button2'], 67 "bundleName": "__harDefaultBundleName__", 68 "moduleName": "__harDefaultModuleName__" 69 }, 70 smallFontSize: { 71 "id": -1, 72 "type": 10002, 73 params: ['sys.float.ohos_id_text_size_button2'], 74 "bundleName": "__harDefaultBundleName__", 75 "moduleName": "__harDefaultModuleName__" 76 }, 77 fontColor: { 78 "id": -1, 79 "type": 10001, 80 params: ['sys.color.ohos_id_color_text_primary'], 81 "bundleName": "__harDefaultBundleName__", 82 "moduleName": "__harDefaultModuleName__" 83 }, 84 activatedFontColor: { 85 "id": -1, 86 "type": 10001, 87 params: ['sys.color.ohos_id_color_text_primary_contrary'], 88 "bundleName": "__harDefaultBundleName__", 89 "moduleName": "__harDefaultModuleName__" 90 }, 91 fontFamily: "HarmonyOS Sans", 92 normalMargin: { left: 6, right: 6, top: 0, bottom: 0 }, 93 smallMargin: { left: 4, right: 4, top: 0, bottom: 0 }, 94 defaultFontSize: 14, 95 localizedNormalMargin: { 96 start: LengthMetrics.vp(6), 97 end: LengthMetrics.vp(6), 98 top: LengthMetrics.vp(0), 99 bottom: LengthMetrics.vp(0) 100 }, 101 localizedSmallMargin: { 102 start: LengthMetrics.vp(4), 103 end: LengthMetrics.vp(4), 104 top: LengthMetrics.vp(0), 105 bottom: LengthMetrics.vp(0), 106 } 107 }, 108 suffixIcon: { 109 size: { width: 16, height: 16 }, 110 fillColor: { 111 "id": -1, 112 "type": 10001, 113 params: ['sys.color.ohos_id_color_secondary'], 114 "bundleName": "__harDefaultBundleName__", 115 "moduleName": "__harDefaultModuleName__" 116 }, 117 activatedFillColor: { 118 "id": -1, 119 "type": 10001, 120 params: ['sys.color.ohos_id_color_text_primary_contrary'], 121 "bundleName": "__harDefaultBundleName__", 122 "moduleName": "__harDefaultModuleName__" 123 }, 124 defaultDeleteIcon: { 125 "id": -1, 126 "type": 20000, 127 params: ['sys.media.ohos_ic_public_cancel', 16, 16], 128 "bundleName": "__harDefaultBundleName__", 129 "moduleName": "__harDefaultModuleName__" 130 }, 131 focusable: false, 132 }, 133 defaultSymbol: { 134 normalFontColor: [{ 135 "id": -1, 136 "type": 10001, 137 params: ['sys.color.ohos_id_color_secondary'], 138 "bundleName": "__harDefaultBundleName__", 139 "moduleName": "__harDefaultModuleName__" 140 }], 141 activatedFontColor: [{ 142 "id": -1, 143 "type": 10001, 144 params: ['sys.color.ohos_id_color_text_primary_contrary'], 145 "bundleName": "__harDefaultBundleName__", 146 "moduleName": "__harDefaultModuleName__" 147 }], 148 fontSize: 16, 149 defaultEffect: -1, 150 }, 151 chipNode: { 152 suitAgeScale: 1.75, 153 minLabelWidth: 12, 154 normalHeight: 36, 155 smallHeight: 28, 156 enabled: true, 157 activated: false, 158 backgroundColor: { 159 "id": -1, 160 "type": 10001, 161 params: ['sys.color.ohos_id_color_button_normal'], 162 "bundleName": "__harDefaultBundleName__", 163 "moduleName": "__harDefaultModuleName__" 164 }, 165 activatedBackgroundColor: { 166 "id": -1, 167 "type": 10001, 168 params: ['sys.color.ohos_id_color_emphasize'], 169 "bundleName": "__harDefaultBundleName__", 170 "moduleName": "__harDefaultModuleName__" 171 }, 172 focusOutlineColor: { 173 "id": -1, 174 "type": 10001, 175 params: ['sys.color.ohos_id_color_focused_outline'], 176 "bundleName": "__harDefaultBundleName__", 177 "moduleName": "__harDefaultModuleName__" 178 }, 179 normalBorderRadius: { 180 "id": -1, 181 "type": 10002, 182 params: ['sys.float.ohos_id_corner_radius_tips_instant_tip'], 183 "bundleName": "__harDefaultBundleName__", 184 "moduleName": "__harDefaultModuleName__" 185 }, 186 smallBorderRadius: { 187 "id": -1, 188 "type": 10002, 189 params: ['sys.float.ohos_id_corner_radius_piece'], 190 "bundleName": "__harDefaultBundleName__", 191 "moduleName": "__harDefaultModuleName__" 192 }, 193 borderWidth: 2, 194 localizedNormalPadding: { 195 start: LengthMetrics.vp(16), 196 end: LengthMetrics.vp(16), 197 top: LengthMetrics.vp(4), 198 bottom: LengthMetrics.vp(4) 199 }, 200 localizedSmallPadding: { 201 start: LengthMetrics.vp(12), 202 end: LengthMetrics.vp(12), 203 top: LengthMetrics.vp(4), 204 bottom: LengthMetrics.vp(4) 205 }, 206 hoverBlendColor: { 207 "id": -1, 208 "type": 10001, 209 params: ['sys.color.ohos_id_color_hover'], 210 "bundleName": "__harDefaultBundleName__", 211 "moduleName": "__harDefaultModuleName__" 212 }, 213 pressedBlendColor: { 214 "id": -1, 215 "type": 10001, 216 params: ['sys.color.ohos_id_color_click_effect'], 217 "bundleName": "__harDefaultBundleName__", 218 "moduleName": "__harDefaultModuleName__" 219 }, 220 opacity: { normal: 1, hover: 0.95, pressed: 0.9, disabled: 0.4 }, 221 breakPointConstraintWidth: { 222 breakPointMinWidth: 128, 223 breakPointSmMaxWidth: 156, 224 breakPointMdMaxWidth: 280, 225 breakPointLgMaxWidth: 400 226 } 227 } 228}; 229const noop = () => { 230}; 231 232export function Chip(r5, s5 = null) { 233 const t5 = r5; 234 { 235 (s5 ? s5 : this).observeComponentCreation2((v5, w5, x5 = t5) => { 236 if (w5) { 237 let y5 = new ChipComponent(ViewPU.__proto__ !== NativeViewPartialUpdate && s5 instanceof PUV2ViewBase ? s5 : this, { 238 chipSize: x5.size, 239 prefixIcon: x5.prefixIcon, 240 prefixSymbol: x5.prefixSymbol, 241 label: x5.label, 242 suffixIcon: x5.suffixIcon, 243 suffixSymbol: x5.suffixSymbol, 244 allowClose: x5.allowClose, 245 chipEnabled: x5.enabled, 246 chipActivated: x5.activated, 247 chipNodeBackgroundColor: x5.backgroundColor, 248 chipNodeActivatedBackgroundColor: x5.activatedBackgroundColor, 249 chipNodeRadius: x5.borderRadius, 250 chipDirection: x5.direction, 251 onClose: x5.onClose, 252 onClicked: x5.onClicked, 253 }, undefined, v5, () => { 254 }, { page: "library/src/main/ets/components/chip/chip.ets", line: 252, col: 3 }); 255 ViewPU.create(y5); 256 let z5 = () => { 257 return { 258 chipSize: x5.size, 259 prefixIcon: x5.prefixIcon, 260 prefixSymbol: x5.prefixSymbol, 261 label: x5.label, 262 suffixIcon: x5.suffixIcon, 263 suffixSymbol: x5.suffixSymbol, 264 allowClose: x5.allowClose, 265 chipEnabled: x5.enabled, 266 chipActivated: x5.activated, 267 chipNodeBackgroundColor: x5.backgroundColor, 268 chipNodeActivatedBackgroundColor: x5.activatedBackgroundColor, 269 chipNodeRadius: x5.borderRadius, 270 chipDirection: x5.direction, 271 onClose: x5.onClose, 272 onClicked: x5.onClicked 273 }; 274 }; 275 y5.paramsGenerator_ = z5; 276 } 277 else { 278 (s5 ? s5 : this).updateStateVarsOfChildByElmtId(v5, { 279 chipSize: x5.size, 280 prefixIcon: x5.prefixIcon, 281 prefixSymbol: x5.prefixSymbol, 282 label: x5.label, 283 suffixIcon: x5.suffixIcon, 284 suffixSymbol: x5.suffixSymbol, 285 allowClose: x5.allowClose, 286 chipEnabled: x5.enabled, 287 chipActivated: x5.activated, 288 chipNodeBackgroundColor: x5.backgroundColor, 289 chipNodeActivatedBackgroundColor: x5.activatedBackgroundColor, 290 chipNodeRadius: x5.borderRadius, 291 chipDirection: x5.direction 292 }); 293 } 294 }, { name: "ChipComponent" }); 295 } 296} 297 298export class ChipComponent extends ViewPU { 299 constructor(k5, l5, m5, n5 = -1, o5 = undefined, p5) { 300 super(k5, m5, n5, p5); 301 if (typeof o5 === "function") { 302 this.paramsGenerator_ = o5; 303 } 304 this.theme = defaultTheme; 305 this.__chipSize = new SynchedPropertyObjectOneWayPU(l5.chipSize, this, "chipSize"); 306 this.__allowClose = new SynchedPropertySimpleOneWayPU(l5.allowClose, this, "allowClose"); 307 this.__chipDirection = new SynchedPropertySimpleOneWayPU(l5.chipDirection, this, "chipDirection"); 308 this.__prefixIcon = new SynchedPropertyObjectOneWayPU(l5.prefixIcon, this, "prefixIcon"); 309 this.__prefixSymbol = new SynchedPropertyObjectOneWayPU(l5.prefixSymbol, this, "prefixSymbol"); 310 this.__label = new SynchedPropertyObjectOneWayPU(l5.label, this, "label"); 311 this.__suffixIcon = new SynchedPropertyObjectOneWayPU(l5.suffixIcon, this, "suffixIcon"); 312 this.__suffixSymbol = new SynchedPropertyObjectOneWayPU(l5.suffixSymbol, this, "suffixSymbol"); 313 this.__chipNodeBackgroundColor = new SynchedPropertyObjectOneWayPU(l5.chipNodeBackgroundColor, this, "chipNodeBackgroundColor"); 314 this.__chipNodeActivatedBackgroundColor = new SynchedPropertyObjectOneWayPU(l5.chipNodeActivatedBackgroundColor, this, "chipNodeActivatedBackgroundColor"); 315 this.__chipNodeRadius = new SynchedPropertyObjectOneWayPU(l5.chipNodeRadius, this, "chipNodeRadius"); 316 this.__chipEnabled = new SynchedPropertySimpleOneWayPU(l5.chipEnabled, this, "chipEnabled"); 317 this.__chipActivated = new SynchedPropertySimpleOneWayPU(l5.chipActivated, this, "chipActivated"); 318 this.__isHover = new ObservedPropertySimplePU(false, this, "isHover"); 319 this.__chipScale = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, "chipScale"); 320 this.__chipOpacity = new ObservedPropertySimplePU(1, this, "chipOpacity"); 321 this.__chipBlendColor = new ObservedPropertyObjectPU(Color.Transparent, this, "chipBlendColor"); 322 this.__deleteChip = new ObservedPropertySimplePU(false, this, "deleteChip"); 323 this.__chipNodeOnFocus = new ObservedPropertySimplePU(false, this, "chipNodeOnFocus"); 324 this.__useDefaultSuffixIcon = new ObservedPropertySimplePU(false, this, "useDefaultSuffixIcon"); 325 this.chipNodeSize = {}; 326 this.onClose = noop; 327 this.onClicked = noop; 328 this.__suffixIconOnFocus = new ObservedPropertySimplePU(false, this, "suffixIconOnFocus"); 329 this.__chipBreakPoints = new ObservedPropertySimplePU(BreakPointsType.SM, this, "chipBreakPoints"); 330 this.smListener = mediaquery.matchMediaSync("0vp<width<600vp"); 331 this.mdListener = mediaquery.matchMediaSync("600vp<=width<840vp"); 332 this.lgListener = mediaquery.matchMediaSync("840vp<=width"); 333 this.__isShowPressedBackGroundColor = new ObservedPropertySimplePU(false, this, "isShowPressedBackGroundColor"); 334 this.__fontSizeScale = new ObservedPropertyObjectPU(0, this, "fontSizeScale"); 335 this.__fontWeightScale = new ObservedPropertyObjectPU(0, this, "fontWeightScale"); 336 this.callbacks = { 337 onConfigurationUpdated: (q5) => { 338 this.fontSizeScale = q5.fontSizeScale; 339 this.fontWeightScale = q5.fontWeightScale; 340 }, 341 onMemoryLevel() { 342 } 343 }; 344 this.callbackId = undefined; 345 this.__prefixSymbolWidth = new ObservedPropertyObjectPU(this.toVp(componentUtils.getRectangleById("PrefixSymbolGlyph")?.size?.width), this, "prefixSymbolWidth"); 346 this.__suffixSymbolWidth = new ObservedPropertyObjectPU(this.toVp(componentUtils.getRectangleById("SuffixSymbolGlyph")?.size?.width), this, "suffixSymbolWidth"); 347 this.__symbolEffect = new ObservedPropertyObjectPU(new SymbolEffect(), this, "symbolEffect"); 348 this.setInitiallyProvidedValue(l5); 349 this.finalizeConstruction(); 350 } 351 352 setInitiallyProvidedValue(j5) { 353 if (j5.theme !== undefined) { 354 this.theme = j5.theme; 355 } 356 if (j5.chipSize === undefined) { 357 this.__chipSize.set(ChipSize.NORMAL); 358 } 359 if (j5.allowClose === undefined) { 360 this.__allowClose.set(true); 361 } 362 if (j5.chipDirection === undefined) { 363 this.__chipDirection.set(Direction.Auto); 364 } 365 if (j5.prefixIcon === undefined) { 366 this.__prefixIcon.set({ src: "" }); 367 } 368 if (j5.label === undefined) { 369 this.__label.set({ text: "" }); 370 } 371 if (j5.suffixIcon === undefined) { 372 this.__suffixIcon.set({ src: "" }); 373 } 374 if (j5.chipNodeBackgroundColor === undefined) { 375 this.__chipNodeBackgroundColor.set(this.theme.chipNode.backgroundColor); 376 } 377 if (j5.chipNodeActivatedBackgroundColor === undefined) { 378 this.__chipNodeActivatedBackgroundColor.set(this.theme.chipNode.activatedBackgroundColor); 379 } 380 if (j5.chipNodeRadius === undefined) { 381 this.__chipNodeRadius.set(void (0)); 382 } 383 if (j5.chipEnabled === undefined) { 384 this.__chipEnabled.set(true); 385 } 386 if (j5.chipActivated === undefined) { 387 this.__chipActivated.set(false); 388 } 389 if (j5.isHover !== undefined) { 390 this.isHover = j5.isHover; 391 } 392 if (j5.chipScale !== undefined) { 393 this.chipScale = j5.chipScale; 394 } 395 if (j5.chipOpacity !== undefined) { 396 this.chipOpacity = j5.chipOpacity; 397 } 398 if (j5.chipBlendColor !== undefined) { 399 this.chipBlendColor = j5.chipBlendColor; 400 } 401 if (j5.deleteChip !== undefined) { 402 this.deleteChip = j5.deleteChip; 403 } 404 if (j5.chipNodeOnFocus !== undefined) { 405 this.chipNodeOnFocus = j5.chipNodeOnFocus; 406 } 407 if (j5.useDefaultSuffixIcon !== undefined) { 408 this.useDefaultSuffixIcon = j5.useDefaultSuffixIcon; 409 } 410 if (j5.chipNodeSize !== undefined) { 411 this.chipNodeSize = j5.chipNodeSize; 412 } 413 if (j5.onClose !== undefined) { 414 this.onClose = j5.onClose; 415 } 416 if (j5.onClicked !== undefined) { 417 this.onClicked = j5.onClicked; 418 } 419 if (j5.suffixIconOnFocus !== undefined) { 420 this.suffixIconOnFocus = j5.suffixIconOnFocus; 421 } 422 if (j5.chipBreakPoints !== undefined) { 423 this.chipBreakPoints = j5.chipBreakPoints; 424 } 425 if (j5.smListener !== undefined) { 426 this.smListener = j5.smListener; 427 } 428 if (j5.mdListener !== undefined) { 429 this.mdListener = j5.mdListener; 430 } 431 if (j5.lgListener !== undefined) { 432 this.lgListener = j5.lgListener; 433 } 434 if (j5.isShowPressedBackGroundColor !== undefined) { 435 this.isShowPressedBackGroundColor = j5.isShowPressedBackGroundColor; 436 } 437 if (j5.fontSizeScale !== undefined) { 438 this.fontSizeScale = j5.fontSizeScale; 439 } 440 if (j5.fontWeightScale !== undefined) { 441 this.fontWeightScale = j5.fontWeightScale; 442 } 443 if (j5.callbacks !== undefined) { 444 this.callbacks = j5.callbacks; 445 } 446 if (j5.callbackId !== undefined) { 447 this.callbackId = j5.callbackId; 448 } 449 if (j5.prefixSymbolWidth !== undefined) { 450 this.prefixSymbolWidth = j5.prefixSymbolWidth; 451 } 452 if (j5.suffixSymbolWidth !== undefined) { 453 this.suffixSymbolWidth = j5.suffixSymbolWidth; 454 } 455 if (j5.symbolEffect !== undefined) { 456 this.symbolEffect = j5.symbolEffect; 457 } 458 } 459 460 updateStateVars(i5) { 461 this.__chipSize.reset(i5.chipSize); 462 this.__allowClose.reset(i5.allowClose); 463 this.__chipDirection.reset(i5.chipDirection); 464 this.__prefixIcon.reset(i5.prefixIcon); 465 this.__prefixSymbol.reset(i5.prefixSymbol); 466 this.__label.reset(i5.label); 467 this.__suffixIcon.reset(i5.suffixIcon); 468 this.__suffixSymbol.reset(i5.suffixSymbol); 469 this.__chipNodeBackgroundColor.reset(i5.chipNodeBackgroundColor); 470 this.__chipNodeActivatedBackgroundColor.reset(i5.chipNodeActivatedBackgroundColor); 471 this.__chipNodeRadius.reset(i5.chipNodeRadius); 472 this.__chipEnabled.reset(i5.chipEnabled); 473 this.__chipActivated.reset(i5.chipActivated); 474 } 475 476 purgeVariableDependenciesOnElmtId(h5) { 477 this.__chipSize.purgeDependencyOnElmtId(h5); 478 this.__allowClose.purgeDependencyOnElmtId(h5); 479 this.__chipDirection.purgeDependencyOnElmtId(h5); 480 this.__prefixIcon.purgeDependencyOnElmtId(h5); 481 this.__prefixSymbol.purgeDependencyOnElmtId(h5); 482 this.__label.purgeDependencyOnElmtId(h5); 483 this.__suffixIcon.purgeDependencyOnElmtId(h5); 484 this.__suffixSymbol.purgeDependencyOnElmtId(h5); 485 this.__chipNodeBackgroundColor.purgeDependencyOnElmtId(h5); 486 this.__chipNodeActivatedBackgroundColor.purgeDependencyOnElmtId(h5); 487 this.__chipNodeRadius.purgeDependencyOnElmtId(h5); 488 this.__chipEnabled.purgeDependencyOnElmtId(h5); 489 this.__chipActivated.purgeDependencyOnElmtId(h5); 490 this.__isHover.purgeDependencyOnElmtId(h5); 491 this.__chipScale.purgeDependencyOnElmtId(h5); 492 this.__chipOpacity.purgeDependencyOnElmtId(h5); 493 this.__chipBlendColor.purgeDependencyOnElmtId(h5); 494 this.__deleteChip.purgeDependencyOnElmtId(h5); 495 this.__chipNodeOnFocus.purgeDependencyOnElmtId(h5); 496 this.__useDefaultSuffixIcon.purgeDependencyOnElmtId(h5); 497 this.__suffixIconOnFocus.purgeDependencyOnElmtId(h5); 498 this.__chipBreakPoints.purgeDependencyOnElmtId(h5); 499 this.__isShowPressedBackGroundColor.purgeDependencyOnElmtId(h5); 500 this.__fontSizeScale.purgeDependencyOnElmtId(h5); 501 this.__fontWeightScale.purgeDependencyOnElmtId(h5); 502 this.__prefixSymbolWidth.purgeDependencyOnElmtId(h5); 503 this.__suffixSymbolWidth.purgeDependencyOnElmtId(h5); 504 this.__symbolEffect.purgeDependencyOnElmtId(h5); 505 } 506 507 aboutToBeDeleted() { 508 this.__chipSize.aboutToBeDeleted(); 509 this.__allowClose.aboutToBeDeleted(); 510 this.__chipDirection.aboutToBeDeleted(); 511 this.__prefixIcon.aboutToBeDeleted(); 512 this.__prefixSymbol.aboutToBeDeleted(); 513 this.__label.aboutToBeDeleted(); 514 this.__suffixIcon.aboutToBeDeleted(); 515 this.__suffixSymbol.aboutToBeDeleted(); 516 this.__chipNodeBackgroundColor.aboutToBeDeleted(); 517 this.__chipNodeActivatedBackgroundColor.aboutToBeDeleted(); 518 this.__chipNodeRadius.aboutToBeDeleted(); 519 this.__chipEnabled.aboutToBeDeleted(); 520 this.__chipActivated.aboutToBeDeleted(); 521 this.__isHover.aboutToBeDeleted(); 522 this.__chipScale.aboutToBeDeleted(); 523 this.__chipOpacity.aboutToBeDeleted(); 524 this.__chipBlendColor.aboutToBeDeleted(); 525 this.__deleteChip.aboutToBeDeleted(); 526 this.__chipNodeOnFocus.aboutToBeDeleted(); 527 this.__useDefaultSuffixIcon.aboutToBeDeleted(); 528 this.__suffixIconOnFocus.aboutToBeDeleted(); 529 this.__chipBreakPoints.aboutToBeDeleted(); 530 this.__isShowPressedBackGroundColor.aboutToBeDeleted(); 531 this.__fontSizeScale.aboutToBeDeleted(); 532 this.__fontWeightScale.aboutToBeDeleted(); 533 this.__prefixSymbolWidth.aboutToBeDeleted(); 534 this.__suffixSymbolWidth.aboutToBeDeleted(); 535 this.__symbolEffect.aboutToBeDeleted(); 536 SubscriberManager.Get().delete(this.id__()); 537 this.aboutToBeDeletedInternal(); 538 } 539 540 get chipSize() { 541 return this.__chipSize.get(); 542 } 543 544 set chipSize(g5) { 545 this.__chipSize.set(g5); 546 } 547 548 get allowClose() { 549 return this.__allowClose.get(); 550 } 551 552 set allowClose(f5) { 553 this.__allowClose.set(f5); 554 } 555 556 get chipDirection() { 557 return this.__chipDirection.get(); 558 } 559 560 set chipDirection(e5) { 561 this.__chipDirection.set(e5); 562 } 563 564 get prefixIcon() { 565 return this.__prefixIcon.get(); 566 } 567 568 set prefixIcon(d5) { 569 this.__prefixIcon.set(d5); 570 } 571 572 get prefixSymbol() { 573 return this.__prefixSymbol.get(); 574 } 575 576 set prefixSymbol(c5) { 577 this.__prefixSymbol.set(c5); 578 } 579 580 get label() { 581 return this.__label.get(); 582 } 583 584 set label(b5) { 585 this.__label.set(b5); 586 } 587 588 get suffixIcon() { 589 return this.__suffixIcon.get(); 590 } 591 592 set suffixIcon(a5) { 593 this.__suffixIcon.set(a5); 594 } 595 596 get suffixSymbol() { 597 return this.__suffixSymbol.get(); 598 } 599 600 set suffixSymbol(z4) { 601 this.__suffixSymbol.set(z4); 602 } 603 604 get chipNodeBackgroundColor() { 605 return this.__chipNodeBackgroundColor.get(); 606 } 607 608 set chipNodeBackgroundColor(y4) { 609 this.__chipNodeBackgroundColor.set(y4); 610 } 611 612 get chipNodeActivatedBackgroundColor() { 613 return this.__chipNodeActivatedBackgroundColor.get(); 614 } 615 616 set chipNodeActivatedBackgroundColor(x4) { 617 this.__chipNodeActivatedBackgroundColor.set(x4); 618 } 619 620 get chipNodeRadius() { 621 return this.__chipNodeRadius.get(); 622 } 623 624 set chipNodeRadius(w4) { 625 this.__chipNodeRadius.set(w4); 626 } 627 628 get chipEnabled() { 629 return this.__chipEnabled.get(); 630 } 631 632 set chipEnabled(v4) { 633 this.__chipEnabled.set(v4); 634 } 635 636 get chipActivated() { 637 return this.__chipActivated.get(); 638 } 639 640 set chipActivated(u4) { 641 this.__chipActivated.set(u4); 642 } 643 644 get isHover() { 645 return this.__isHover.get(); 646 } 647 648 set isHover(t4) { 649 this.__isHover.set(t4); 650 } 651 652 get chipScale() { 653 return this.__chipScale.get(); 654 } 655 656 set chipScale(s4) { 657 this.__chipScale.set(s4); 658 } 659 660 get chipOpacity() { 661 return this.__chipOpacity.get(); 662 } 663 664 set chipOpacity(r4) { 665 this.__chipOpacity.set(r4); 666 } 667 668 get chipBlendColor() { 669 return this.__chipBlendColor.get(); 670 } 671 672 set chipBlendColor(q4) { 673 this.__chipBlendColor.set(q4); 674 } 675 676 get deleteChip() { 677 return this.__deleteChip.get(); 678 } 679 680 set deleteChip(p4) { 681 this.__deleteChip.set(p4); 682 } 683 684 get chipNodeOnFocus() { 685 return this.__chipNodeOnFocus.get(); 686 } 687 688 set chipNodeOnFocus(o4) { 689 this.__chipNodeOnFocus.set(o4); 690 } 691 692 get useDefaultSuffixIcon() { 693 return this.__useDefaultSuffixIcon.get(); 694 } 695 696 set useDefaultSuffixIcon(n4) { 697 this.__useDefaultSuffixIcon.set(n4); 698 } 699 700 get suffixIconOnFocus() { 701 return this.__suffixIconOnFocus.get(); 702 } 703 704 set suffixIconOnFocus(m4) { 705 this.__suffixIconOnFocus.set(m4); 706 } 707 708 get chipBreakPoints() { 709 return this.__chipBreakPoints.get(); 710 } 711 712 set chipBreakPoints(l4) { 713 this.__chipBreakPoints.set(l4); 714 } 715 716 get isShowPressedBackGroundColor() { 717 return this.__isShowPressedBackGroundColor.get(); 718 } 719 720 set isShowPressedBackGroundColor(k4) { 721 this.__isShowPressedBackGroundColor.set(k4); 722 } 723 724 get fontSizeScale() { 725 return this.__fontSizeScale.get(); 726 } 727 728 set fontSizeScale(j4) { 729 this.__fontSizeScale.set(j4); 730 } 731 732 get fontWeightScale() { 733 return this.__fontWeightScale.get(); 734 } 735 736 set fontWeightScale(i4) { 737 this.__fontWeightScale.set(i4); 738 } 739 740 get prefixSymbolWidth() { 741 return this.__prefixSymbolWidth.get(); 742 } 743 744 set prefixSymbolWidth(h4) { 745 this.__prefixSymbolWidth.set(h4); 746 } 747 748 get suffixSymbolWidth() { 749 return this.__suffixSymbolWidth.get(); 750 } 751 752 set suffixSymbolWidth(g4) { 753 this.__suffixSymbolWidth.set(g4); 754 } 755 756 get symbolEffect() { 757 return this.__symbolEffect.get(); 758 } 759 760 set symbolEffect(f4) { 761 this.__symbolEffect.set(f4); 762 } 763 764 get symbolEffect() { 765 return this.__symbolEffect.get(); 766 } 767 768 set symbolEffect(a6) { 769 this.__symbolEffect.set(a6); 770 } 771 772 isChipSizeEnum() { 773 return typeof (this.chipSize) === 'string'; 774 } 775 776 getLabelFontSize() { 777 if (this.label?.fontSize !== void (0) && this.toVp(this.label.fontSize) >= 0) { 778 return this.label.fontSize; 779 } 780 else { 781 if (this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL) { 782 try { 783 resourceManager.getSystemResourceManager() 784 .getNumberByName((this.theme.label.smallFontSize.params[0]).split('.')[2]); 785 return this.theme.label.smallFontSize; 786 } 787 catch (e4) { 788 return this.theme.label.defaultFontSize; 789 } 790 } 791 else { 792 try { 793 resourceManager.getSystemResourceManager() 794 .getNumberByName((this.theme.label.normalFontSize.params[0]).split('.')[2]); 795 return this.theme.label.normalFontSize; 796 } 797 catch (d4) { 798 return this.theme.label.defaultFontSize; 799 } 800 } 801 } 802 } 803 804 getLabelFontColor() { 805 if (this.getChipActive()) { 806 return this.label?.activatedFontColor ?? this.theme.label.activatedFontColor; 807 } 808 return this.label?.fontColor ?? this.theme.label.fontColor; 809 } 810 811 getLabelFontFamily() { 812 return this.label?.fontFamily ?? this.theme.label.fontFamily; 813 } 814 815 getLabelFontWeight() { 816 if (this.getChipActive()) { 817 return FontWeight.Medium; 818 } 819 return FontWeight.Regular; 820 } 821 822 lengthMetricsToVp(b4) { 823 let c4 = 0; 824 if (b4) { 825 switch (b4.unit) { 826 case LengthUnit.PX: 827 return px2vp(b4.value); 828 case LengthUnit.VP: 829 return b4.value; 830 case LengthUnit.FP: 831 px2vp(fp2px(b4.value)); 832 break; 833 case LengthUnit.PERCENT: 834 return Number.NEGATIVE_INFINITY; 835 case LengthUnit.LPX: 836 return px2vp(lpx2px(b4.value)); 837 } 838 } 839 return c4; 840 } 841 842 toVp(v3) { 843 if (v3 === void (0)) { 844 return Number.NEGATIVE_INFINITY; 845 } 846 switch (typeof (v3)) { 847 case 'number': 848 return v3; 849 case 'object': 850 try { 851 if (v3.id !== -1) { 852 return px2vp(getContext(this).resourceManager.getNumber(v3.id)); 853 } 854 else { 855 return px2vp(getContext(this) 856 .resourceManager 857 .getNumberByName((v3.params[0]).split('.')[2])); 858 } 859 } 860 catch (a4) { 861 return Number.NEGATIVE_INFINITY; 862 } 863 case 'string': 864 let w3 = new RegExp("(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$", "i"); 865 let x3 = v3.match(w3); 866 if (!x3) { 867 return Number.NEGATIVE_INFINITY; 868 } 869 let y3 = Number(x3?.[1] ?? 0); 870 let z3 = x3?.[2] ?? 'vp'; 871 switch (z3.toLowerCase()) { 872 case 'px': 873 y3 = px2vp(y3); 874 break; 875 case 'fp': 876 y3 = px2vp(fp2px(y3)); 877 break; 878 case 'lpx': 879 y3 = px2vp(lpx2px(y3)); 880 break; 881 case '%': 882 y3 = Number.NEGATIVE_INFINITY; 883 break; 884 case 'vp': 885 break; 886 default: 887 break; 888 } 889 return y3; 890 default: 891 return Number.NEGATIVE_INFINITY; 892 } 893 } 894 895 getLabelMargin() { 896 let u3 = { left: 0, right: 0 }; 897 if (this.label?.labelMargin?.left !== void (0) && this.toVp(this.label.labelMargin.left) >= 0) { 898 u3.left = this.label?.labelMargin?.left; 899 } 900 else if ((this.prefixSymbol?.normal || this.prefixSymbol?.activated) || this.prefixIcon?.src) { 901 if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) { 902 u3.left = this.theme.label.smallMargin.left; 903 } 904 else { 905 u3.left = this.theme.label.normalMargin.left; 906 } 907 } 908 if (this.label?.labelMargin?.right !== void (0) && this.toVp(this.label.labelMargin.right) >= 0) { 909 u3.right = this.label?.labelMargin?.right; 910 } 911 else if ((this.suffixSymbol?.normal || this.suffixSymbol?.activated) || 912 this.suffixIcon?.src || this.useDefaultSuffixIcon) { 913 if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) { 914 u3.right = this.theme.label.smallMargin.right; 915 } 916 else { 917 u3.right = this.theme.label.normalMargin.right; 918 } 919 } 920 return u3; 921 } 922 923 getLocalizedLabelMargin() { 924 let t3 = { start: LengthMetrics.vp(0), end: LengthMetrics.vp(0) }; 925 if (this.label?.localizedLabelMargin?.start?.value !== void (0) && 926 this.lengthMetricsToVp(this.label.localizedLabelMargin.start) >= 0) { 927 t3.start = this.label?.localizedLabelMargin?.start; 928 } 929 else if ((this.prefixSymbol?.normal || this.prefixSymbol?.activated) || this.prefixIcon?.src) { 930 if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) { 931 t3.start = this.theme.label.localizedSmallMargin.start; 932 } 933 else { 934 t3.start = this.theme.label.localizedNormalMargin.start; 935 } 936 } 937 if (this.label?.localizedLabelMargin?.end?.value !== void (0) && 938 this.lengthMetricsToVp(this.label.localizedLabelMargin.end) >= 0) { 939 t3.end = this.label?.localizedLabelMargin?.end; 940 } 941 else if ((this.suffixSymbol?.normal || this.suffixSymbol?.activated) || 942 this.suffixIcon?.src || this.useDefaultSuffixIcon) { 943 if (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL) { 944 t3.end = this.theme.label.localizedSmallMargin.end; 945 } 946 else { 947 t3.end = this.theme.label.localizedNormalMargin.end; 948 } 949 } 950 return t3; 951 } 952 953 getLabelStartEndVp() { 954 let r3 = this.getLocalizedLabelMargin(); 955 if (this.label && (this.label.labelMargin !== void (0)) && (this.label.localizedLabelMargin === void (0))) { 956 let s3 = this.getLabelMargin(); 957 return { 958 start: LengthMetrics.vp(this.toVp(s3.left)), 959 end: LengthMetrics.vp(this.toVp(s3.right)) 960 }; 961 } 962 return { 963 start: LengthMetrics.vp(this.lengthMetricsToVp(r3.start)), 964 end: LengthMetrics.vp(this.lengthMetricsToVp(r3.end)) 965 }; 966 } 967 968 getActualLabelMargin() { 969 let q3 = this.getLocalizedLabelMargin(); 970 if (this.label && this.label.localizedLabelMargin !== void (0)) { 971 return q3; 972 } 973 if (this.label && this.label.labelMargin !== void (0)) { 974 return this.getLabelMargin(); 975 } 976 return q3; 977 } 978 979 getSuffixIconSize() { 980 let p3 = { width: 0, height: 0 }; 981 if (this.suffixIcon?.size?.width !== void (0) && this.toVp(this.suffixIcon?.size?.width) >= 0) { 982 p3.width = this.suffixIcon?.size?.width; 983 } 984 else { 985 if (this.getSuffixIconSrc()) { 986 p3.width = this.theme.suffixIcon.size.width; 987 } 988 else { 989 p3.width = 0; 990 } 991 } 992 if (this.suffixIcon?.size?.height !== void (0) && this.toVp(this.suffixIcon?.size?.height) >= 0) { 993 p3.height = this.suffixIcon?.size?.height; 994 } 995 else { 996 if (this.getSuffixIconSrc()) { 997 p3.height = this.theme.suffixIcon.size.height; 998 } 999 else { 1000 p3.height = 0; 1001 } 1002 } 1003 return p3; 1004 } 1005 1006 getPrefixIconSize() { 1007 let o3 = { width: 0, height: 0 }; 1008 if (this.prefixIcon?.size?.width !== void (0) && this.toVp(this.prefixIcon?.size?.width) >= 0) { 1009 o3.width = this.prefixIcon?.size?.width; 1010 } 1011 else { 1012 if (this.prefixIcon?.src) { 1013 o3.width = this.theme.prefixIcon.size.width; 1014 } 1015 else { 1016 o3.width = 0; 1017 } 1018 } 1019 if (this.prefixIcon?.size?.height !== void (0) && this.toVp(this.prefixIcon?.size?.height) >= 0) { 1020 o3.height = this.prefixIcon?.size?.height; 1021 } 1022 else { 1023 if (this.prefixIcon?.src) { 1024 o3.height = this.theme.prefixIcon.size.height; 1025 } 1026 else { 1027 o3.height = 0; 1028 } 1029 } 1030 return o3; 1031 } 1032 1033 getPrefixIconFilledColor() { 1034 if (this.getChipActive()) { 1035 return this.prefixIcon?.activatedFillColor ?? this.theme.prefixIcon.activatedFillColor; 1036 } 1037 return this.prefixIcon?.fillColor ?? this.theme.prefixIcon.fillColor; 1038 } 1039 1040 getSuffixIconFilledColor() { 1041 if (this.getChipActive()) { 1042 return this.suffixIcon?.activatedFillColor ?? this.theme.suffixIcon.activatedFillColor; 1043 } 1044 return this.suffixIcon?.fillColor ?? this.theme.suffixIcon.fillColor; 1045 } 1046 1047 getDefaultSymbolColor() { 1048 if (this.getChipActive()) { 1049 return this.theme.defaultSymbol.activatedFontColor; 1050 } 1051 return this.theme.defaultSymbol.normalFontColor; 1052 } 1053 1054 getPrefixSymbolModifier() { 1055 if (this.getChipActive()) { 1056 return this.prefixSymbol?.activated; 1057 } 1058 return this.prefixSymbol?.normal; 1059 } 1060 1061 getSuffixSymbolModifier() { 1062 if (this.getChipActive()) { 1063 return this.suffixSymbol?.activated; 1064 } 1065 return this.suffixSymbol?.normal; 1066 } 1067 1068 getSuffixIconFocusable() { 1069 return (this.useDefaultSuffixIcon && (this.allowClose ?? true)) || this.suffixIcon?.action !== void (0); 1070 } 1071 1072 getChipNodePadding() { 1073 return (this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL) ? this.theme.chipNode.localizedSmallPadding : this.theme.chipNode.localizedNormalPadding; 1074 } 1075 1076 getChipNodeRadius() { 1077 if (this.chipNodeRadius !== void (0) && this.toVp(this.chipNodeRadius) >= 0) { 1078 return this.chipNodeRadius; 1079 } 1080 else { 1081 return ((this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL) ? 1082 this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius); 1083 } 1084 } 1085 1086 getChipNodeBackGroundColor() { 1087 let l3; 1088 if (this.getChipActive()) { 1089 l3 = this.chipNodeActivatedBackgroundColor ?? this.theme.chipNode.activatedBackgroundColor; 1090 } 1091 else { 1092 l3 = this.chipNodeBackgroundColor ?? this.theme.chipNode.backgroundColor; 1093 } 1094 let m3; 1095 try { 1096 m3 = ColorMetrics.resourceColor(l3); 1097 } 1098 catch (n3) { 1099 hilog.error(0x3900, 'Ace', `Chip resourceColor, error: ${n3.toString()}`); 1100 m3 = ColorMetrics.resourceColor(Color.Transparent); 1101 } 1102 if (!this.isShowPressedBackGroundColor) { 1103 return m3.color; 1104 } 1105 return m3.blendColor(ColorMetrics.resourceColor("#19000000")) 1106 .color; 1107 } 1108 1109 getChipNodeHeight() { 1110 if (this.isChipSizeEnum()) { 1111 return this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight; 1112 } 1113 else { 1114 this.chipNodeSize = this.chipSize; 1115 return (this.chipNodeSize?.height !== void (0) && this.toVp(this.chipNodeSize?.height) >= 0) ? 1116 this.toVp(this.chipNodeSize?.height) : this.theme.chipNode.normalHeight; 1117 } 1118 } 1119 1120 getLabelWidth() { 1121 return px2vp(measure.measureText({ 1122 textContent: this.label?.text ?? "", 1123 fontSize: this.getLabelFontSize(), 1124 fontFamily: this.label?.fontFamily ?? this.theme.label.fontFamily, 1125 fontWeight: this.getLabelFontWeight(), 1126 maxLines: 1, 1127 overflow: TextOverflow.Ellipsis, 1128 textAlign: TextAlign.Center 1129 })); 1130 } 1131 1132 getCalculateChipNodeWidth() { 1133 let j3 = 0; 1134 let k3 = this.getLabelStartEndVp(); 1135 j3 += this.getChipNodePadding().start?.value ?? 0; 1136 j3 += this.toVp(this.getPrefixChipWidth()); 1137 j3 += this.toVp(k3.start?.value ?? 0); 1138 j3 += this.getLabelWidth(); 1139 j3 += this.toVp(k3.end?.value ?? 0); 1140 j3 += this.toVp(this.getSuffixChipWidth()); 1141 j3 += this.getChipNodePadding().end?.value ?? 0; 1142 return j3; 1143 } 1144 1145 getPrefixChipWidth() { 1146 if (this.prefixSymbol?.normal || this.prefixSymbol?.activated) { 1147 return this.prefixSymbolWidth; 1148 } 1149 else if (this.prefixIcon?.src) { 1150 return this.getPrefixIconSize().width; 1151 } 1152 else { 1153 return 0; 1154 } 1155 } 1156 1157 getSuffixChipWidth() { 1158 if (this.suffixSymbol?.normal || this.suffixSymbol?.activated) { 1159 return this.suffixSymbolWidth; 1160 } 1161 else if (this.suffixIcon?.src) { 1162 return this.getSuffixIconSize().width; 1163 } 1164 else if (!this.suffixIcon?.src && (this.allowClose ?? true)) { 1165 return this.theme.defaultSymbol.fontSize; 1166 } 1167 else { 1168 return 0; 1169 } 1170 } 1171 1172 getReserveChipNodeWidth() { 1173 return this.getCalculateChipNodeWidth() - this.getLabelWidth() + this.theme.chipNode.minLabelWidth; 1174 } 1175 1176 getChipEnable() { 1177 return this.chipEnabled || this.chipEnabled === void (0); 1178 } 1179 1180 getChipActive() { 1181 return this.chipActivated; 1182 } 1183 1184 getChipNodeOpacity() { 1185 return this.getChipEnable() ? this.chipOpacity : this.theme.chipNode.opacity.disabled; 1186 } 1187 1188 handleTouch(i3) { 1189 if (!this.getChipEnable()) { 1190 return; 1191 } 1192 if (this.isHover) { 1193 if (i3.type === TouchType.Down || i3.type === TouchType.Move) { 1194 this.isShowPressedBackGroundColor = true; 1195 } 1196 else if (i3.type === TouchType.Up) { 1197 this.isShowPressedBackGroundColor = false; 1198 } 1199 else { 1200 this.isShowPressedBackGroundColor = false; 1201 } 1202 } 1203 else { 1204 if (i3.type === TouchType.Down || i3.type === TouchType.Move) { 1205 this.isShowPressedBackGroundColor = true; 1206 } 1207 else if (i3.type === TouchType.Up) { 1208 this.isShowPressedBackGroundColor = false; 1209 } 1210 else { 1211 this.isShowPressedBackGroundColor = false; 1212 } 1213 } 1214 } 1215 1216 hoverAnimate(h3) { 1217 if (!this.getChipEnable()) { 1218 return; 1219 } 1220 this.isHover = h3; 1221 if (this.isHover) { 1222 this.isShowPressedBackGroundColor = true; 1223 } 1224 else { 1225 this.isShowPressedBackGroundColor = false; 1226 } 1227 } 1228 1229 deleteChipNodeAnimate() { 1230 Context.animateTo({ duration: 150, curve: Curve.Sharp }, () => { 1231 this.chipOpacity = 0; 1232 this.chipBlendColor = Color.Transparent; 1233 }); 1234 Context.animateTo({ 1235 duration: 150, curve: Curve.FastOutLinearIn, onFinish: () => { 1236 this.deleteChip = true; 1237 } 1238 }, () => { 1239 this.chipScale = { x: 0.85, y: 0.85 }; 1240 }); 1241 } 1242 1243 getSuffixIconSrc() { 1244 this.useDefaultSuffixIcon = !this.suffixIcon?.src && (this.allowClose ?? true); 1245 return this.useDefaultSuffixIcon ? this.theme.suffixIcon.defaultDeleteIcon : (this.suffixIcon?.src ?? void (0)); 1246 } 1247 1248 getChipNodeWidth() { 1249 if (!this.isChipSizeEnum()) { 1250 this.chipNodeSize = this.chipSize; 1251 if (this.chipNodeSize?.width !== void (0) && this.toVp(this.chipNodeSize.width) >= 0) { 1252 return this.toVp(this.chipNodeSize.width); 1253 } 1254 } 1255 let e3 = this.getChipConstraintWidth(); 1256 return Math.min(Math.max(this.getCalculateChipNodeWidth(), e3.minWidth), e3.maxWidth); 1257 } 1258 1259 getFocusOverlaySize() { 1260 return { 1261 width: Math.max(this.getChipNodeWidth(), this.getChipConstraintWidth().minWidth) + 8, 1262 height: this.getChipNodeHeight() + 8 1263 }; 1264 } 1265 1266 getChipConstraintWidth() { 1267 let b3 = this.getReserveChipNodeWidth(); 1268 let c3 = this.getCalculateChipNodeWidth(); 1269 let d3; 1270 switch (this.chipBreakPoints) { 1271 case BreakPointsType.SM: 1272 d3 = { 1273 minWidth: b3, 1274 maxWidth: Math.min(c3, this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth) 1275 }; 1276 break; 1277 case BreakPointsType.MD: 1278 d3 = { 1279 minWidth: Math.max(c3, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth), 1280 maxWidth: Math.min(c3, this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth) 1281 }; 1282 break; 1283 case BreakPointsType.LG: 1284 d3 = { 1285 minWidth: Math.max(c3, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth), 1286 maxWidth: Math.min(c3, this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth) 1287 }; 1288 break; 1289 default: 1290 d3 = { minWidth: b3, maxWidth: c3 }; 1291 break; 1292 } 1293 d3.minWidth = Math.min(Math.max(this.getCalculateChipNodeWidth(), d3.minWidth), d3.maxWidth); 1294 d3.minHeight = this.getChipNodeHeight(); 1295 if (!this.isChipSizeEnum() && this.chipNodeSize?.height !== void (0) && this.toVp(this.chipNodeSize?.height) >= 0) { 1296 d3.maxHeight = this.toVp(this.chipNodeSize.height); 1297 d3.minHeight = this.toVp(this.chipNodeSize.height); 1298 } 1299 if (!this.isChipSizeEnum() && this.chipNodeSize?.width !== void (0) && this.toVp(this.chipNodeSize?.width) >= 0) { 1300 d3.minWidth = this.toVp(this.chipNodeSize.width); 1301 d3.maxWidth = this.toVp(this.chipNodeSize.width); 1302 } 1303 else if (this.toVp(this.fontSizeScale) >= this.theme.chipNode.suitAgeScale) { 1304 d3.minWidth = void (0); 1305 d3.maxWidth = void (0); 1306 } 1307 return d3; 1308 } 1309 1310 focusOverlay(p2 = null) { 1311 this.observeComponentCreation2((z2, a3) => { 1312 Stack.create(); 1313 Stack.direction(this.chipDirection); 1314 Stack.size({ width: 1, height: 1 }); 1315 Stack.align(Alignment.Center); 1316 }, Stack); 1317 this.observeComponentCreation2((s2, t2) => { 1318 If.create(); 1319 if (this.chipNodeOnFocus && !this.suffixIconOnFocus) { 1320 this.ifElseBranchUpdateFunction(0, () => { 1321 this.observeComponentCreation2((x2, y2) => { 1322 Stack.create(); 1323 Stack.direction(this.chipDirection); 1324 Stack.borderRadius(this.toVp(this.getChipNodeRadius()) + 4); 1325 Stack.size(this.getFocusOverlaySize()); 1326 Stack.borderColor(this.theme.chipNode.focusOutlineColor); 1327 Stack.borderWidth(this.theme.chipNode.borderWidth); 1328 }, Stack); 1329 Stack.pop(); 1330 }); 1331 } 1332 else { 1333 this.ifElseBranchUpdateFunction(1, () => { 1334 }); 1335 } 1336 }, If); 1337 If.pop(); 1338 Stack.pop(); 1339 } 1340 1341 aboutToAppear() { 1342 this.smListener.on("change", (o2) => { 1343 if (o2.matches) { 1344 this.chipBreakPoints = BreakPointsType.SM; 1345 } 1346 }); 1347 this.mdListener.on("change", (n2) => { 1348 if (n2.matches) { 1349 this.chipBreakPoints = BreakPointsType.MD; 1350 } 1351 }); 1352 this.lgListener.on("change", (m2) => { 1353 if (m2.matches) { 1354 this.chipBreakPoints = BreakPointsType.LG; 1355 } 1356 }); 1357 this.callbackId = this.getUIContext() 1358 .getHostContext() 1359 ?.getApplicationContext() 1360 ?.on('environment', this.callbacks); 1361 } 1362 1363 getVisibility() { 1364 if (this.toVp(this.getChipNodeHeight()) > 0) { 1365 return Visibility.Visible; 1366 } 1367 else { 1368 return Visibility.None; 1369 } 1370 } 1371 1372 aboutToDisappear() { 1373 this.smListener.off("change"); 1374 this.mdListener.off("change"); 1375 this.lgListener.off("change"); 1376 if (this.callbackId) { 1377 this.getUIContext() 1378 .getHostContext() 1379 ?.getApplicationContext() 1380 ?.off('environment', this.callbackId); 1381 this.callbackId = void (0); 1382 } 1383 } 1384 1385 chipBuilder(f = null) { 1386 this.observeComponentCreation2((z1, a2) => { 1387 Button.createWithChild(); 1388 Button.constraintSize(this.getChipConstraintWidth()); 1389 Button.direction(this.chipDirection); 1390 Button.type(ButtonType.Normal); 1391 Button.clip(false); 1392 Button.backgroundColor(this.getChipNodeBackGroundColor()); 1393 Button.borderRadius(this.getChipNodeRadius()); 1394 Button.enabled(this.getChipEnable()); 1395 Button.scale(ObservedObject.GetRawObject(this.chipScale)); 1396 Button.focusable(true); 1397 Button.opacity(this.getChipNodeOpacity()); 1398 Button.onFocus(() => { 1399 this.chipNodeOnFocus = true; 1400 }); 1401 Button.onBlur(() => { 1402 this.chipNodeOnFocus = false; 1403 }); 1404 Button.onTouch((i2) => { 1405 this.handleTouch(i2); 1406 }); 1407 Button.onHover((h2) => { 1408 if (h2) { 1409 this.isShowPressedBackGroundColor = true; 1410 } 1411 else { 1412 if (!this.isShowPressedBackGroundColor && h2) { 1413 this.isShowPressedBackGroundColor = true; 1414 } 1415 else { 1416 this.isShowPressedBackGroundColor = false; 1417 } 1418 } 1419 }); 1420 Button.onKeyEvent((g2) => { 1421 if (g2.type === KeyType.Down && g2.keyCode === KeyCode.KEYCODE_FORWARD_DEL && !this.suffixIconOnFocus) { 1422 this.deleteChipNodeAnimate(); 1423 } 1424 }); 1425 Button.onClick(this.onClicked === noop ? undefined : this.onClicked.bind(this)); 1426 }, Button); 1427 this.observeComponentCreation2((x1, y1) => { 1428 Row.create(); 1429 Row.direction(this.chipDirection); 1430 Row.alignItems(VerticalAlign.Center); 1431 Row.justifyContent(FlexAlign.Center); 1432 Row.padding(this.getChipNodePadding()); 1433 Row.constraintSize(this.getChipConstraintWidth()); 1434 }, Row); 1435 this.observeComponentCreation2((j1, k1) => { 1436 If.create(); 1437 if (this.prefixSymbol?.normal || this.prefixSymbol?.activated) { 1438 this.ifElseBranchUpdateFunction(0, () => { 1439 this.observeComponentCreation2((s1, t1) => { 1440 SymbolGlyph.create(); 1441 SymbolGlyph.fontSize(this.theme.defaultSymbol.fontSize); 1442 SymbolGlyph.fontColor(this.getDefaultSymbolColor()); 1443 SymbolGlyph.attributeModifier.bind(this)(this.getPrefixSymbolModifier()); 1444 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1445 SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false); 1446 SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), this.theme.defaultSymbol.defaultEffect); 1447 SymbolGlyph.onSizeChange((v1, w1) => { 1448 this.prefixSymbolWidth = w1?.width; 1449 }); 1450 SymbolGlyph.key("PrefixSymbolGlyph"); 1451 }, SymbolGlyph); 1452 }); 1453 } 1454 else if (this.prefixIcon?.src !== "") { 1455 this.ifElseBranchUpdateFunction(1, () => { 1456 this.observeComponentCreation2((o1, p1) => { 1457 Image.create(this.prefixIcon?.src); 1458 Image.direction(this.chipDirection); 1459 Image.opacity(this.getChipNodeOpacity()); 1460 Image.size(this.getPrefixIconSize()); 1461 Image.fillColor(this.getPrefixIconFilledColor()); 1462 Image.enabled(this.getChipEnable()); 1463 Image.objectFit(ImageFit.Cover); 1464 Image.focusable(false); 1465 Image.flexShrink(0); 1466 Image.visibility(this.getVisibility()); 1467 Image.draggable(false); 1468 }, Image); 1469 }); 1470 } 1471 else { 1472 this.ifElseBranchUpdateFunction(2, () => { 1473 }); 1474 } 1475 }, If); 1476 If.pop(); 1477 this.observeComponentCreation2((h1, i1) => { 1478 Text.create(this.label?.text ?? ""); 1479 Text.direction(this.chipDirection); 1480 Text.opacity(this.getChipNodeOpacity()); 1481 Text.fontSize(this.getLabelFontSize()); 1482 Text.fontColor(this.getLabelFontColor()); 1483 Text.fontFamily(this.getLabelFontFamily()); 1484 Text.fontWeight(this.getLabelFontWeight()); 1485 Text.margin(this.getActualLabelMargin()); 1486 Text.enabled(this.getChipEnable()); 1487 Text.maxLines(1); 1488 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1489 Text.flexShrink(1); 1490 Text.focusable(true); 1491 Text.textAlign(TextAlign.Center); 1492 Text.visibility(this.getVisibility()); 1493 Text.draggable(false); 1494 }, Text); 1495 Text.pop(); 1496 this.observeComponentCreation2((l, m) => { 1497 If.create(); 1498 if (this.suffixSymbol?.normal || this.suffixSymbol?.activated) { 1499 this.ifElseBranchUpdateFunction(0, () => { 1500 this.observeComponentCreation2((c1, d1) => { 1501 SymbolGlyph.create(); 1502 SymbolGlyph.fontSize(this.theme.defaultSymbol.fontSize); 1503 SymbolGlyph.fontColor(this.getDefaultSymbolColor()); 1504 SymbolGlyph.attributeModifier.bind(this)(this.getSuffixSymbolModifier()); 1505 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 1506 SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false); 1507 SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), this.theme.defaultSymbol.defaultEffect); 1508 SymbolGlyph.onSizeChange((f1, g1) => { 1509 this.suffixSymbolWidth = g1?.width; 1510 }); 1511 SymbolGlyph.key("SuffixSymbolGlyph"); 1512 }, SymbolGlyph); 1513 }); 1514 } 1515 else if (this.suffixIcon?.src !== "") { 1516 this.ifElseBranchUpdateFunction(1, () => { 1517 this.observeComponentCreation2((v, w) => { 1518 Image.create(this.getSuffixIconSrc()); 1519 Image.direction(this.chipDirection); 1520 Image.opacity(this.getChipNodeOpacity()); 1521 Image.size(this.getSuffixIconSize()); 1522 Image.fillColor(this.getSuffixIconFilledColor()); 1523 Image.enabled(this.getChipEnable()); 1524 Image.focusable(this.getSuffixIconFocusable()); 1525 Image.objectFit(ImageFit.Cover); 1526 Image.flexShrink(0); 1527 Image.visibility(this.getVisibility()); 1528 Image.draggable(false); 1529 Image.onFocus(() => { 1530 this.suffixIconOnFocus = true; 1531 }); 1532 Image.onBlur(() => { 1533 this.suffixIconOnFocus = false; 1534 }); 1535 Image.onClick(() => { 1536 if (!this.getChipEnable()) { 1537 return; 1538 } 1539 if (this.suffixIcon?.action) { 1540 this.suffixIcon.action(); 1541 return; 1542 } 1543 if ((this.allowClose ?? true) && this.useDefaultSuffixIcon) { 1544 this.onClose(); 1545 this.deleteChipNodeAnimate(); 1546 return; 1547 } 1548 this.onClicked(); 1549 }); 1550 }, Image); 1551 }); 1552 } 1553 else if (this.allowClose ?? true) { 1554 this.ifElseBranchUpdateFunction(2, () => { 1555 this.observeComponentCreation2((q, r) => { 1556 SymbolGlyph.create({ 1557 "id": -1, 1558 "type": 40000, 1559 params: ['sys.symbol.xmark'], 1560 "bundleName": "__harDefaultBundleName__", 1561 "moduleName": "__harDefaultModuleName__" 1562 }); 1563 SymbolGlyph.fontSize(this.theme.defaultSymbol.fontSize); 1564 SymbolGlyph.fontColor(this.getDefaultSymbolColor()); 1565 SymbolGlyph.onClick(() => { 1566 if (!this.getChipEnable()) { 1567 return; 1568 } 1569 this.onClose(); 1570 this.deleteChipNodeAnimate(); 1571 }); 1572 }, SymbolGlyph); 1573 }); 1574 } 1575 else { 1576 this.ifElseBranchUpdateFunction(3, () => { 1577 }); 1578 } 1579 }, If); 1580 If.pop(); 1581 Row.pop(); 1582 Button.pop(); 1583 } 1584 1585 initialRender() { 1586 this.observeComponentCreation2((b, c) => { 1587 If.create(); 1588 if (!this.deleteChip) { 1589 this.ifElseBranchUpdateFunction(0, () => { 1590 this.chipBuilder.bind(this)(this); 1591 }); 1592 } 1593 else { 1594 this.ifElseBranchUpdateFunction(1, () => { 1595 }); 1596 } 1597 }, If); 1598 If.pop(); 1599 } 1600 1601 rerender() { 1602 this.updateDirtyElements(); 1603 } 1604} 1605 1606export default { 1607 Chip, ChipSize 1608} 1609