1/* 2 * Copyright (c) 2025 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 16var __decorate = 17 (this && this.__decorate) || 18 function (decorators, target, key, desc) { 19 var c = arguments.length, 20 r = c < 3 ? target : desc === null ? (desc = Object.getOwnPropertyDescriptor(target, key)) : desc, 21 d; 22 if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') 23 r = Reflect.decorate(decorators, target, key, desc); 24 else 25 for (var i = decorators.length - 1; i >= 0; i--) 26 if ((d = decorators[i])) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 27 return (c > 3 && r && Object.defineProperty(target, key, r), r); 28 }; 29if (!('finalizeConstruction' in ViewPU.prototype)) { 30 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {}); 31} 32if (PUV2ViewBase.contextStack === undefined) { 33 Reflect.set(PUV2ViewBase, 'contextStack', []); 34} 35const curves = requireNativeModule('ohos.curves'); 36const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 37const LengthUnit = requireNapi('arkui.node').LengthUnit; 38const i18n = requireNapi('i18n'); 39const util = requireNapi('util'); 40const SMALLEST_MAX_FONT_SCALE = 1; 41const LARGEST_MAX_FONT_SCALE = 2; 42const SMALLEST_MIN_FONT_SCALE = 0; 43const LARGEST_MIN_FONT_SCALE = 1; 44const tabSimpleTheme = { 45 buttonBackgroundColor: { 46 id: -1, 47 type: 10001, 48 params: ['sys.color.segment_button_v2_tab_button_background'], 49 bundleName: '__harDefaultBundleName__', 50 moduleName: '__harDefaultModuleName__', 51 }, 52 buttonBorderRadius: { 53 id: -1, 54 type: 10002, 55 params: ['sys.float.segment_button_v2_background_corner_radius'], 56 bundleName: '__harDefaultBundleName__', 57 moduleName: '__harDefaultModuleName__', 58 }, 59 buttonMinHeight: { 60 id: -1, 61 type: 10002, 62 params: ['sys.float.segment_button_v2_singleline_background_height'], 63 bundleName: '__harDefaultBundleName__', 64 moduleName: '__harDefaultModuleName__', 65 }, 66 hybridButtonMinHeight: { 67 id: -1, 68 type: 10002, 69 params: ['sys.float.segment_button_v2_doubleline_background_height'], 70 bundleName: '__harDefaultBundleName__', 71 moduleName: '__harDefaultModuleName__', 72 }, 73 buttonPadding: { 74 id: -1, 75 type: 10002, 76 params: ['sys.float.padding_level1'], 77 bundleName: '__harDefaultBundleName__', 78 moduleName: '__harDefaultModuleName__', 79 }, 80 itemSelectedBackgroundColor: { 81 id: -1, 82 type: 10001, 83 params: ['sys.color.segment_button_v2_tab_selected_item_background'], 84 bundleName: '__harDefaultBundleName__', 85 moduleName: '__harDefaultModuleName__', 86 }, 87 itemBorderRadius: { 88 id: -1, 89 type: 10002, 90 params: ['sys.float.segment_button_v2_selected_corner_radius'], 91 bundleName: '__harDefaultBundleName__', 92 moduleName: '__harDefaultModuleName__', 93 }, 94 itemSpace: LengthMetrics.vp(0), 95 itemFontSize: { 96 id: -1, 97 type: 10002, 98 params: ['sys.float.ohos_id_text_size_button2'], 99 bundleName: '__harDefaultBundleName__', 100 moduleName: '__harDefaultModuleName__', 101 }, 102 itemFontColor: { 103 id: -1, 104 type: 10001, 105 params: ['sys.color.font_secondary'], 106 bundleName: '__harDefaultBundleName__', 107 moduleName: '__harDefaultModuleName__', 108 }, 109 itemSelectedFontColor: { 110 id: -1, 111 type: 10001, 112 params: ['sys.color.font_primary'], 113 bundleName: '__harDefaultBundleName__', 114 moduleName: '__harDefaultModuleName__', 115 }, 116 itemFontWeight: FontWeight.Medium, 117 itemSelectedFontWeight: FontWeight.Medium, 118 itemIconSize: 24, 119 itemIconFillColor: { 120 id: -1, 121 type: 10001, 122 params: ['sys.color.font_secondary'], 123 bundleName: '__harDefaultBundleName__', 124 moduleName: '__harDefaultModuleName__', 125 }, 126 itemSelectedIconFillColor: { 127 id: -1, 128 type: 10001, 129 params: ['sys.color.font_primary'], 130 bundleName: '__harDefaultBundleName__', 131 moduleName: '__harDefaultModuleName__', 132 }, 133 itemSymbolFontSize: 20, 134 itemSymbolFontColor: { 135 id: -1, 136 type: 10001, 137 params: ['sys.color.font_secondary'], 138 bundleName: '__harDefaultBundleName__', 139 moduleName: '__harDefaultModuleName__', 140 }, 141 itemSelectedSymbolFontColor: { 142 id: -1, 143 type: 10001, 144 params: ['sys.color.font_primary'], 145 bundleName: '__harDefaultBundleName__', 146 moduleName: '__harDefaultModuleName__', 147 }, 148 itemMinHeight: { 149 id: -1, 150 type: 10002, 151 params: ['sys.float.segment_button_v2_singleline_selected_height'], 152 bundleName: '__harDefaultBundleName__', 153 moduleName: '__harDefaultModuleName__', 154 }, 155 hybridItemMinHeight: { 156 id: -1, 157 type: 10002, 158 params: ['sys.float.segment_button_v2_doubleline_selected_height'], 159 bundleName: '__harDefaultBundleName__', 160 moduleName: '__harDefaultModuleName__', 161 }, 162 itemPadding: { 163 top: LengthMetrics.resource({ 164 id: -1, 165 type: 10002, 166 params: ['sys.float.padding_level2'], 167 bundleName: '__harDefaultBundleName__', 168 moduleName: '__harDefaultModuleName__', 169 }), 170 bottom: LengthMetrics.resource({ 171 id: -1, 172 type: 10002, 173 params: ['sys.float.padding_level2'], 174 bundleName: '__harDefaultBundleName__', 175 moduleName: '__harDefaultModuleName__', 176 }), 177 start: LengthMetrics.resource({ 178 id: -1, 179 type: 10002, 180 params: ['sys.float.padding_level4'], 181 bundleName: '__harDefaultBundleName__', 182 moduleName: '__harDefaultModuleName__', 183 }), 184 end: LengthMetrics.resource({ 185 id: -1, 186 type: 10002, 187 params: ['sys.float.padding_level4'], 188 bundleName: '__harDefaultBundleName__', 189 moduleName: '__harDefaultModuleName__', 190 }), 191 }, 192 itemShadow: ShadowStyle.OUTER_DEFAULT_XS, 193 itemMaxFontScale: SMALLEST_MAX_FONT_SCALE, 194 itemMaxFontScaleSmallest: SMALLEST_MAX_FONT_SCALE, 195 itemMaxFontScaleLargest: LARGEST_MAX_FONT_SCALE, 196 itemMinFontScale: SMALLEST_MIN_FONT_SCALE, 197 itemMinFontScaleSmallest: SMALLEST_MIN_FONT_SCALE, 198 itemMinFontScaleLargest: LARGEST_MIN_FONT_SCALE, 199}; 200const capsuleSimpleTheme = { 201 buttonBackgroundColor: { 202 id: -1, 203 type: 10001, 204 params: ['sys.color.segment_button_v2_tab_button_background'], 205 bundleName: '__harDefaultBundleName__', 206 moduleName: '__harDefaultModuleName__', 207 }, 208 buttonBorderRadius: { 209 id: -1, 210 type: 10002, 211 params: ['sys.float.segment_button_v2_background_corner_radius'], 212 bundleName: '__harDefaultBundleName__', 213 moduleName: '__harDefaultModuleName__', 214 }, 215 buttonMinHeight: { 216 id: -1, 217 type: 10002, 218 params: ['sys.float.segment_button_v2_singleline_background_height'], 219 bundleName: '__harDefaultBundleName__', 220 moduleName: '__harDefaultModuleName__', 221 }, 222 hybridButtonMinHeight: { 223 id: -1, 224 type: 10002, 225 params: ['sys.float.segment_button_v2_doubleline_background_height'], 226 bundleName: '__harDefaultBundleName__', 227 moduleName: '__harDefaultModuleName__', 228 }, 229 buttonPadding: { 230 id: -1, 231 type: 10002, 232 params: ['sys.float.padding_level1'], 233 bundleName: '__harDefaultBundleName__', 234 moduleName: '__harDefaultModuleName__', 235 }, 236 itemSelectedBackgroundColor: { 237 id: -1, 238 type: 10001, 239 params: ['sys.color.comp_background_emphasize'], 240 bundleName: '__harDefaultBundleName__', 241 moduleName: '__harDefaultModuleName__', 242 }, 243 itemBorderRadius: { 244 id: -1, 245 type: 10002, 246 params: ['sys.float.segment_button_v2_selected_corner_radius'], 247 bundleName: '__harDefaultBundleName__', 248 moduleName: '__harDefaultModuleName__', 249 }, 250 itemSpace: LengthMetrics.vp(0), 251 itemFontSize: { 252 id: -1, 253 type: 10002, 254 params: ['sys.float.ohos_id_text_size_button2'], 255 bundleName: '__harDefaultBundleName__', 256 moduleName: '__harDefaultModuleName__', 257 }, 258 itemFontColor: { 259 id: -1, 260 type: 10001, 261 params: ['sys.color.font_secondary'], 262 bundleName: '__harDefaultBundleName__', 263 moduleName: '__harDefaultModuleName__', 264 }, 265 itemSelectedFontColor: { 266 id: -1, 267 type: 10001, 268 params: ['sys.color.font_on_primary'], 269 bundleName: '__harDefaultBundleName__', 270 moduleName: '__harDefaultModuleName__', 271 }, 272 itemFontWeight: FontWeight.Medium, 273 itemSelectedFontWeight: FontWeight.Medium, 274 itemIconSize: 24, 275 itemIconFillColor: { 276 id: -1, 277 type: 10001, 278 params: ['sys.color.icon_secondary'], 279 bundleName: '__harDefaultBundleName__', 280 moduleName: '__harDefaultModuleName__', 281 }, 282 itemSelectedIconFillColor: { 283 id: -1, 284 type: 10001, 285 params: ['sys.color.font_on_primary'], 286 bundleName: '__harDefaultBundleName__', 287 moduleName: '__harDefaultModuleName__', 288 }, 289 itemSymbolFontSize: 20, 290 itemSymbolFontColor: { 291 id: -1, 292 type: 10001, 293 params: ['sys.color.font_secondary'], 294 bundleName: '__harDefaultBundleName__', 295 moduleName: '__harDefaultModuleName__', 296 }, 297 itemSelectedSymbolFontColor: { 298 id: -1, 299 type: 10001, 300 params: ['sys.color.font_on_primary'], 301 bundleName: '__harDefaultBundleName__', 302 moduleName: '__harDefaultModuleName__', 303 }, 304 itemMinHeight: { 305 id: -1, 306 type: 10002, 307 params: ['sys.float.segment_button_v2_singleline_selected_height'], 308 bundleName: '__harDefaultBundleName__', 309 moduleName: '__harDefaultModuleName__', 310 }, 311 hybridItemMinHeight: { 312 id: -1, 313 type: 10002, 314 params: ['sys.float.segment_button_v2_doubleline_selected_height'], 315 bundleName: '__harDefaultBundleName__', 316 moduleName: '__harDefaultModuleName__', 317 }, 318 itemPadding: { 319 top: LengthMetrics.resource({ 320 id: -1, 321 type: 10002, 322 params: ['sys.float.padding_level2'], 323 bundleName: '__harDefaultBundleName__', 324 moduleName: '__harDefaultModuleName__', 325 }), 326 bottom: LengthMetrics.resource({ 327 id: -1, 328 type: 10002, 329 params: ['sys.float.padding_level2'], 330 bundleName: '__harDefaultBundleName__', 331 moduleName: '__harDefaultModuleName__', 332 }), 333 start: LengthMetrics.resource({ 334 id: -1, 335 type: 10002, 336 params: ['sys.float.padding_level4'], 337 bundleName: '__harDefaultBundleName__', 338 moduleName: '__harDefaultModuleName__', 339 }), 340 end: LengthMetrics.resource({ 341 id: -1, 342 type: 10002, 343 params: ['sys.float.padding_level4'], 344 bundleName: '__harDefaultBundleName__', 345 moduleName: '__harDefaultModuleName__', 346 }), 347 }, 348 itemShadow: ShadowStyle.OUTER_DEFAULT_XS, 349 itemMaxFontScale: SMALLEST_MAX_FONT_SCALE, 350 itemMaxFontScaleSmallest: SMALLEST_MAX_FONT_SCALE, 351 itemMaxFontScaleLargest: LARGEST_MAX_FONT_SCALE, 352 itemMinFontScale: SMALLEST_MIN_FONT_SCALE, 353 itemMinFontScaleSmallest: SMALLEST_MIN_FONT_SCALE, 354 itemMinFontScaleLargest: LARGEST_MIN_FONT_SCALE, 355}; 356let SegmentButtonV2Item = class SegmentButtonV2Item { 357 constructor(options) { 358 this.text = options.text; 359 this.icon = options.icon; 360 this.symbol = options.symbol; 361 this.enabled = options.enabled ?? true; 362 this.textModifier = options.textModifier; 363 this.iconModifier = options.iconModifier; 364 this.symbolModifier = options.symbolModifier; 365 this.accessibilityText = options.accessibilityText; 366 this.accessibilityDescription = options.accessibilityDescription; 367 this.accessibilityLevel = options.accessibilityLevel; 368 } 369 get isHybrid() { 370 return !!this.text && (!!this.icon || !!this.symbol); 371 } 372}; 373__decorate([Trace], SegmentButtonV2Item.prototype, 'text', void 0); 374__decorate([Trace], SegmentButtonV2Item.prototype, 'icon', void 0); 375__decorate([Trace], SegmentButtonV2Item.prototype, 'symbol', void 0); 376__decorate([Trace], SegmentButtonV2Item.prototype, 'enabled', void 0); 377__decorate([Trace], SegmentButtonV2Item.prototype, 'textModifier', void 0); 378__decorate([Trace], SegmentButtonV2Item.prototype, 'iconModifier', void 0); 379__decorate([Trace], SegmentButtonV2Item.prototype, 'symbolModifier', void 0); 380__decorate([Trace], SegmentButtonV2Item.prototype, 'accessibilityText', void 0); 381__decorate([Trace], SegmentButtonV2Item.prototype, 'accessibilityDescription', void 0); 382__decorate([Trace], SegmentButtonV2Item.prototype, 'accessibilityLevel', void 0); 383__decorate([Computed], SegmentButtonV2Item.prototype, 'isHybrid', null); 384SegmentButtonV2Item = __decorate([ObservedV2], SegmentButtonV2Item); 385export { SegmentButtonV2Item }; 386let SegmentButtonV2Items = class SegmentButtonV2Items extends Array { 387 constructor(lengthOrItemOptionsArray) { 388 super(typeof lengthOrItemOptionsArray === 'number' ? lengthOrItemOptionsArray : 0); 389 if (typeof lengthOrItemOptionsArray !== 'number' && lengthOrItemOptionsArray && lengthOrItemOptionsArray.length) { 390 for (let options of lengthOrItemOptionsArray) { 391 if (options) { 392 this.push(new SegmentButtonV2Item(options)); 393 } 394 } 395 } 396 } 397 get hasHybrid() { 398 return this.some(item => item.isHybrid); 399 } 400}; 401__decorate([Computed], SegmentButtonV2Items.prototype, 'hasHybrid', null); 402SegmentButtonV2Items = __decorate([ObservedV2], SegmentButtonV2Items); 403export { SegmentButtonV2Items }; 404const EMPTY_ITEMS = new SegmentButtonV2Items([]); 405export class TabSegmentButtonV2 extends ViewV2 { 406 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) { 407 super(parent, elmtId, extraInfo); 408 this.initParam('items', params && 'items' in params ? params.items : undefined); 409 this.initParam('selectedIndex', params && 'selectedIndex' in params ? params.selectedIndex : undefined); 410 this.$selectedIndex = '$selectedIndex' in params ? params.$selectedIndex : () => {}; 411 this.onItemClicked = 'onItemClicked' in params ? params.onItemClicked : () => {}; 412 this.initParam('itemMinFontScale', params && 'itemMinFontScale' in params ? params.itemMinFontScale : undefined); 413 this.initParam('itemMaxFontScale', params && 'itemMaxFontScale' in params ? params.itemMaxFontScale : undefined); 414 this.initParam('itemSpace', params && 'itemSpace' in params ? params.itemSpace : undefined); 415 this.initParam('itemFontSize', params && 'itemFontSize' in params ? params.itemFontSize : undefined); 416 this.initParam( 417 'itemSelectedFontSize', 418 params && 'itemSelectedFontSize' in params ? params.itemSelectedFontSize : undefined 419 ); 420 this.initParam('itemFontColor', params && 'itemFontColor' in params ? params.itemFontColor : undefined); 421 this.initParam( 422 'itemSelectedFontColor', 423 params && 'itemSelectedFontColor' in params ? params.itemSelectedFontColor : undefined 424 ); 425 this.initParam('itemFontWeight', params && 'itemFontWeight' in params ? params.itemFontWeight : undefined); 426 this.initParam( 427 'itemSelectedFontWeight', 428 params && 'itemSelectedFontWeight' in params ? params.itemSelectedFontWeight : undefined 429 ); 430 this.initParam('itemBorderRadius', params && 'itemBorderRadius' in params ? params.itemBorderRadius : undefined); 431 this.initParam( 432 'itemSelectedBackgroundColor', 433 params && 'itemSelectedBackgroundColor' in params ? params.itemSelectedBackgroundColor : undefined 434 ); 435 this.initParam('itemIconSize', params && 'itemIconSize' in params ? params.itemIconSize : undefined); 436 this.initParam('itemIconFillColor', params && 'itemIconFillColor' in params ? params.itemIconFillColor : undefined); 437 this.initParam( 438 'itemSelectedIconFillColor', 439 params && 'itemSelectedIconFillColor' in params ? params.itemSelectedIconFillColor : undefined 440 ); 441 this.initParam( 442 'itemSymbolFontSize', 443 params && 'itemSymbolFontSize' in params ? params.itemSymbolFontSize : undefined 444 ); 445 this.initParam( 446 'itemSymbolFontColor', 447 params && 'itemSymbolFontColor' in params ? params.itemSymbolFontColor : undefined 448 ); 449 this.initParam( 450 'itemSelectedSymbolFontColor', 451 params && 'itemSelectedSymbolFontColor' in params ? params.itemSelectedSymbolFontColor : undefined 452 ); 453 this.initParam('itemMinHeight', params && 'itemMinHeight' in params ? params.itemMinHeight : undefined); 454 this.initParam('itemPadding', params && 'itemPadding' in params ? params.itemPadding : undefined); 455 this.initParam('itemShadow', params && 'itemShadow' in params ? params.itemShadow : undefined); 456 this.initParam( 457 'buttonBackgroundColor', 458 params && 'buttonBackgroundColor' in params ? params.buttonBackgroundColor : undefined 459 ); 460 this.initParam( 461 'buttonBackgroundBlurStyle', 462 params && 'buttonBackgroundBlurStyle' in params ? params.buttonBackgroundBlurStyle : undefined 463 ); 464 this.initParam( 465 'buttonBackgroundBlurStyleOptions', 466 params && 'buttonBackgroundBlurStyleOptions' in params ? params.buttonBackgroundBlurStyleOptions : undefined 467 ); 468 this.initParam( 469 'buttonBackgroundEffect', 470 params && 'buttonBackgroundEffect' in params ? params.buttonBackgroundEffect : undefined 471 ); 472 this.initParam( 473 'buttonBorderRadius', 474 params && 'buttonBorderRadius' in params ? params.buttonBorderRadius : undefined 475 ); 476 this.initParam('buttonMinHeight', params && 'buttonMinHeight' in params ? params.buttonMinHeight : undefined); 477 this.initParam('buttonPadding', params && 'buttonPadding' in params ? params.buttonPadding : undefined); 478 this.initParam('languageDirection', params && 'languageDirection' in params ? params.languageDirection : undefined); 479 this.finalizeConstruction(); 480 } 481 initialRender() { 482 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 483 { 484 this.observeComponentCreation2( 485 (elmtId, isInitialRender) => { 486 if (isInitialRender) { 487 let componentCall = new SimpleSegmentButtonV2( 488 this, 489 { 490 theme: tabSimpleTheme, 491 items: this.items, 492 selectedIndex: this.selectedIndex, 493 $selectedIndex: selectedIndex => { 494 this.$selectedIndex?.(selectedIndex); 495 }, 496 onItemClicked: this.onItemClicked, 497 itemMinFontScale: this.itemMinFontScale, 498 itemMaxFontScale: this.itemMaxFontScale, 499 itemSpace: this.itemSpace, 500 itemFontColor: this.itemFontColor, 501 itemSelectedFontColor: this.itemSelectedFontColor, 502 itemFontSize: this.itemFontSize, 503 itemSelectedFontSize: this.itemSelectedFontSize, 504 itemFontWeight: this.itemFontWeight, 505 itemSelectedFontWeight: this.itemSelectedFontWeight, 506 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 507 itemIconSize: this.itemIconSize, 508 itemIconFillColor: this.itemIconFillColor, 509 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 510 itemSymbolFontSize: this.itemSymbolFontSize, 511 itemSymbolFontColor: this.itemSymbolFontColor, 512 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 513 itemBorderRadius: this.itemBorderRadius, 514 itemMinHeight: this.itemMinHeight, 515 itemPadding: this.itemPadding, 516 itemShadow: this.itemShadow, 517 buttonBackgroundColor: this.buttonBackgroundColor, 518 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 519 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 520 buttonBackgroundEffect: this.buttonBackgroundEffect, 521 buttonBorderRadius: this.buttonBorderRadius, 522 buttonMinHeight: this.buttonMinHeight, 523 buttonPadding: this.buttonPadding, 524 languageDirection: this.languageDirection, 525 }, 526 undefined, 527 elmtId, 528 () => {}, 529 { 530 page: 'advancedComponents/src/main/ets/components/SegmentButtonV2.ets', 531 line: 295, 532 col: 5, 533 } 534 ); 535 ViewV2.create(componentCall); 536 let paramsLambda = () => { 537 return { 538 theme: tabSimpleTheme, 539 items: this.items, 540 selectedIndex: this.selectedIndex, 541 $selectedIndex: selectedIndex => { 542 this.$selectedIndex?.(selectedIndex); 543 }, 544 onItemClicked: this.onItemClicked, 545 itemMinFontScale: this.itemMinFontScale, 546 itemMaxFontScale: this.itemMaxFontScale, 547 itemSpace: this.itemSpace, 548 itemFontColor: this.itemFontColor, 549 itemSelectedFontColor: this.itemSelectedFontColor, 550 itemFontSize: this.itemFontSize, 551 itemSelectedFontSize: this.itemSelectedFontSize, 552 itemFontWeight: this.itemFontWeight, 553 itemSelectedFontWeight: this.itemSelectedFontWeight, 554 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 555 itemIconSize: this.itemIconSize, 556 itemIconFillColor: this.itemIconFillColor, 557 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 558 itemSymbolFontSize: this.itemSymbolFontSize, 559 itemSymbolFontColor: this.itemSymbolFontColor, 560 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 561 itemBorderRadius: this.itemBorderRadius, 562 itemMinHeight: this.itemMinHeight, 563 itemPadding: this.itemPadding, 564 itemShadow: this.itemShadow, 565 buttonBackgroundColor: this.buttonBackgroundColor, 566 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 567 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 568 buttonBackgroundEffect: this.buttonBackgroundEffect, 569 buttonBorderRadius: this.buttonBorderRadius, 570 buttonMinHeight: this.buttonMinHeight, 571 buttonPadding: this.buttonPadding, 572 languageDirection: this.languageDirection, 573 }; 574 }; 575 componentCall.paramsGenerator_ = paramsLambda; 576 } else { 577 this.updateStateVarsOfChildByElmtId(elmtId, { 578 theme: tabSimpleTheme, 579 items: this.items, 580 selectedIndex: this.selectedIndex, 581 itemMinFontScale: this.itemMinFontScale, 582 itemMaxFontScale: this.itemMaxFontScale, 583 itemSpace: this.itemSpace, 584 itemFontColor: this.itemFontColor, 585 itemSelectedFontColor: this.itemSelectedFontColor, 586 itemFontSize: this.itemFontSize, 587 itemSelectedFontSize: this.itemSelectedFontSize, 588 itemFontWeight: this.itemFontWeight, 589 itemSelectedFontWeight: this.itemSelectedFontWeight, 590 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 591 itemIconSize: this.itemIconSize, 592 itemIconFillColor: this.itemIconFillColor, 593 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 594 itemSymbolFontSize: this.itemSymbolFontSize, 595 itemSymbolFontColor: this.itemSymbolFontColor, 596 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 597 itemBorderRadius: this.itemBorderRadius, 598 itemMinHeight: this.itemMinHeight, 599 itemPadding: this.itemPadding, 600 itemShadow: this.itemShadow, 601 buttonBackgroundColor: this.buttonBackgroundColor, 602 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 603 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 604 buttonBackgroundEffect: this.buttonBackgroundEffect, 605 buttonBorderRadius: this.buttonBorderRadius, 606 buttonMinHeight: this.buttonMinHeight, 607 buttonPadding: this.buttonPadding, 608 languageDirection: this.languageDirection, 609 }); 610 } 611 }, 612 { name: 'SimpleSegmentButtonV2' } 613 ); 614 } 615 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 616 } 617 updateStateVars(params) { 618 if (params === undefined) { 619 return; 620 } 621 if ('items' in params) { 622 this.updateParam('items', params.items); 623 } 624 if ('selectedIndex' in params) { 625 this.updateParam('selectedIndex', params.selectedIndex); 626 } 627 if ('itemMinFontScale' in params) { 628 this.updateParam('itemMinFontScale', params.itemMinFontScale); 629 } 630 if ('itemMaxFontScale' in params) { 631 this.updateParam('itemMaxFontScale', params.itemMaxFontScale); 632 } 633 if ('itemSpace' in params) { 634 this.updateParam('itemSpace', params.itemSpace); 635 } 636 if ('itemFontSize' in params) { 637 this.updateParam('itemFontSize', params.itemFontSize); 638 } 639 if ('itemSelectedFontSize' in params) { 640 this.updateParam('itemSelectedFontSize', params.itemSelectedFontSize); 641 } 642 if ('itemFontColor' in params) { 643 this.updateParam('itemFontColor', params.itemFontColor); 644 } 645 if ('itemSelectedFontColor' in params) { 646 this.updateParam('itemSelectedFontColor', params.itemSelectedFontColor); 647 } 648 if ('itemFontWeight' in params) { 649 this.updateParam('itemFontWeight', params.itemFontWeight); 650 } 651 if ('itemSelectedFontWeight' in params) { 652 this.updateParam('itemSelectedFontWeight', params.itemSelectedFontWeight); 653 } 654 if ('itemBorderRadius' in params) { 655 this.updateParam('itemBorderRadius', params.itemBorderRadius); 656 } 657 if ('itemSelectedBackgroundColor' in params) { 658 this.updateParam('itemSelectedBackgroundColor', params.itemSelectedBackgroundColor); 659 } 660 if ('itemIconSize' in params) { 661 this.updateParam('itemIconSize', params.itemIconSize); 662 } 663 if ('itemIconFillColor' in params) { 664 this.updateParam('itemIconFillColor', params.itemIconFillColor); 665 } 666 if ('itemSelectedIconFillColor' in params) { 667 this.updateParam('itemSelectedIconFillColor', params.itemSelectedIconFillColor); 668 } 669 if ('itemSymbolFontSize' in params) { 670 this.updateParam('itemSymbolFontSize', params.itemSymbolFontSize); 671 } 672 if ('itemSymbolFontColor' in params) { 673 this.updateParam('itemSymbolFontColor', params.itemSymbolFontColor); 674 } 675 if ('itemSelectedSymbolFontColor' in params) { 676 this.updateParam('itemSelectedSymbolFontColor', params.itemSelectedSymbolFontColor); 677 } 678 if ('itemMinHeight' in params) { 679 this.updateParam('itemMinHeight', params.itemMinHeight); 680 } 681 if ('itemPadding' in params) { 682 this.updateParam('itemPadding', params.itemPadding); 683 } 684 if ('itemShadow' in params) { 685 this.updateParam('itemShadow', params.itemShadow); 686 } 687 if ('buttonBackgroundColor' in params) { 688 this.updateParam('buttonBackgroundColor', params.buttonBackgroundColor); 689 } 690 if ('buttonBackgroundBlurStyle' in params) { 691 this.updateParam('buttonBackgroundBlurStyle', params.buttonBackgroundBlurStyle); 692 } 693 if ('buttonBackgroundBlurStyleOptions' in params) { 694 this.updateParam('buttonBackgroundBlurStyleOptions', params.buttonBackgroundBlurStyleOptions); 695 } 696 if ('buttonBackgroundEffect' in params) { 697 this.updateParam('buttonBackgroundEffect', params.buttonBackgroundEffect); 698 } 699 if ('buttonBorderRadius' in params) { 700 this.updateParam('buttonBorderRadius', params.buttonBorderRadius); 701 } 702 if ('buttonMinHeight' in params) { 703 this.updateParam('buttonMinHeight', params.buttonMinHeight); 704 } 705 if ('buttonPadding' in params) { 706 this.updateParam('buttonPadding', params.buttonPadding); 707 } 708 if ('languageDirection' in params) { 709 this.updateParam('languageDirection', params.languageDirection); 710 } 711 } 712 rerender() { 713 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 714 this.updateDirtyElements(); 715 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 716 } 717} 718__decorate([Param], TabSegmentButtonV2.prototype, 'items', void 0); 719__decorate([Param], TabSegmentButtonV2.prototype, 'selectedIndex', void 0); 720__decorate([Event], TabSegmentButtonV2.prototype, '$selectedIndex', void 0); 721__decorate([Event], TabSegmentButtonV2.prototype, 'onItemClicked', void 0); 722__decorate([Param], TabSegmentButtonV2.prototype, 'itemMinFontScale', void 0); 723__decorate([Param], TabSegmentButtonV2.prototype, 'itemMaxFontScale', void 0); 724__decorate([Param], TabSegmentButtonV2.prototype, 'itemSpace', void 0); 725__decorate([Param], TabSegmentButtonV2.prototype, 'itemFontSize', void 0); 726__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedFontSize', void 0); 727__decorate([Param], TabSegmentButtonV2.prototype, 'itemFontColor', void 0); 728__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedFontColor', void 0); 729__decorate([Param], TabSegmentButtonV2.prototype, 'itemFontWeight', void 0); 730__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedFontWeight', void 0); 731__decorate([Param], TabSegmentButtonV2.prototype, 'itemBorderRadius', void 0); 732__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedBackgroundColor', void 0); 733__decorate([Param], TabSegmentButtonV2.prototype, 'itemIconSize', void 0); 734__decorate([Param], TabSegmentButtonV2.prototype, 'itemIconFillColor', void 0); 735__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedIconFillColor', void 0); 736__decorate([Param], TabSegmentButtonV2.prototype, 'itemSymbolFontSize', void 0); 737__decorate([Param], TabSegmentButtonV2.prototype, 'itemSymbolFontColor', void 0); 738__decorate([Param], TabSegmentButtonV2.prototype, 'itemSelectedSymbolFontColor', void 0); 739__decorate([Param], TabSegmentButtonV2.prototype, 'itemMinHeight', void 0); 740__decorate([Param], TabSegmentButtonV2.prototype, 'itemPadding', void 0); 741__decorate([Param], TabSegmentButtonV2.prototype, 'itemShadow', void 0); 742__decorate([Param], TabSegmentButtonV2.prototype, 'buttonBackgroundColor', void 0); 743__decorate([Param], TabSegmentButtonV2.prototype, 'buttonBackgroundBlurStyle', void 0); 744__decorate([Param], TabSegmentButtonV2.prototype, 'buttonBackgroundBlurStyleOptions', void 0); 745__decorate([Param], TabSegmentButtonV2.prototype, 'buttonBackgroundEffect', void 0); 746__decorate([Param], TabSegmentButtonV2.prototype, 'buttonBorderRadius', void 0); 747__decorate([Param], TabSegmentButtonV2.prototype, 'buttonMinHeight', void 0); 748__decorate([Param], TabSegmentButtonV2.prototype, 'buttonPadding', void 0); 749__decorate([Param], TabSegmentButtonV2.prototype, 'languageDirection', void 0); 750export class CapsuleSegmentButtonV2 extends ViewV2 { 751 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) { 752 super(parent, elmtId, extraInfo); 753 this.initParam('items', params && 'items' in params ? params.items : undefined); 754 this.initParam('selectedIndex', params && 'selectedIndex' in params ? params.selectedIndex : undefined); 755 this.$selectedIndex = '$selectedIndex' in params ? params.$selectedIndex : () => {}; 756 this.onItemClicked = 'onItemClicked' in params ? params.onItemClicked : () => {}; 757 this.initParam('itemMinFontScale', params && 'itemMinFontScale' in params ? params.itemMinFontScale : undefined); 758 this.initParam('itemMaxFontScale', params && 'itemMaxFontScale' in params ? params.itemMaxFontScale : undefined); 759 this.initParam('itemSpace', params && 'itemSpace' in params ? params.itemSpace : undefined); 760 this.initParam('itemFontColor', params && 'itemFontColor' in params ? params.itemFontColor : undefined); 761 this.initParam( 762 'itemSelectedFontColor', 763 params && 'itemSelectedFontColor' in params ? params.itemSelectedFontColor : undefined 764 ); 765 this.initParam('itemFontSize', params && 'itemFontSize' in params ? params.itemFontSize : undefined); 766 this.initParam( 767 'itemSelectedFontSize', 768 params && 'itemSelectedFontSize' in params ? params.itemSelectedFontSize : undefined 769 ); 770 this.initParam('itemFontWeight', params && 'itemFontWeight' in params ? params.itemFontWeight : undefined); 771 this.initParam( 772 'itemSelectedFontWeight', 773 params && 'itemSelectedFontWeight' in params ? params.itemSelectedFontWeight : undefined 774 ); 775 this.initParam('itemBorderRadius', params && 'itemBorderRadius' in params ? params.itemBorderRadius : undefined); 776 this.initParam( 777 'itemSelectedBackgroundColor', 778 params && 'itemSelectedBackgroundColor' in params ? params.itemSelectedBackgroundColor : undefined 779 ); 780 this.initParam('itemIconSize', params && 'itemIconSize' in params ? params.itemIconSize : undefined); 781 this.initParam('itemIconFillColor', params && 'itemIconFillColor' in params ? params.itemIconFillColor : undefined); 782 this.initParam( 783 'itemSelectedIconFillColor', 784 params && 'itemSelectedIconFillColor' in params ? params.itemSelectedIconFillColor : undefined 785 ); 786 this.initParam( 787 'itemSymbolFontSize', 788 params && 'itemSymbolFontSize' in params ? params.itemSymbolFontSize : undefined 789 ); 790 this.initParam( 791 'itemSymbolFontColor', 792 params && 'itemSymbolFontColor' in params ? params.itemSymbolFontColor : undefined 793 ); 794 this.initParam( 795 'itemSelectedSymbolFontColor', 796 params && 'itemSelectedSymbolFontColor' in params ? params.itemSelectedSymbolFontColor : undefined 797 ); 798 this.initParam('itemMinHeight', params && 'itemMinHeight' in params ? params.itemMinHeight : undefined); 799 this.initParam('itemPadding', params && 'itemPadding' in params ? params.itemPadding : undefined); 800 this.initParam('itemShadow', params && 'itemShadow' in params ? params.itemShadow : undefined); 801 this.initParam( 802 'buttonBackgroundColor', 803 params && 'buttonBackgroundColor' in params ? params.buttonBackgroundColor : undefined 804 ); 805 this.initParam( 806 'buttonBackgroundBlurStyle', 807 params && 'buttonBackgroundBlurStyle' in params ? params.buttonBackgroundBlurStyle : undefined 808 ); 809 this.initParam( 810 'buttonBackgroundBlurStyleOptions', 811 params && 'buttonBackgroundBlurStyleOptions' in params ? params.buttonBackgroundBlurStyleOptions : undefined 812 ); 813 this.initParam( 814 'buttonBackgroundEffect', 815 params && 'buttonBackgroundEffect' in params ? params.buttonBackgroundEffect : undefined 816 ); 817 this.initParam( 818 'buttonBorderRadius', 819 params && 'buttonBorderRadius' in params ? params.buttonBorderRadius : undefined 820 ); 821 this.initParam('buttonMinHeight', params && 'buttonMinHeight' in params ? params.buttonMinHeight : undefined); 822 this.initParam('buttonPadding', params && 'buttonPadding' in params ? params.buttonPadding : undefined); 823 this.initParam('languageDirection', params && 'languageDirection' in params ? params.languageDirection : undefined); 824 this.finalizeConstruction(); 825 } 826 initialRender() { 827 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 828 { 829 this.observeComponentCreation2( 830 (elmtId, isInitialRender) => { 831 if (isInitialRender) { 832 let componentCall = new SimpleSegmentButtonV2( 833 this, 834 { 835 theme: capsuleSimpleTheme, 836 items: this.items, 837 selectedIndex: this.selectedIndex, 838 $selectedIndex: selectedIndex => { 839 this.$selectedIndex?.(selectedIndex); 840 }, 841 onItemClicked: this.onItemClicked, 842 itemMinFontScale: this.itemMinFontScale, 843 itemMaxFontScale: this.itemMaxFontScale, 844 itemSpace: this.itemSpace, 845 itemFontColor: this.itemFontColor, 846 itemSelectedFontColor: this.itemSelectedFontColor, 847 itemFontSize: this.itemFontSize, 848 itemSelectedFontSize: this.itemSelectedFontSize, 849 itemFontWeight: this.itemFontWeight, 850 itemSelectedFontWeight: this.itemSelectedFontWeight, 851 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 852 itemIconSize: this.itemIconSize, 853 itemIconFillColor: this.itemIconFillColor, 854 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 855 itemSymbolFontSize: this.itemSymbolFontSize, 856 itemSymbolFontColor: this.itemSymbolFontColor, 857 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 858 itemBorderRadius: this.itemBorderRadius, 859 itemMinHeight: this.itemMinHeight, 860 itemPadding: this.itemPadding, 861 itemShadow: this.itemShadow, 862 buttonBackgroundColor: this.buttonBackgroundColor, 863 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 864 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 865 buttonBackgroundEffect: this.buttonBackgroundEffect, 866 buttonBorderRadius: this.buttonBorderRadius, 867 buttonMinHeight: this.buttonMinHeight, 868 buttonPadding: this.buttonPadding, 869 languageDirection: this.languageDirection, 870 }, 871 undefined, 872 elmtId, 873 () => {}, 874 { 875 page: 'advancedComponents/src/main/ets/components/SegmentButtonV2.ets', 876 line: 405, 877 col: 5, 878 } 879 ); 880 ViewV2.create(componentCall); 881 let paramsLambda = () => { 882 return { 883 theme: capsuleSimpleTheme, 884 items: this.items, 885 selectedIndex: this.selectedIndex, 886 $selectedIndex: selectedIndex => { 887 this.$selectedIndex?.(selectedIndex); 888 }, 889 onItemClicked: this.onItemClicked, 890 itemMinFontScale: this.itemMinFontScale, 891 itemMaxFontScale: this.itemMaxFontScale, 892 itemSpace: this.itemSpace, 893 itemFontColor: this.itemFontColor, 894 itemSelectedFontColor: this.itemSelectedFontColor, 895 itemFontSize: this.itemFontSize, 896 itemSelectedFontSize: this.itemSelectedFontSize, 897 itemFontWeight: this.itemFontWeight, 898 itemSelectedFontWeight: this.itemSelectedFontWeight, 899 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 900 itemIconSize: this.itemIconSize, 901 itemIconFillColor: this.itemIconFillColor, 902 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 903 itemSymbolFontSize: this.itemSymbolFontSize, 904 itemSymbolFontColor: this.itemSymbolFontColor, 905 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 906 itemBorderRadius: this.itemBorderRadius, 907 itemMinHeight: this.itemMinHeight, 908 itemPadding: this.itemPadding, 909 itemShadow: this.itemShadow, 910 buttonBackgroundColor: this.buttonBackgroundColor, 911 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 912 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 913 buttonBackgroundEffect: this.buttonBackgroundEffect, 914 buttonBorderRadius: this.buttonBorderRadius, 915 buttonMinHeight: this.buttonMinHeight, 916 buttonPadding: this.buttonPadding, 917 languageDirection: this.languageDirection, 918 }; 919 }; 920 componentCall.paramsGenerator_ = paramsLambda; 921 } else { 922 this.updateStateVarsOfChildByElmtId(elmtId, { 923 theme: capsuleSimpleTheme, 924 items: this.items, 925 selectedIndex: this.selectedIndex, 926 itemMinFontScale: this.itemMinFontScale, 927 itemMaxFontScale: this.itemMaxFontScale, 928 itemSpace: this.itemSpace, 929 itemFontColor: this.itemFontColor, 930 itemSelectedFontColor: this.itemSelectedFontColor, 931 itemFontSize: this.itemFontSize, 932 itemSelectedFontSize: this.itemSelectedFontSize, 933 itemFontWeight: this.itemFontWeight, 934 itemSelectedFontWeight: this.itemSelectedFontWeight, 935 itemSelectedBackgroundColor: this.itemSelectedBackgroundColor, 936 itemIconSize: this.itemIconSize, 937 itemIconFillColor: this.itemIconFillColor, 938 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 939 itemSymbolFontSize: this.itemSymbolFontSize, 940 itemSymbolFontColor: this.itemSymbolFontColor, 941 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 942 itemBorderRadius: this.itemBorderRadius, 943 itemMinHeight: this.itemMinHeight, 944 itemPadding: this.itemPadding, 945 itemShadow: this.itemShadow, 946 buttonBackgroundColor: this.buttonBackgroundColor, 947 buttonBackgroundBlurStyle: this.buttonBackgroundBlurStyle, 948 buttonBackgroundBlurStyleOptions: this.buttonBackgroundBlurStyleOptions, 949 buttonBackgroundEffect: this.buttonBackgroundEffect, 950 buttonBorderRadius: this.buttonBorderRadius, 951 buttonMinHeight: this.buttonMinHeight, 952 buttonPadding: this.buttonPadding, 953 languageDirection: this.languageDirection, 954 }); 955 } 956 }, 957 { name: 'SimpleSegmentButtonV2' } 958 ); 959 } 960 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 961 } 962 updateStateVars(params) { 963 if (params === undefined) { 964 return; 965 } 966 if ('items' in params) { 967 this.updateParam('items', params.items); 968 } 969 if ('selectedIndex' in params) { 970 this.updateParam('selectedIndex', params.selectedIndex); 971 } 972 if ('itemMinFontScale' in params) { 973 this.updateParam('itemMinFontScale', params.itemMinFontScale); 974 } 975 if ('itemMaxFontScale' in params) { 976 this.updateParam('itemMaxFontScale', params.itemMaxFontScale); 977 } 978 if ('itemSpace' in params) { 979 this.updateParam('itemSpace', params.itemSpace); 980 } 981 if ('itemFontColor' in params) { 982 this.updateParam('itemFontColor', params.itemFontColor); 983 } 984 if ('itemSelectedFontColor' in params) { 985 this.updateParam('itemSelectedFontColor', params.itemSelectedFontColor); 986 } 987 if ('itemFontSize' in params) { 988 this.updateParam('itemFontSize', params.itemFontSize); 989 } 990 if ('itemSelectedFontSize' in params) { 991 this.updateParam('itemSelectedFontSize', params.itemSelectedFontSize); 992 } 993 if ('itemFontWeight' in params) { 994 this.updateParam('itemFontWeight', params.itemFontWeight); 995 } 996 if ('itemSelectedFontWeight' in params) { 997 this.updateParam('itemSelectedFontWeight', params.itemSelectedFontWeight); 998 } 999 if ('itemBorderRadius' in params) { 1000 this.updateParam('itemBorderRadius', params.itemBorderRadius); 1001 } 1002 if ('itemSelectedBackgroundColor' in params) { 1003 this.updateParam('itemSelectedBackgroundColor', params.itemSelectedBackgroundColor); 1004 } 1005 if ('itemIconSize' in params) { 1006 this.updateParam('itemIconSize', params.itemIconSize); 1007 } 1008 if ('itemIconFillColor' in params) { 1009 this.updateParam('itemIconFillColor', params.itemIconFillColor); 1010 } 1011 if ('itemSelectedIconFillColor' in params) { 1012 this.updateParam('itemSelectedIconFillColor', params.itemSelectedIconFillColor); 1013 } 1014 if ('itemSymbolFontSize' in params) { 1015 this.updateParam('itemSymbolFontSize', params.itemSymbolFontSize); 1016 } 1017 if ('itemSymbolFontColor' in params) { 1018 this.updateParam('itemSymbolFontColor', params.itemSymbolFontColor); 1019 } 1020 if ('itemSelectedSymbolFontColor' in params) { 1021 this.updateParam('itemSelectedSymbolFontColor', params.itemSelectedSymbolFontColor); 1022 } 1023 if ('itemMinHeight' in params) { 1024 this.updateParam('itemMinHeight', params.itemMinHeight); 1025 } 1026 if ('itemPadding' in params) { 1027 this.updateParam('itemPadding', params.itemPadding); 1028 } 1029 if ('itemShadow' in params) { 1030 this.updateParam('itemShadow', params.itemShadow); 1031 } 1032 if ('buttonBackgroundColor' in params) { 1033 this.updateParam('buttonBackgroundColor', params.buttonBackgroundColor); 1034 } 1035 if ('buttonBackgroundBlurStyle' in params) { 1036 this.updateParam('buttonBackgroundBlurStyle', params.buttonBackgroundBlurStyle); 1037 } 1038 if ('buttonBackgroundBlurStyleOptions' in params) { 1039 this.updateParam('buttonBackgroundBlurStyleOptions', params.buttonBackgroundBlurStyleOptions); 1040 } 1041 if ('buttonBackgroundEffect' in params) { 1042 this.updateParam('buttonBackgroundEffect', params.buttonBackgroundEffect); 1043 } 1044 if ('buttonBorderRadius' in params) { 1045 this.updateParam('buttonBorderRadius', params.buttonBorderRadius); 1046 } 1047 if ('buttonMinHeight' in params) { 1048 this.updateParam('buttonMinHeight', params.buttonMinHeight); 1049 } 1050 if ('buttonPadding' in params) { 1051 this.updateParam('buttonPadding', params.buttonPadding); 1052 } 1053 if ('languageDirection' in params) { 1054 this.updateParam('languageDirection', params.languageDirection); 1055 } 1056 } 1057 rerender() { 1058 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1059 this.updateDirtyElements(); 1060 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1061 } 1062} 1063__decorate([Param], CapsuleSegmentButtonV2.prototype, 'items', void 0); 1064__decorate([Param], CapsuleSegmentButtonV2.prototype, 'selectedIndex', void 0); 1065__decorate([Event], CapsuleSegmentButtonV2.prototype, '$selectedIndex', void 0); 1066__decorate([Event], CapsuleSegmentButtonV2.prototype, 'onItemClicked', void 0); 1067__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemMinFontScale', void 0); 1068__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemMaxFontScale', void 0); 1069__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSpace', void 0); 1070__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemFontColor', void 0); 1071__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedFontColor', void 0); 1072__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemFontSize', void 0); 1073__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedFontSize', void 0); 1074__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemFontWeight', void 0); 1075__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedFontWeight', void 0); 1076__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemBorderRadius', void 0); 1077__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedBackgroundColor', void 0); 1078__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemIconSize', void 0); 1079__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemIconFillColor', void 0); 1080__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedIconFillColor', void 0); 1081__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSymbolFontSize', void 0); 1082__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSymbolFontColor', void 0); 1083__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemSelectedSymbolFontColor', void 0); 1084__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemMinHeight', void 0); 1085__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemPadding', void 0); 1086__decorate([Param], CapsuleSegmentButtonV2.prototype, 'itemShadow', void 0); 1087__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonBackgroundColor', void 0); 1088__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonBackgroundBlurStyle', void 0); 1089__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonBackgroundBlurStyleOptions', void 0); 1090__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonBackgroundEffect', void 0); 1091__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonBorderRadius', void 0); 1092__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonMinHeight', void 0); 1093__decorate([Param], CapsuleSegmentButtonV2.prototype, 'buttonPadding', void 0); 1094__decorate([Param], CapsuleSegmentButtonV2.prototype, 'languageDirection', void 0); 1095class SimpleSegmentButtonV2 extends ViewV2 { 1096 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) { 1097 super(parent, elmtId, extraInfo); 1098 this.ContentLayer = () => { 1099 const parent = 1100 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.length 1101 ? PUV2ViewBase.contextStack[PUV2ViewBase.contextStack.length - 1] 1102 : null; 1103 this.observeComponentCreation2((elmtId, isInitialRender) => { 1104 Flex.create({ 1105 alignItems: ItemAlign.Stretch, 1106 space: { main: this.getItemSpace() }, 1107 }); 1108 Flex.constraintSize({ 1109 minWidth: '100%', 1110 minHeight: this.getButtonMinHeight(), 1111 }); 1112 Flex.clip(false); 1113 Flex.direction(this.languageDirection); 1114 Flex.focusScopeId(this.focusGroupId, true); 1115 Flex.padding(this.getButtonPadding()); 1116 Gesture.create(GesturePriority.High); 1117 PanGesture.create(); 1118 PanGesture.onActionStart(event => { 1119 const finger = event.fingerList.find(Boolean); 1120 if (!finger) { 1121 return; 1122 } 1123 const index = this.getIndexByPosition(finger.globalX, finger.globalY); 1124 if (!this.isItemEnabled(index)) { 1125 return; 1126 } 1127 if (event.axisHorizontal !== 0 || event.axisVertical !== 0) { 1128 this.isMouseWheelScroll = true; 1129 return; 1130 } 1131 if (index === this.normalizedSelectedIndex) { 1132 this.isDragging = true; 1133 } 1134 this.panStartGlobalX = finger.globalX; 1135 this.panStartIndex = index; 1136 }); 1137 PanGesture.onActionUpdate(event => { 1138 if (!this.isDragging) { 1139 return; 1140 } 1141 const finger = event.fingerList.find(Boolean); 1142 if (!finger) { 1143 return; 1144 } 1145 const index = this.getIndexByPosition(finger.globalX, finger.globalY); 1146 this.updateSelectedIndex(index); 1147 }); 1148 PanGesture.onActionEnd(event => { 1149 if (!this.isItemEnabled(this.panStartIndex)) { 1150 return; 1151 } 1152 // handle mouse wheel scroll event 1153 if (this.isMouseWheelScroll) { 1154 const offset = event.offsetX !== 0 ? event.offsetX : event.offsetY; 1155 const deltaIndex = offset < 0 ? 1 : -1; 1156 this.updateSelectedIndex(this.normalizedSelectedIndex + deltaIndex); 1157 this.isMouseWheelScroll = false; 1158 return; 1159 } 1160 // handle drag event 1161 if (this.isDragging) { 1162 this.isDragging = false; 1163 return; 1164 } 1165 // handle swipe event 1166 if (!this.isItemEnabled(this.normalizedSelectedIndex)) { 1167 return; 1168 } 1169 const finger = event.fingerList.find(Boolean); 1170 if (!finger) { 1171 return; 1172 } 1173 let deltaIndex = finger.globalX - this.panStartGlobalX < 0 ? -1 : 1; 1174 if (this.isRTL()) { 1175 deltaIndex = -deltaIndex; 1176 } 1177 this.updateSelectedIndex(this.normalizedSelectedIndex + deltaIndex); 1178 }); 1179 PanGesture.onActionCancel(() => { 1180 this.isDragging = false; 1181 this.isMouseWheelScroll = false; 1182 this.panStartIndex = -1; 1183 }); 1184 PanGesture.pop(); 1185 Gesture.pop(); 1186 }, Flex); 1187 this.observeComponentCreation2((elmtId, isInitialRender) => { 1188 Repeat(this.getItems(), this) 1189 .each(repeatItem => { 1190 this.observeComponentCreation2((elmtId, isInitialRender) => { 1191 Button.createWithChild({ type: ButtonType.Normal }); 1192 Button.accessibilityGroup(true); 1193 Button.accessibilitySelected(this.isSelected(repeatItem)); 1194 Button.accessibilityText(this.getItemAccessibilityText(repeatItem)); 1195 Button.accessibilityDescription(this.getItemAccessibilityDescription(repeatItem)); 1196 Button.accessibilityLevel(repeatItem.item.accessibilityLevel); 1197 Button.backgroundColor(Color.Transparent); 1198 Button.borderRadius(this.getItemBorderRadius()); 1199 Button.direction(this.languageDirection); 1200 Button.enabled(repeatItem.item.enabled); 1201 Button.focusScopePriority(this.focusGroupId, this.getFocusPriority(repeatItem)); 1202 Button.hoverEffect(HoverEffect.None); 1203 Button.layoutWeight(1); 1204 Button.padding(0); 1205 Button.scale(this.getItemScale(repeatItem.index)); 1206 Button.stateEffect(false); 1207 Button.onAreaChange((_, area) => { 1208 this.itemRects[repeatItem.index] = { 1209 size: { 1210 width: area.width, 1211 height: area.height, 1212 }, 1213 position: { 1214 x: area.position.x, 1215 y: area.position.y, 1216 }, 1217 globalPosition: { 1218 x: area.globalPosition.x, 1219 y: area.globalPosition.y, 1220 }, 1221 }; 1222 }); 1223 Gesture.create(GesturePriority.Low); 1224 TapGesture.create(); 1225 TapGesture.onAction(() => { 1226 this.onItemClicked?.(repeatItem.index); 1227 this.updateSelectedIndex(repeatItem.index); 1228 }); 1229 TapGesture.pop(); 1230 Gesture.pop(); 1231 Button.onTouch(event => { 1232 if (event.type === TouchType.Down) { 1233 if (this.isSelected(repeatItem)) { 1234 this.updateItemScale(0.95); 1235 } 1236 this.updateTouchPressedItemIndex(repeatItem.index); 1237 } else if ([TouchType.Up, TouchType.Cancel].includes(event.type)) { 1238 this.updateItemScale(1); 1239 this.updateTouchPressedItemIndex(-1); 1240 } 1241 }); 1242 Button.onHover(isHover => { 1243 if (isHover) { 1244 this.updateHoveredItemIndex(repeatItem.index); 1245 } else { 1246 this.updateHoveredItemIndex(-1); 1247 } 1248 }); 1249 Button.onMouse(event => { 1250 if (event.action === MouseAction.Press) { 1251 this.updateMousePressedItemIndex(repeatItem.index); 1252 } else if ([MouseAction.Release, MouseAction.CANCEL].includes(event.action)) { 1253 this.updateMousePressedItemIndex(-1); 1254 } 1255 }); 1256 }, Button); 1257 { 1258 this.observeComponentCreation2( 1259 (elmtId, isInitialRender) => { 1260 if (isInitialRender) { 1261 let componentCall = new SegmentButtonV2ItemContent( 1262 parent ? parent : this, 1263 { 1264 theme: this.theme, 1265 item: repeatItem.item, 1266 selected: this.isSelected(repeatItem), 1267 itemMinFontScale: this.itemMinFontScale, 1268 itemMaxFontScale: this.itemMaxFontScale, 1269 itemFontColor: this.itemFontColor, 1270 itemSelectedFontColor: this.itemSelectedFontColor, 1271 itemFontSize: this.itemFontSize, 1272 itemSelectedFontSize: this.itemSelectedFontSize, 1273 itemFontWeight: this.itemFontWeight, 1274 itemSelectedFontWeight: this.itemSelectedFontWeight, 1275 itemIconSize: this.itemIconSize, 1276 itemIconFillColor: this.itemIconFillColor, 1277 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 1278 itemSymbolFontSize: this.itemSymbolFontSize, 1279 itemSymbolFontColor: this.itemSymbolFontColor, 1280 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 1281 itemMinHeight: this.itemMinHeight, 1282 itemPadding: this.itemPadding, 1283 languageDirection: this.languageDirection, 1284 hasHybrid: this.getItems().hasHybrid, 1285 }, 1286 undefined, 1287 elmtId, 1288 () => {}, 1289 { 1290 page: 'advancedComponents/src/main/ets/components/SegmentButtonV2.ets', 1291 line: 577, 1292 col: 13, 1293 } 1294 ); 1295 ViewV2.create(componentCall); 1296 let paramsLambda = () => { 1297 return { 1298 theme: this.theme, 1299 item: repeatItem.item, 1300 selected: this.isSelected(repeatItem), 1301 itemMinFontScale: this.itemMinFontScale, 1302 itemMaxFontScale: this.itemMaxFontScale, 1303 itemFontColor: this.itemFontColor, 1304 itemSelectedFontColor: this.itemSelectedFontColor, 1305 itemFontSize: this.itemFontSize, 1306 itemSelectedFontSize: this.itemSelectedFontSize, 1307 itemFontWeight: this.itemFontWeight, 1308 itemSelectedFontWeight: this.itemSelectedFontWeight, 1309 itemIconSize: this.itemIconSize, 1310 itemIconFillColor: this.itemIconFillColor, 1311 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 1312 itemSymbolFontSize: this.itemSymbolFontSize, 1313 itemSymbolFontColor: this.itemSymbolFontColor, 1314 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 1315 itemMinHeight: this.itemMinHeight, 1316 itemPadding: this.itemPadding, 1317 languageDirection: this.languageDirection, 1318 hasHybrid: this.getItems().hasHybrid, 1319 }; 1320 }; 1321 componentCall.paramsGenerator_ = paramsLambda; 1322 } else { 1323 this.updateStateVarsOfChildByElmtId(elmtId, { 1324 theme: this.theme, 1325 item: repeatItem.item, 1326 selected: this.isSelected(repeatItem), 1327 itemMinFontScale: this.itemMinFontScale, 1328 itemMaxFontScale: this.itemMaxFontScale, 1329 itemFontColor: this.itemFontColor, 1330 itemSelectedFontColor: this.itemSelectedFontColor, 1331 itemFontSize: this.itemFontSize, 1332 itemSelectedFontSize: this.itemSelectedFontSize, 1333 itemFontWeight: this.itemFontWeight, 1334 itemSelectedFontWeight: this.itemSelectedFontWeight, 1335 itemIconSize: this.itemIconSize, 1336 itemIconFillColor: this.itemIconFillColor, 1337 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 1338 itemSymbolFontSize: this.itemSymbolFontSize, 1339 itemSymbolFontColor: this.itemSymbolFontColor, 1340 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 1341 itemMinHeight: this.itemMinHeight, 1342 itemPadding: this.itemPadding, 1343 languageDirection: this.languageDirection, 1344 hasHybrid: this.getItems().hasHybrid, 1345 }); 1346 } 1347 }, 1348 { name: 'SegmentButtonV2ItemContent' } 1349 ); 1350 } 1351 Button.pop(); 1352 }) 1353 .key(generateUniqueKye(this.focusGroupId)) 1354 .render(isInitialRender); 1355 }, Repeat); 1356 Flex.pop(); 1357 }; 1358 this.BackplateLayer = () => { 1359 const parent = 1360 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.length 1361 ? PUV2ViewBase.contextStack[PUV2ViewBase.contextStack.length - 1] 1362 : null; 1363 this.observeComponentCreation2((elmtId, isInitialRender) => { 1364 If.create(); 1365 if (this.selectedItemRect) { 1366 this.ifElseBranchUpdateFunction(0, () => { 1367 this.observeComponentCreation2((elmtId, isInitialRender) => { 1368 Stack.create(); 1369 Stack.position({ 1370 x: this.selectedItemRect.position.x, 1371 y: this.selectedItemRect.position.y, 1372 }); 1373 Stack.backgroundColor(this.getItemSelectedBackgroundColor()); 1374 Stack.borderRadius(this.getItemBorderRadius()); 1375 Stack.scale({ x: this.itemScale, y: this.itemScale }); 1376 Stack.shadow(this.getItemBackplateShadow()); 1377 Stack.height(this.selectedItemRect.size.height); 1378 Stack.width(this.selectedItemRect.size.width); 1379 }, Stack); 1380 Stack.pop(); 1381 }); 1382 } else { 1383 this.ifElseBranchUpdateFunction(1, () => {}); 1384 } 1385 }, If); 1386 If.pop(); 1387 }; 1388 this.EffectLayer = () => { 1389 const parent = 1390 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.length 1391 ? PUV2ViewBase.contextStack[PUV2ViewBase.contextStack.length - 1] 1392 : null; 1393 this.observeComponentCreation2((elmtId, isInitialRender) => { 1394 Repeat(this.getItemRects(), this) 1395 .each(repeatItem => { 1396 this.observeComponentCreation2((elmtId, isInitialRender) => { 1397 Stack.create(); 1398 Stack.backgroundColor(this.getEffectBackgroundColor(repeatItem)); 1399 Stack.borderRadius(this.getItemBorderRadius()); 1400 Stack.height(repeatItem.item.size.height); 1401 Stack.position({ 1402 x: repeatItem.item.position.x, 1403 y: repeatItem.item.position.y, 1404 }); 1405 Stack.scale(this.getItemScale(repeatItem.index)); 1406 Stack.width(repeatItem.item.size.width); 1407 }, Stack); 1408 Stack.pop(); 1409 }) 1410 .render(isInitialRender); 1411 }, Repeat); 1412 }; 1413 this.initParam('items', params && 'items' in params ? params.items : undefined); 1414 this.initParam('selectedIndex', params && 'selectedIndex' in params ? params.selectedIndex : undefined); 1415 this.$selectedIndex = '$selectedIndex' in params ? params.$selectedIndex : () => {}; 1416 this.initParam('theme', params && 'theme' in params ? params.theme : undefined); 1417 this.onItemClicked = 'onItemClicked' in params ? params.onItemClicked : () => {}; 1418 this.initParam('itemMinFontScale', params && 'itemMinFontScale' in params ? params.itemMinFontScale : undefined); 1419 this.initParam('itemMaxFontScale', params && 'itemMaxFontScale' in params ? params.itemMaxFontScale : undefined); 1420 this.initParam('itemSpace', params && 'itemSpace' in params ? params.itemSpace : undefined); 1421 this.initParam('itemFontColor', params && 'itemFontColor' in params ? params.itemFontColor : undefined); 1422 this.initParam( 1423 'itemSelectedFontColor', 1424 params && 'itemSelectedFontColor' in params ? params.itemSelectedFontColor : undefined 1425 ); 1426 this.initParam('itemFontSize', params && 'itemFontSize' in params ? params.itemFontSize : undefined); 1427 this.initParam( 1428 'itemSelectedFontSize', 1429 params && 'itemSelectedFontSize' in params ? params.itemSelectedFontSize : undefined 1430 ); 1431 this.initParam('itemFontWeight', params && 'itemFontWeight' in params ? params.itemFontWeight : undefined); 1432 this.initParam( 1433 'itemSelectedFontWeight', 1434 params && 'itemSelectedFontWeight' in params ? params.itemSelectedFontWeight : undefined 1435 ); 1436 this.initParam('itemBorderRadius', params && 'itemBorderRadius' in params ? params.itemBorderRadius : undefined); 1437 this.initParam( 1438 'itemSelectedBackgroundColor', 1439 params && 'itemSelectedBackgroundColor' in params ? params.itemSelectedBackgroundColor : undefined 1440 ); 1441 this.initParam('itemIconSize', params && 'itemIconSize' in params ? params.itemIconSize : undefined); 1442 this.initParam('itemIconFillColor', params && 'itemIconFillColor' in params ? params.itemIconFillColor : undefined); 1443 this.initParam( 1444 'itemSelectedIconFillColor', 1445 params && 'itemSelectedIconFillColor' in params ? params.itemSelectedIconFillColor : undefined 1446 ); 1447 this.initParam( 1448 'itemSymbolFontSize', 1449 params && 'itemSymbolFontSize' in params ? params.itemSymbolFontSize : undefined 1450 ); 1451 this.initParam( 1452 'itemSymbolFontColor', 1453 params && 'itemSymbolFontColor' in params ? params.itemSymbolFontColor : undefined 1454 ); 1455 this.initParam( 1456 'itemSelectedSymbolFontColor', 1457 params && 'itemSelectedSymbolFontColor' in params ? params.itemSelectedSymbolFontColor : undefined 1458 ); 1459 this.initParam('itemMinHeight', params && 'itemMinHeight' in params ? params.itemMinHeight : undefined); 1460 this.initParam('itemPadding', params && 'itemPadding' in params ? params.itemPadding : undefined); 1461 this.initParam('itemShadow', params && 'itemShadow' in params ? params.itemShadow : undefined); 1462 this.initParam( 1463 'buttonBackgroundColor', 1464 params && 'buttonBackgroundColor' in params ? params.buttonBackgroundColor : undefined 1465 ); 1466 this.initParam( 1467 'buttonBackgroundBlurStyle', 1468 params && 'buttonBackgroundBlurStyle' in params ? params.buttonBackgroundBlurStyle : undefined 1469 ); 1470 this.initParam( 1471 'buttonBackgroundBlurStyleOptions', 1472 params && 'buttonBackgroundBlurStyleOptions' in params ? params.buttonBackgroundBlurStyleOptions : undefined 1473 ); 1474 this.initParam( 1475 'buttonBackgroundEffect', 1476 params && 'buttonBackgroundEffect' in params ? params.buttonBackgroundEffect : undefined 1477 ); 1478 this.initParam( 1479 'buttonBorderRadius', 1480 params && 'buttonBorderRadius' in params ? params.buttonBorderRadius : undefined 1481 ); 1482 this.initParam('buttonMinHeight', params && 'buttonMinHeight' in params ? params.buttonMinHeight : undefined); 1483 this.initParam('buttonPadding', params && 'buttonPadding' in params ? params.buttonPadding : undefined); 1484 this.initParam('languageDirection', params && 'languageDirection' in params ? params.languageDirection : undefined); 1485 this.itemRects = []; 1486 this.itemScale = 1; 1487 this.hoveredItemIndex = -1; 1488 this.mousePressedItemIndex = -1; 1489 this.touchPressedItemIndex = -1; 1490 this.isMouseWheelScroll = false; 1491 this.isDragging = false; 1492 this.panStartGlobalX = 0; 1493 this.panStartIndex = -1; 1494 this.focusGroupId = GroupIdGenerator.getInstance().generate(); 1495 this.finalizeConstruction(); 1496 } 1497 get normalizedSelectedIndex() { 1498 const items = this.getItems(); 1499 return normalize(this.selectedIndex, 0, items.length - 1); 1500 } 1501 get selectedItemRect() { 1502 return this.itemRects[this.normalizedSelectedIndex]; 1503 } 1504 getFocusPriority(repeatItem) { 1505 return this.normalizedSelectedIndex === repeatItem.index ? FocusPriority.PREVIOUS : FocusPriority.AUTO; 1506 } 1507 isItemEnabled(index) { 1508 const items = this.getItems(); 1509 if (index < 0 || index >= items.length) { 1510 return false; 1511 } 1512 return items[index].enabled; 1513 } 1514 getItemRects() { 1515 if (!this.items) { 1516 return []; 1517 } 1518 if (this.items.length === this.itemRects.length) { 1519 return this.itemRects; 1520 } 1521 return this.itemRects.slice(0, this.items.length); 1522 } 1523 initialRender() { 1524 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1525 this.observeComponentCreation2((elmtId, isInitialRender) => { 1526 Stack.create(); 1527 Stack.backgroundColor(this.getButtonBackgroundColor()); 1528 Stack.backgroundEffect(this.buttonBackgroundEffect, { 1529 disableSystemAdaptation: true, 1530 }); 1531 Stack.borderRadius(this.getButtonBorderRadius()); 1532 Stack.clip(false); 1533 Stack.constraintSize({ 1534 minWidth: '100%', 1535 minHeight: this.getButtonMinHeight(), 1536 }); 1537 Stack.direction(this.languageDirection); 1538 }, Stack); 1539 this.observeComponentCreation2((elmtId, isInitialRender) => { 1540 Stack.create(); 1541 Stack.borderRadius(this.getButtonBorderRadius()); 1542 Stack.backgroundBlurStyle(this.getButtonBackgroundBlurStyle(), this.getButtonBackgroundBlurStyleOptions(), { 1543 disableSystemAdaptation: true, 1544 }); 1545 Stack.clip(false); 1546 Stack.direction(this.languageDirection); 1547 }, Stack); 1548 this.EffectLayer.bind(this)(); 1549 this.BackplateLayer.bind(this)(); 1550 this.ContentLayer.bind(this)(); 1551 Stack.pop(); 1552 Stack.pop(); 1553 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1554 } 1555 getItems() { 1556 return this.items ?? EMPTY_ITEMS; 1557 } 1558 getItemBackplateShadow() { 1559 return this.itemShadow ?? this.theme.itemShadow; 1560 } 1561 getButtonBackgroundBlurStyle() { 1562 if (this.buttonBackgroundEffect) { 1563 return undefined; 1564 } 1565 return this.buttonBackgroundBlurStyle; 1566 } 1567 getButtonBackgroundBlurStyleOptions() { 1568 if (this.buttonBackgroundEffect) { 1569 return undefined; 1570 } 1571 return this.buttonBackgroundBlurStyleOptions; 1572 } 1573 getItemScale(index) { 1574 const pressed = this.isPressed(index); 1575 const scale = pressed ? 0.95 : 1; 1576 return { x: scale, y: scale }; 1577 } 1578 isPressed(index) { 1579 return this.mousePressedItemIndex === index; 1580 } 1581 updateHoveredItemIndex(index) { 1582 if (index === this.hoveredItemIndex) { 1583 return; 1584 } 1585 Context.animateTo({ duration: 250, curve: Curve.Friction }, () => { 1586 this.hoveredItemIndex = index; 1587 }); 1588 } 1589 updateMousePressedItemIndex(index) { 1590 if (index === this.mousePressedItemIndex) { 1591 return; 1592 } 1593 Context.animateTo({ duration: 250, curve: Curve.Friction }, () => { 1594 this.mousePressedItemIndex = index; 1595 }); 1596 } 1597 updateTouchPressedItemIndex(index) { 1598 if (index === this.touchPressedItemIndex) { 1599 return; 1600 } 1601 Context.animateTo({ duration: 250, curve: Curve.Friction }, () => { 1602 this.touchPressedItemIndex = index; 1603 }); 1604 } 1605 isRTL() { 1606 if (this.languageDirection || this.languageDirection === Direction.Auto) { 1607 return i18n.isRTL(i18n.System.getSystemLanguage()); 1608 } 1609 return this.languageDirection === Direction.Rtl; 1610 } 1611 getEffectBackgroundColor(repeatItem) { 1612 if (repeatItem.index === this.mousePressedItemIndex) { 1613 return { 1614 id: -1, 1615 type: 10001, 1616 params: ['sys.color.interactive_click'], 1617 bundleName: '__harDefaultBundleName__', 1618 moduleName: '__harDefaultModuleName__', 1619 }; 1620 } 1621 if (repeatItem.index === this.hoveredItemIndex) { 1622 return { 1623 id: -1, 1624 type: 10001, 1625 params: ['sys.color.interactive_hover'], 1626 bundleName: '__harDefaultBundleName__', 1627 moduleName: '__harDefaultModuleName__', 1628 }; 1629 } 1630 return Color.Transparent; 1631 } 1632 getItemBorderRadius() { 1633 if (this.itemBorderRadius && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemBorderRadius)) { 1634 return LengthMetricsUtils.getInstance().stringify(this.itemBorderRadius); 1635 } 1636 return this.theme.itemBorderRadius; 1637 } 1638 getItemSelectedBackgroundColor() { 1639 if (this.itemSelectedBackgroundColor) { 1640 return this.itemSelectedBackgroundColor.color; 1641 } 1642 return this.theme.itemSelectedBackgroundColor; 1643 } 1644 getItemSpace() { 1645 if ( 1646 this.itemSpace && 1647 this.itemSpace.unit !== LengthUnit.PERCENT && 1648 LengthMetricsUtils.getInstance().isNaturalNumber(this.itemSpace) 1649 ) { 1650 return this.itemSpace; 1651 } 1652 return this.theme.itemSpace; 1653 } 1654 getIndexByPosition(globalX, globalY) { 1655 let index = 0; 1656 while (index < this.itemRects.length) { 1657 const rect = this.itemRects[index]; 1658 if (this.isPointOnRect(globalX, globalY, rect)) { 1659 return index; 1660 } 1661 ++index; 1662 } 1663 return -1; 1664 } 1665 isPointOnRect(globalX, globalY, rect) { 1666 return ( 1667 globalX >= rect.globalPosition.x && 1668 globalX <= rect.globalPosition.x + rect.size.width && 1669 globalY >= rect.globalPosition.y && 1670 globalY <= rect.globalPosition.y + rect.size.height 1671 ); 1672 } 1673 updateSelectedIndex(selectedIndex) { 1674 if (!this.isItemEnabled(selectedIndex) || selectedIndex === this.selectedIndex) { 1675 return; 1676 } 1677 this.getUIContext().animateTo({ curve: curves.springMotion(0.347, 0.99) }, () => { 1678 this.$selectedIndex?.(selectedIndex); 1679 }); 1680 } 1681 updateItemScale(scale) { 1682 if (this.itemScale === scale) { 1683 return; 1684 } 1685 this.getUIContext().animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 1686 this.itemScale = scale; 1687 }); 1688 } 1689 getItemAccessibilityDescription(repeatItem) { 1690 return repeatItem.item.accessibilityDescription; 1691 } 1692 getItemAccessibilityText(repeatItem) { 1693 return repeatItem.item.accessibilityText; 1694 } 1695 isSelected(repeatItem) { 1696 return repeatItem.index === this.normalizedSelectedIndex; 1697 } 1698 getButtonPadding() { 1699 if (this.buttonPadding && LengthMetricsUtils.getInstance().isNaturalNumber(this.buttonPadding)) { 1700 return LengthMetricsUtils.getInstance().stringify(this.buttonPadding); 1701 } 1702 return this.theme.buttonPadding; 1703 } 1704 getButtonBorderRadius() { 1705 if (this.buttonBorderRadius && LengthMetricsUtils.getInstance().isNaturalNumber(this.buttonBorderRadius)) { 1706 return LengthMetricsUtils.getInstance().stringify(this.buttonBorderRadius); 1707 } 1708 return this.theme.buttonBorderRadius; 1709 } 1710 getButtonBackgroundColor() { 1711 if (this.buttonBackgroundColor) { 1712 return this.buttonBackgroundColor.color; 1713 } 1714 return this.theme.buttonBackgroundColor; 1715 } 1716 getButtonMinHeight() { 1717 if (this.buttonMinHeight && LengthMetricsUtils.getInstance().isNaturalNumber(this.buttonMinHeight)) { 1718 return LengthMetricsUtils.getInstance().stringify(this.buttonMinHeight); 1719 } 1720 const items = this.getItems(); 1721 return items.hasHybrid ? this.theme.hybridButtonMinHeight : this.theme.buttonMinHeight; 1722 } 1723 updateStateVars(params) { 1724 if (params === undefined) { 1725 return; 1726 } 1727 if ('items' in params) { 1728 this.updateParam('items', params.items); 1729 } 1730 if ('selectedIndex' in params) { 1731 this.updateParam('selectedIndex', params.selectedIndex); 1732 } 1733 if ('theme' in params) { 1734 this.updateParam('theme', params.theme); 1735 } 1736 if ('itemMinFontScale' in params) { 1737 this.updateParam('itemMinFontScale', params.itemMinFontScale); 1738 } 1739 if ('itemMaxFontScale' in params) { 1740 this.updateParam('itemMaxFontScale', params.itemMaxFontScale); 1741 } 1742 if ('itemSpace' in params) { 1743 this.updateParam('itemSpace', params.itemSpace); 1744 } 1745 if ('itemFontColor' in params) { 1746 this.updateParam('itemFontColor', params.itemFontColor); 1747 } 1748 if ('itemSelectedFontColor' in params) { 1749 this.updateParam('itemSelectedFontColor', params.itemSelectedFontColor); 1750 } 1751 if ('itemFontSize' in params) { 1752 this.updateParam('itemFontSize', params.itemFontSize); 1753 } 1754 if ('itemSelectedFontSize' in params) { 1755 this.updateParam('itemSelectedFontSize', params.itemSelectedFontSize); 1756 } 1757 if ('itemFontWeight' in params) { 1758 this.updateParam('itemFontWeight', params.itemFontWeight); 1759 } 1760 if ('itemSelectedFontWeight' in params) { 1761 this.updateParam('itemSelectedFontWeight', params.itemSelectedFontWeight); 1762 } 1763 if ('itemBorderRadius' in params) { 1764 this.updateParam('itemBorderRadius', params.itemBorderRadius); 1765 } 1766 if ('itemSelectedBackgroundColor' in params) { 1767 this.updateParam('itemSelectedBackgroundColor', params.itemSelectedBackgroundColor); 1768 } 1769 if ('itemIconSize' in params) { 1770 this.updateParam('itemIconSize', params.itemIconSize); 1771 } 1772 if ('itemIconFillColor' in params) { 1773 this.updateParam('itemIconFillColor', params.itemIconFillColor); 1774 } 1775 if ('itemSelectedIconFillColor' in params) { 1776 this.updateParam('itemSelectedIconFillColor', params.itemSelectedIconFillColor); 1777 } 1778 if ('itemSymbolFontSize' in params) { 1779 this.updateParam('itemSymbolFontSize', params.itemSymbolFontSize); 1780 } 1781 if ('itemSymbolFontColor' in params) { 1782 this.updateParam('itemSymbolFontColor', params.itemSymbolFontColor); 1783 } 1784 if ('itemSelectedSymbolFontColor' in params) { 1785 this.updateParam('itemSelectedSymbolFontColor', params.itemSelectedSymbolFontColor); 1786 } 1787 if ('itemMinHeight' in params) { 1788 this.updateParam('itemMinHeight', params.itemMinHeight); 1789 } 1790 if ('itemPadding' in params) { 1791 this.updateParam('itemPadding', params.itemPadding); 1792 } 1793 if ('itemShadow' in params) { 1794 this.updateParam('itemShadow', params.itemShadow); 1795 } 1796 if ('buttonBackgroundColor' in params) { 1797 this.updateParam('buttonBackgroundColor', params.buttonBackgroundColor); 1798 } 1799 if ('buttonBackgroundBlurStyle' in params) { 1800 this.updateParam('buttonBackgroundBlurStyle', params.buttonBackgroundBlurStyle); 1801 } 1802 if ('buttonBackgroundBlurStyleOptions' in params) { 1803 this.updateParam('buttonBackgroundBlurStyleOptions', params.buttonBackgroundBlurStyleOptions); 1804 } 1805 if ('buttonBackgroundEffect' in params) { 1806 this.updateParam('buttonBackgroundEffect', params.buttonBackgroundEffect); 1807 } 1808 if ('buttonBorderRadius' in params) { 1809 this.updateParam('buttonBorderRadius', params.buttonBorderRadius); 1810 } 1811 if ('buttonMinHeight' in params) { 1812 this.updateParam('buttonMinHeight', params.buttonMinHeight); 1813 } 1814 if ('buttonPadding' in params) { 1815 this.updateParam('buttonPadding', params.buttonPadding); 1816 } 1817 if ('languageDirection' in params) { 1818 this.updateParam('languageDirection', params.languageDirection); 1819 } 1820 } 1821 rerender() { 1822 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 1823 this.updateDirtyElements(); 1824 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 1825 } 1826} 1827__decorate([Param], SimpleSegmentButtonV2.prototype, 'items', void 0); 1828__decorate([Param], SimpleSegmentButtonV2.prototype, 'selectedIndex', void 0); 1829__decorate([Event], SimpleSegmentButtonV2.prototype, '$selectedIndex', void 0); 1830__decorate([Param], SimpleSegmentButtonV2.prototype, 'theme', void 0); 1831__decorate([Event], SimpleSegmentButtonV2.prototype, 'onItemClicked', void 0); 1832__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemMinFontScale', void 0); 1833__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemMaxFontScale', void 0); 1834__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSpace', void 0); 1835__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemFontColor', void 0); 1836__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedFontColor', void 0); 1837__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemFontSize', void 0); 1838__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedFontSize', void 0); 1839__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemFontWeight', void 0); 1840__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedFontWeight', void 0); 1841__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemBorderRadius', void 0); 1842__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedBackgroundColor', void 0); 1843__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemIconSize', void 0); 1844__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemIconFillColor', void 0); 1845__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedIconFillColor', void 0); 1846__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSymbolFontSize', void 0); 1847__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSymbolFontColor', void 0); 1848__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemSelectedSymbolFontColor', void 0); 1849__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemMinHeight', void 0); 1850__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemPadding', void 0); 1851__decorate([Param], SimpleSegmentButtonV2.prototype, 'itemShadow', void 0); 1852__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonBackgroundColor', void 0); 1853__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonBackgroundBlurStyle', void 0); 1854__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonBackgroundBlurStyleOptions', void 0); 1855__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonBackgroundEffect', void 0); 1856__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonBorderRadius', void 0); 1857__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonMinHeight', void 0); 1858__decorate([Param], SimpleSegmentButtonV2.prototype, 'buttonPadding', void 0); 1859__decorate([Param], SimpleSegmentButtonV2.prototype, 'languageDirection', void 0); 1860__decorate([Local], SimpleSegmentButtonV2.prototype, 'itemRects', void 0); 1861__decorate([Local], SimpleSegmentButtonV2.prototype, 'itemScale', void 0); 1862__decorate([Local], SimpleSegmentButtonV2.prototype, 'hoveredItemIndex', void 0); 1863__decorate([Local], SimpleSegmentButtonV2.prototype, 'mousePressedItemIndex', void 0); 1864__decorate([Local], SimpleSegmentButtonV2.prototype, 'touchPressedItemIndex', void 0); 1865__decorate([Computed], SimpleSegmentButtonV2.prototype, 'normalizedSelectedIndex', null); 1866__decorate([Computed], SimpleSegmentButtonV2.prototype, 'selectedItemRect', null); 1867const multiplyCapsuleTheme = { 1868 itemBorderRadius: { 1869 id: -1, 1870 type: 10002, 1871 params: ['sys.float.segment_button_v2_multi_corner_radius'], 1872 bundleName: '__harDefaultBundleName__', 1873 moduleName: '__harDefaultModuleName__', 1874 }, 1875 itemBackgroundColor: { 1876 id: -1, 1877 type: 10001, 1878 params: ['sys.color.segment_button_v2_multi_capsule_button_background'], 1879 bundleName: '__harDefaultBundleName__', 1880 moduleName: '__harDefaultModuleName__', 1881 }, 1882 itemSelectedBackgroundColor: { 1883 id: -1, 1884 type: 10001, 1885 params: ['sys.color.comp_background_emphasize'], 1886 bundleName: '__harDefaultBundleName__', 1887 moduleName: '__harDefaultModuleName__', 1888 }, 1889 itemSpace: LengthMetrics.vp(1), 1890 itemFontColor: { 1891 id: -1, 1892 type: 10001, 1893 params: ['sys.color.font_secondary'], 1894 bundleName: '__harDefaultBundleName__', 1895 moduleName: '__harDefaultModuleName__', 1896 }, 1897 itemSelectedFontColor: { 1898 id: -1, 1899 type: 10001, 1900 params: ['sys.color.font_on_primary'], 1901 bundleName: '__harDefaultBundleName__', 1902 moduleName: '__harDefaultModuleName__', 1903 }, 1904 itemFontWeight: FontWeight.Medium, 1905 itemSelectedFontWeight: FontWeight.Medium, 1906 itemIconFillColor: { 1907 id: -1, 1908 type: 10001, 1909 params: ['sys.color.icon_secondary'], 1910 bundleName: '__harDefaultBundleName__', 1911 moduleName: '__harDefaultModuleName__', 1912 }, 1913 itemSelectedIconFillColor: { 1914 id: -1, 1915 type: 10001, 1916 params: ['sys.color.font_on_primary'], 1917 bundleName: '__harDefaultBundleName__', 1918 moduleName: '__harDefaultModuleName__', 1919 }, 1920 itemSymbolFontColor: { 1921 id: -1, 1922 type: 10001, 1923 params: ['sys.color.font_secondary'], 1924 bundleName: '__harDefaultBundleName__', 1925 moduleName: '__harDefaultModuleName__', 1926 }, 1927 itemSelectedSymbolFontColor: { 1928 id: -1, 1929 type: 10001, 1930 params: ['sys.color.font_on_primary'], 1931 bundleName: '__harDefaultBundleName__', 1932 moduleName: '__harDefaultModuleName__', 1933 }, 1934 itemFontSize: { 1935 id: -1, 1936 type: 10002, 1937 params: ['sys.float.ohos_id_text_size_button2'], 1938 bundleName: '__harDefaultBundleName__', 1939 moduleName: '__harDefaultModuleName__', 1940 }, 1941 itemIconSize: 24, 1942 itemSymbolFontSize: 20, 1943 itemPadding: { 1944 top: LengthMetrics.resource({ 1945 id: -1, 1946 type: 10002, 1947 params: ['sys.float.padding_level2'], 1948 bundleName: '__harDefaultBundleName__', 1949 moduleName: '__harDefaultModuleName__', 1950 }), 1951 bottom: LengthMetrics.resource({ 1952 id: -1, 1953 type: 10002, 1954 params: ['sys.float.padding_level2'], 1955 bundleName: '__harDefaultBundleName__', 1956 moduleName: '__harDefaultModuleName__', 1957 }), 1958 start: LengthMetrics.resource({ 1959 id: -1, 1960 type: 10002, 1961 params: ['sys.float.padding_level4'], 1962 bundleName: '__harDefaultBundleName__', 1963 moduleName: '__harDefaultModuleName__', 1964 }), 1965 end: LengthMetrics.resource({ 1966 id: -1, 1967 type: 10002, 1968 params: ['sys.float.padding_level4'], 1969 bundleName: '__harDefaultBundleName__', 1970 moduleName: '__harDefaultModuleName__', 1971 }), 1972 }, 1973 itemMinHeight: { 1974 id: -1, 1975 type: 10002, 1976 params: ['sys.float.segment_button_v2_multi_singleline_height'], 1977 bundleName: '__harDefaultBundleName__', 1978 moduleName: '__harDefaultModuleName__', 1979 }, 1980 hybridItemMinHeight: { 1981 id: -1, 1982 type: 10002, 1983 params: ['sys.float.segment_button_v2_multi_doubleline_height'], 1984 bundleName: '__harDefaultBundleName__', 1985 moduleName: '__harDefaultModuleName__', 1986 }, 1987 itemMaxFontScale: SMALLEST_MAX_FONT_SCALE, 1988 itemMaxFontScaleSmallest: SMALLEST_MAX_FONT_SCALE, 1989 itemMaxFontScaleLargest: LARGEST_MAX_FONT_SCALE, 1990 itemMinFontScale: SMALLEST_MIN_FONT_SCALE, 1991 itemMinFontScaleSmallest: SMALLEST_MIN_FONT_SCALE, 1992 itemMinFontScaleLargest: LARGEST_MIN_FONT_SCALE, 1993}; 1994export class MultiCapsuleSegmentButtonV2 extends ViewV2 { 1995 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) { 1996 super(parent, elmtId, extraInfo); 1997 this.initParam('items', params && 'items' in params ? params.items : undefined); 1998 this.initParam('selectedIndexes', params && 'selectedIndexes' in params ? params.selectedIndexes : undefined); 1999 this.$selectedIndexes = '$selectedIndexes' in params ? params.$selectedIndexes : () => {}; 2000 this.onItemClicked = 'onItemClicked' in params ? params.onItemClicked : () => {}; 2001 this.initParam('itemMinFontScale', params && 'itemMinFontScale' in params ? params.itemMinFontScale : undefined); 2002 this.initParam('itemMaxFontScale', params && 'itemMaxFontScale' in params ? params.itemMaxFontScale : undefined); 2003 this.initParam('itemSpace', params && 'itemSpace' in params ? params.itemSpace : undefined); 2004 this.initParam('itemFontColor', params && 'itemFontColor' in params ? params.itemFontColor : undefined); 2005 this.initParam( 2006 'itemSelectedFontColor', 2007 params && 'itemSelectedFontColor' in params ? params.itemSelectedFontColor : undefined 2008 ); 2009 this.initParam('itemFontSize', params && 'itemFontSize' in params ? params.itemFontSize : undefined); 2010 this.initParam( 2011 'itemSelectedFontSize', 2012 params && 'itemSelectedFontSize' in params ? params.itemSelectedFontSize : undefined 2013 ); 2014 this.initParam('itemFontWeight', params && 'itemFontWeight' in params ? params.itemFontWeight : undefined); 2015 this.initParam( 2016 'itemSelectedFontWeight', 2017 params && 'itemSelectedFontWeight' in params ? params.itemSelectedFontWeight : undefined 2018 ); 2019 this.initParam('itemBorderRadius', params && 'itemBorderRadius' in params ? params.itemBorderRadius : undefined); 2020 this.initParam( 2021 'itemBackgroundColor', 2022 params && 'itemBackgroundColor' in params ? params.itemBackgroundColor : undefined 2023 ); 2024 this.initParam( 2025 'itemBackgroundEffect', 2026 params && 'itemBackgroundEffect' in params ? params.itemBackgroundEffect : undefined 2027 ); 2028 this.initParam( 2029 'itemBackgroundBlurStyle', 2030 params && 'itemBackgroundBlurStyle' in params ? params.itemBackgroundBlurStyle : undefined 2031 ); 2032 this.initParam( 2033 'itemBackgroundBlurStyleOptions', 2034 params && 'itemBackgroundBlurStyleOptions' in params ? params.itemBackgroundBlurStyleOptions : undefined 2035 ); 2036 this.initParam( 2037 'itemSelectedBackgroundColor', 2038 params && 'itemSelectedBackgroundColor' in params ? params.itemSelectedBackgroundColor : undefined 2039 ); 2040 this.initParam('itemIconSize', params && 'itemIconSize' in params ? params.itemIconSize : undefined); 2041 this.initParam('itemIconFillColor', params && 'itemIconFillColor' in params ? params.itemIconFillColor : undefined); 2042 this.initParam( 2043 'itemSelectedIconFillColor', 2044 params && 'itemSelectedIconFillColor' in params ? params.itemSelectedIconFillColor : undefined 2045 ); 2046 this.initParam( 2047 'itemSymbolFontSize', 2048 params && 'itemSymbolFontSize' in params ? params.itemSymbolFontSize : undefined 2049 ); 2050 this.initParam( 2051 'itemSymbolFontColor', 2052 params && 'itemSymbolFontColor' in params ? params.itemSymbolFontColor : undefined 2053 ); 2054 this.initParam( 2055 'itemSelectedSymbolFontColor', 2056 params && 'itemSelectedSymbolFontColor' in params ? params.itemSelectedSymbolFontColor : undefined 2057 ); 2058 this.initParam('itemMinHeight', params && 'itemMinHeight' in params ? params.itemMinHeight : undefined); 2059 this.initParam('itemPadding', params && 'itemPadding' in params ? params.itemPadding : undefined); 2060 this.initParam('languageDirection', params && 'languageDirection' in params ? params.languageDirection : undefined); 2061 this.theme = multiplyCapsuleTheme; 2062 this.focusGroupId = GroupIdGenerator.getInstance().generate(); 2063 this.finalizeConstruction(); 2064 } 2065 initialRender() { 2066 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 2067 this.observeComponentCreation2((elmtId, isInitialRender) => { 2068 Flex.create({ 2069 alignItems: ItemAlign.Stretch, 2070 space: { main: this.getItemSpace() }, 2071 }); 2072 Flex.clip(false); 2073 Flex.direction(this.languageDirection); 2074 Flex.focusScopeId(this.focusGroupId, true); 2075 }, Flex); 2076 this.observeComponentCreation2((elmtId, isInitialRender) => { 2077 Repeat(this.getItems(), this) 2078 .each(repeatItem => { 2079 this.observeComponentCreation2((elmtId, isInitialRender) => { 2080 Button.createWithChild({ type: ButtonType.Normal }); 2081 Button.accessibilityGroup(true); 2082 Button.accessibilityChecked(this.isSelected(repeatItem)); 2083 Button.accessibilityText(this.getItemAccessibilityText(repeatItem)); 2084 Button.accessibilityDescription(this.getItemAccessibilityDescription(repeatItem)); 2085 Button.accessibilityLevel(repeatItem.item.accessibilityLevel); 2086 Button.backgroundColor(this.getItemBackgroundColor(repeatItem)); 2087 Button.backgroundEffect(this.itemBackgroundEffect, { 2088 disableSystemAdaptation: true, 2089 }); 2090 Button.borderRadius(this.getItemButtonBorderRadius(repeatItem)); 2091 Button.constraintSize({ minHeight: this.getItemMinHeight() }); 2092 Button.direction(this.languageDirection); 2093 Button.enabled(repeatItem.item.enabled); 2094 Button.focusScopePriority(this.focusGroupId, this.getFocusPriority(repeatItem)); 2095 Button.layoutWeight(1); 2096 Button.padding(0); 2097 Button.onClick(() => { 2098 this.onItemClicked?.(repeatItem.index); 2099 let selection; 2100 const items = this.getItems(); 2101 const selectedIndexes = this.selectedIndexes ?? []; 2102 if (this.isSelected(repeatItem)) { 2103 selection = selectedIndexes.filter(index => { 2104 if (index < 0 || index > items.length - 1) { 2105 return false; 2106 } 2107 return index !== repeatItem.index; 2108 }); 2109 } else { 2110 selection = selectedIndexes 2111 .filter(index => index >= 0 && index <= items.length - 1) 2112 .concat(repeatItem.index); 2113 } 2114 this.$selectedIndexes(selection); 2115 }); 2116 }, Button); 2117 this.observeComponentCreation2((elmtId, isInitialRender) => { 2118 __Common__.create(); 2119 __Common__.borderRadius(this.getItemButtonBorderRadius(repeatItem)); 2120 __Common__.backgroundBlurStyle( 2121 this.getItemBackgroundBlurStyle(), 2122 this.getItemBackgroundBlurStyleOptions(), 2123 { disableSystemAdaptation: true } 2124 ); 2125 __Common__.direction(this.languageDirection); 2126 }, __Common__); 2127 { 2128 this.observeComponentCreation2( 2129 (elmtId, isInitialRender) => { 2130 if (isInitialRender) { 2131 let componentCall = new SegmentButtonV2ItemContent( 2132 this, 2133 { 2134 theme: this.theme, 2135 item: repeatItem.item, 2136 selected: this.isSelected(repeatItem), 2137 hasHybrid: this.getItems().hasHybrid, 2138 itemMinFontScale: this.itemMinFontScale, 2139 itemMaxFontScale: this.itemMaxFontScale, 2140 itemFontColor: this.itemFontColor, 2141 itemSelectedFontColor: this.itemSelectedFontColor, 2142 itemFontSize: this.itemFontSize, 2143 itemSelectedFontSize: this.itemSelectedFontSize, 2144 itemFontWeight: this.itemFontWeight, 2145 itemSelectedFontWeight: this.itemSelectedFontWeight, 2146 itemIconSize: this.itemIconSize, 2147 itemIconFillColor: this.itemIconFillColor, 2148 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 2149 itemSymbolFontSize: this.itemSymbolFontSize, 2150 itemSymbolFontColor: this.itemSymbolFontColor, 2151 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 2152 itemMinHeight: this.itemMinHeight, 2153 itemPadding: this.itemPadding, 2154 languageDirection: this.languageDirection, 2155 }, 2156 undefined, 2157 elmtId, 2158 () => {}, 2159 { 2160 page: 'advancedComponents/src/main/ets/components/SegmentButtonV2.ets', 2161 line: 1109, 2162 col: 13, 2163 } 2164 ); 2165 ViewV2.create(componentCall); 2166 let paramsLambda = () => { 2167 return { 2168 theme: this.theme, 2169 item: repeatItem.item, 2170 selected: this.isSelected(repeatItem), 2171 hasHybrid: this.getItems().hasHybrid, 2172 itemMinFontScale: this.itemMinFontScale, 2173 itemMaxFontScale: this.itemMaxFontScale, 2174 itemFontColor: this.itemFontColor, 2175 itemSelectedFontColor: this.itemSelectedFontColor, 2176 itemFontSize: this.itemFontSize, 2177 itemSelectedFontSize: this.itemSelectedFontSize, 2178 itemFontWeight: this.itemFontWeight, 2179 itemSelectedFontWeight: this.itemSelectedFontWeight, 2180 itemIconSize: this.itemIconSize, 2181 itemIconFillColor: this.itemIconFillColor, 2182 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 2183 itemSymbolFontSize: this.itemSymbolFontSize, 2184 itemSymbolFontColor: this.itemSymbolFontColor, 2185 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 2186 itemMinHeight: this.itemMinHeight, 2187 itemPadding: this.itemPadding, 2188 languageDirection: this.languageDirection, 2189 }; 2190 }; 2191 componentCall.paramsGenerator_ = paramsLambda; 2192 } else { 2193 this.updateStateVarsOfChildByElmtId(elmtId, { 2194 theme: this.theme, 2195 item: repeatItem.item, 2196 selected: this.isSelected(repeatItem), 2197 hasHybrid: this.getItems().hasHybrid, 2198 itemMinFontScale: this.itemMinFontScale, 2199 itemMaxFontScale: this.itemMaxFontScale, 2200 itemFontColor: this.itemFontColor, 2201 itemSelectedFontColor: this.itemSelectedFontColor, 2202 itemFontSize: this.itemFontSize, 2203 itemSelectedFontSize: this.itemSelectedFontSize, 2204 itemFontWeight: this.itemFontWeight, 2205 itemSelectedFontWeight: this.itemSelectedFontWeight, 2206 itemIconSize: this.itemIconSize, 2207 itemIconFillColor: this.itemIconFillColor, 2208 itemSelectedIconFillColor: this.itemSelectedIconFillColor, 2209 itemSymbolFontSize: this.itemSymbolFontSize, 2210 itemSymbolFontColor: this.itemSymbolFontColor, 2211 itemSelectedSymbolFontColor: this.itemSelectedSymbolFontColor, 2212 itemMinHeight: this.itemMinHeight, 2213 itemPadding: this.itemPadding, 2214 languageDirection: this.languageDirection, 2215 }); 2216 } 2217 }, 2218 { name: 'SegmentButtonV2ItemContent' } 2219 ); 2220 } 2221 __Common__.pop(); 2222 Button.pop(); 2223 }) 2224 .key(generateUniqueKye(this.focusGroupId)) 2225 .render(isInitialRender); 2226 }, Repeat); 2227 Flex.pop(); 2228 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 2229 } 2230 getFocusPriority(repeatItem) { 2231 return Math.min(...this.selectedIndexes) === repeatItem.index ? FocusPriority.PREVIOUS : FocusPriority.AUTO; 2232 } 2233 getItems() { 2234 return this.items ?? EMPTY_ITEMS; 2235 } 2236 getItemBackgroundBlurStyleOptions() { 2237 if (this.itemBackgroundEffect) { 2238 return undefined; 2239 } 2240 return this.itemBackgroundBlurStyleOptions; 2241 } 2242 getItemBackgroundBlurStyle() { 2243 if (this.itemBackgroundEffect) { 2244 return undefined; 2245 } 2246 return this.itemBackgroundBlurStyle; 2247 } 2248 getItemAccessibilityDescription(repeatItem) { 2249 return repeatItem.item.accessibilityDescription; 2250 } 2251 getItemAccessibilityText(repeatItem) { 2252 return repeatItem.item.accessibilityText; 2253 } 2254 getItemSpace() { 2255 if ( 2256 this.itemSpace && 2257 this.itemSpace.unit !== LengthUnit.PERCENT && 2258 LengthMetricsUtils.getInstance().isNaturalNumber(this.itemSpace) 2259 ) { 2260 return this.itemSpace; 2261 } 2262 return this.theme.itemSpace; 2263 } 2264 getItemMinHeight() { 2265 if (this.itemMinHeight && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemMinHeight)) { 2266 return LengthMetricsUtils.getInstance().stringify(this.itemMinHeight); 2267 } 2268 return this.theme.itemMinHeight; 2269 } 2270 getItemBackgroundColor(repeatItem) { 2271 if (this.isSelected(repeatItem)) { 2272 return this.itemSelectedBackgroundColor?.color ?? this.theme.itemSelectedBackgroundColor; 2273 } 2274 return this.itemBackgroundColor?.color ?? this.theme.itemBackgroundColor; 2275 } 2276 isSelected(repeatItem) { 2277 const selectedIndexes = this.selectedIndexes ?? []; 2278 return selectedIndexes.includes(repeatItem.index); 2279 } 2280 getItemButtonBorderRadius(repeatItem) { 2281 const items = this.getItems(); 2282 const noneBorderRadius = LengthMetrics.vp(0); 2283 const borderRadiuses = { 2284 topStart: noneBorderRadius, 2285 bottomStart: noneBorderRadius, 2286 topEnd: noneBorderRadius, 2287 bottomEnd: noneBorderRadius, 2288 }; 2289 if (repeatItem.index === 0) { 2290 const borderRadius = this.itemBorderRadius ?? LengthMetrics.resource(this.theme.itemBorderRadius); 2291 borderRadiuses.topStart = borderRadius; 2292 borderRadiuses.bottomStart = borderRadius; 2293 } 2294 if (repeatItem.index === items.length - 1) { 2295 const borderRadius = this.itemBorderRadius ?? LengthMetrics.resource(this.theme.itemBorderRadius); 2296 borderRadiuses.topEnd = borderRadius; 2297 borderRadiuses.bottomEnd = borderRadius; 2298 } 2299 return borderRadiuses; 2300 } 2301 updateStateVars(params) { 2302 if (params === undefined) { 2303 return; 2304 } 2305 if ('items' in params) { 2306 this.updateParam('items', params.items); 2307 } 2308 if ('selectedIndexes' in params) { 2309 this.updateParam('selectedIndexes', params.selectedIndexes); 2310 } 2311 if ('itemMinFontScale' in params) { 2312 this.updateParam('itemMinFontScale', params.itemMinFontScale); 2313 } 2314 if ('itemMaxFontScale' in params) { 2315 this.updateParam('itemMaxFontScale', params.itemMaxFontScale); 2316 } 2317 if ('itemSpace' in params) { 2318 this.updateParam('itemSpace', params.itemSpace); 2319 } 2320 if ('itemFontColor' in params) { 2321 this.updateParam('itemFontColor', params.itemFontColor); 2322 } 2323 if ('itemSelectedFontColor' in params) { 2324 this.updateParam('itemSelectedFontColor', params.itemSelectedFontColor); 2325 } 2326 if ('itemFontSize' in params) { 2327 this.updateParam('itemFontSize', params.itemFontSize); 2328 } 2329 if ('itemSelectedFontSize' in params) { 2330 this.updateParam('itemSelectedFontSize', params.itemSelectedFontSize); 2331 } 2332 if ('itemFontWeight' in params) { 2333 this.updateParam('itemFontWeight', params.itemFontWeight); 2334 } 2335 if ('itemSelectedFontWeight' in params) { 2336 this.updateParam('itemSelectedFontWeight', params.itemSelectedFontWeight); 2337 } 2338 if ('itemBorderRadius' in params) { 2339 this.updateParam('itemBorderRadius', params.itemBorderRadius); 2340 } 2341 if ('itemBackgroundColor' in params) { 2342 this.updateParam('itemBackgroundColor', params.itemBackgroundColor); 2343 } 2344 if ('itemBackgroundEffect' in params) { 2345 this.updateParam('itemBackgroundEffect', params.itemBackgroundEffect); 2346 } 2347 if ('itemBackgroundBlurStyle' in params) { 2348 this.updateParam('itemBackgroundBlurStyle', params.itemBackgroundBlurStyle); 2349 } 2350 if ('itemBackgroundBlurStyleOptions' in params) { 2351 this.updateParam('itemBackgroundBlurStyleOptions', params.itemBackgroundBlurStyleOptions); 2352 } 2353 if ('itemSelectedBackgroundColor' in params) { 2354 this.updateParam('itemSelectedBackgroundColor', params.itemSelectedBackgroundColor); 2355 } 2356 if ('itemIconSize' in params) { 2357 this.updateParam('itemIconSize', params.itemIconSize); 2358 } 2359 if ('itemIconFillColor' in params) { 2360 this.updateParam('itemIconFillColor', params.itemIconFillColor); 2361 } 2362 if ('itemSelectedIconFillColor' in params) { 2363 this.updateParam('itemSelectedIconFillColor', params.itemSelectedIconFillColor); 2364 } 2365 if ('itemSymbolFontSize' in params) { 2366 this.updateParam('itemSymbolFontSize', params.itemSymbolFontSize); 2367 } 2368 if ('itemSymbolFontColor' in params) { 2369 this.updateParam('itemSymbolFontColor', params.itemSymbolFontColor); 2370 } 2371 if ('itemSelectedSymbolFontColor' in params) { 2372 this.updateParam('itemSelectedSymbolFontColor', params.itemSelectedSymbolFontColor); 2373 } 2374 if ('itemMinHeight' in params) { 2375 this.updateParam('itemMinHeight', params.itemMinHeight); 2376 } 2377 if ('itemPadding' in params) { 2378 this.updateParam('itemPadding', params.itemPadding); 2379 } 2380 if ('languageDirection' in params) { 2381 this.updateParam('languageDirection', params.languageDirection); 2382 } 2383 } 2384 rerender() { 2385 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 2386 this.updateDirtyElements(); 2387 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 2388 } 2389} 2390__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'items', void 0); 2391__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'selectedIndexes', void 0); 2392__decorate([Event], MultiCapsuleSegmentButtonV2.prototype, '$selectedIndexes', void 0); 2393__decorate([Event], MultiCapsuleSegmentButtonV2.prototype, 'onItemClicked', void 0); 2394__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemMinFontScale', void 0); 2395__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemMaxFontScale', void 0); 2396__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSpace', void 0); 2397__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemFontColor', void 0); 2398__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedFontColor', void 0); 2399__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemFontSize', void 0); 2400__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedFontSize', void 0); 2401__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemFontWeight', void 0); 2402__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedFontWeight', void 0); 2403__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemBorderRadius', void 0); 2404__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemBackgroundColor', void 0); 2405__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemBackgroundEffect', void 0); 2406__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemBackgroundBlurStyle', void 0); 2407__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemBackgroundBlurStyleOptions', void 0); 2408__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedBackgroundColor', void 0); 2409__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemIconSize', void 0); 2410__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemIconFillColor', void 0); 2411__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedIconFillColor', void 0); 2412__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSymbolFontSize', void 0); 2413__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSymbolFontColor', void 0); 2414__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemSelectedSymbolFontColor', void 0); 2415__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemMinHeight', void 0); 2416__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'itemPadding', void 0); 2417__decorate([Param], MultiCapsuleSegmentButtonV2.prototype, 'languageDirection', void 0); 2418class SegmentButtonV2ItemContent extends ViewV2 { 2419 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) { 2420 super(parent, elmtId, extraInfo); 2421 this.initParam('hasHybrid', params && 'hasHybrid' in params ? params.hasHybrid : undefined); 2422 this.initParam('item', params && 'item' in params ? params.item : undefined); 2423 this.initParam('selected', params && 'selected' in params ? params.selected : undefined); 2424 this.initParam('theme', params && 'theme' in params ? params.theme : undefined); 2425 this.initParam('itemMinFontScale', params && 'itemMinFontScale' in params ? params.itemMinFontScale : undefined); 2426 this.initParam('itemMaxFontScale', params && 'itemMaxFontScale' in params ? params.itemMaxFontScale : undefined); 2427 this.initParam('itemFontColor', params && 'itemFontColor' in params ? params.itemFontColor : undefined); 2428 this.initParam( 2429 'itemSelectedFontColor', 2430 params && 'itemSelectedFontColor' in params ? params.itemSelectedFontColor : undefined 2431 ); 2432 this.initParam('itemFontSize', params && 'itemFontSize' in params ? params.itemFontSize : undefined); 2433 this.initParam( 2434 'itemSelectedFontSize', 2435 params && 'itemSelectedFontSize' in params ? params.itemSelectedFontSize : undefined 2436 ); 2437 this.initParam('itemFontWeight', params && 'itemFontWeight' in params ? params.itemFontWeight : undefined); 2438 this.initParam( 2439 'itemSelectedFontWeight', 2440 params && 'itemSelectedFontWeight' in params ? params.itemSelectedFontWeight : undefined 2441 ); 2442 this.initParam('itemIconSize', params && 'itemIconSize' in params ? params.itemIconSize : undefined); 2443 this.initParam('itemIconFillColor', params && 'itemIconFillColor' in params ? params.itemIconFillColor : undefined); 2444 this.initParam( 2445 'itemSelectedIconFillColor', 2446 params && 'itemSelectedIconFillColor' in params ? params.itemSelectedIconFillColor : undefined 2447 ); 2448 this.initParam( 2449 'itemSymbolFontSize', 2450 params && 'itemSymbolFontSize' in params ? params.itemSymbolFontSize : undefined 2451 ); 2452 this.initParam( 2453 'itemSymbolFontColor', 2454 params && 'itemSymbolFontColor' in params ? params.itemSymbolFontColor : undefined 2455 ); 2456 this.initParam( 2457 'itemSelectedSymbolFontColor', 2458 params && 'itemSelectedSymbolFontColor' in params ? params.itemSelectedSymbolFontColor : undefined 2459 ); 2460 this.initParam('itemMinHeight', params && 'itemMinHeight' in params ? params.itemMinHeight : undefined); 2461 this.initParam('itemPadding', params && 'itemPadding' in params ? params.itemPadding : undefined); 2462 this.initParam('languageDirection', params && 'languageDirection' in params ? params.languageDirection : undefined); 2463 this.finalizeConstruction(); 2464 } 2465 initialRender() { 2466 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 2467 this.observeComponentCreation2((elmtId, isInitialRender) => { 2468 Column.create({ space: 2 }); 2469 Column.constraintSize({ 2470 minHeight: this.getItemMinHeight(), 2471 minWidth: '100%', 2472 }); 2473 Column.direction(this.languageDirection); 2474 Column.justifyContent(FlexAlign.Center); 2475 Column.padding(this.getItemPadding()); 2476 }, Column); 2477 this.observeComponentCreation2((elmtId, isInitialRender) => { 2478 If.create(); 2479 if (this.item.symbol || this.item.symbolModifier) { 2480 this.ifElseBranchUpdateFunction(0, () => { 2481 this.observeComponentCreation2((elmtId, isInitialRender) => { 2482 SymbolGlyph.create(this.item.symbol); 2483 SymbolGlyph.fontSize(this.getSymbolFontSize()); 2484 SymbolGlyph.fontColor([this.getItemSymbolFillColor()]); 2485 SymbolGlyph.direction(this.languageDirection); 2486 SymbolGlyph.attributeModifier.bind(this)(this.item.symbolModifier); 2487 }, SymbolGlyph); 2488 }); 2489 } else if (this.item.icon) { 2490 this.ifElseBranchUpdateFunction(1, () => { 2491 this.observeComponentCreation2((elmtId, isInitialRender) => { 2492 Image.create(this.item.icon); 2493 Image.fillColor(this.getItemIconFillColor()); 2494 Image.width(this.getItemIconWidth()); 2495 Image.height(this.getItemIconHeight()); 2496 Image.direction(this.languageDirection); 2497 Image.draggable(false); 2498 Image.attributeModifier.bind(this)(this.item.iconModifier); 2499 }, Image); 2500 }); 2501 } else { 2502 this.ifElseBranchUpdateFunction(2, () => {}); 2503 } 2504 }, If); 2505 If.pop(); 2506 this.observeComponentCreation2((elmtId, isInitialRender) => { 2507 If.create(); 2508 if (this.item.text) { 2509 this.ifElseBranchUpdateFunction(0, () => { 2510 this.observeComponentCreation2((elmtId, isInitialRender) => { 2511 Text.create(this.item.text); 2512 Text.direction(this.languageDirection); 2513 Text.fontSize(this.getItemFontSize()); 2514 Text.fontColor(this.getItemFontColor()); 2515 Text.fontWeight(this.getItemFontWeight()); 2516 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 2517 Text.maxLines(1); 2518 Text.maxFontScale(this.getItemMaxFontScale()); 2519 Text.minFontScale(this.getItemMinFontScale()); 2520 Text.attributeModifier.bind(this)(this.item.textModifier); 2521 }, Text); 2522 Text.pop(); 2523 }); 2524 } else { 2525 this.ifElseBranchUpdateFunction(1, () => {}); 2526 } 2527 }, If); 2528 If.pop(); 2529 Column.pop(); 2530 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 2531 } 2532 getItemFontWeight() { 2533 if (this.selected) { 2534 return this.itemSelectedFontWeight ?? this.theme.itemSelectedFontWeight; 2535 } 2536 return this.itemFontWeight ?? this.theme.itemFontWeight; 2537 } 2538 getItemSymbolFillColor() { 2539 if (this.selected) { 2540 return this.itemSelectedSymbolFontColor?.color ?? this.theme.itemSelectedSymbolFontColor; 2541 } 2542 return this.itemSymbolFontColor?.color ?? this.theme.itemSymbolFontColor; 2543 } 2544 getSymbolFontSize() { 2545 if ( 2546 this.itemSymbolFontSize && 2547 LengthMetricsUtils.getInstance().isNaturalNumber(this.itemSymbolFontSize) && 2548 this.itemSymbolFontSize.unit !== LengthUnit.PERCENT 2549 ) { 2550 return LengthMetricsUtils.getInstance().stringify(this.itemSymbolFontSize); 2551 } 2552 return this.theme.itemSymbolFontSize; 2553 } 2554 getItemMaxFontScale() { 2555 if (typeof this.itemMaxFontScale === 'number') { 2556 return normalize(this.itemMaxFontScale, this.theme.itemMaxFontScaleSmallest, this.theme.itemMaxFontScaleLargest); 2557 } 2558 if (typeof this.itemMaxFontScale === 'object') { 2559 const itemMaxFontScale = 2560 parseNumericResource(this.getUIContext(), this.itemMaxFontScale) ?? SMALLEST_MAX_FONT_SCALE; 2561 return normalize(itemMaxFontScale, this.theme.itemMaxFontScaleSmallest, this.theme.itemMaxFontScaleLargest); 2562 } 2563 return SMALLEST_MAX_FONT_SCALE; 2564 } 2565 getItemMinFontScale() { 2566 if (typeof this.itemMinFontScale === 'number') { 2567 return normalize(this.itemMinFontScale, this.theme.itemMinFontScaleSmallest, this.theme.itemMinFontScaleLargest); 2568 } 2569 if (typeof this.itemMinFontScale === 'object') { 2570 const itemMinFontScale = 2571 parseNumericResource(this.getUIContext(), this.itemMinFontScale) ?? SMALLEST_MIN_FONT_SCALE; 2572 return normalize(itemMinFontScale, this.theme.itemMinFontScaleSmallest, this.theme.itemMinFontScaleLargest); 2573 } 2574 return SMALLEST_MIN_FONT_SCALE; 2575 } 2576 getItemPadding() { 2577 const itemPadding = { 2578 top: this.theme.itemPadding.top, 2579 bottom: this.theme.itemPadding.bottom, 2580 start: this.theme.itemPadding.start, 2581 end: this.theme.itemPadding.end, 2582 }; 2583 if (this.itemPadding?.top && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemPadding.top)) { 2584 itemPadding.top = this.itemPadding.top; 2585 } 2586 if (this.itemPadding?.bottom && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemPadding.bottom)) { 2587 itemPadding.bottom = this.itemPadding.bottom; 2588 } 2589 if (this.itemPadding?.start && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemPadding.start)) { 2590 itemPadding.start = this.itemPadding.start; 2591 } 2592 if (this.itemPadding?.end && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemPadding.end)) { 2593 itemPadding.end = this.itemPadding.end; 2594 } 2595 return itemPadding; 2596 } 2597 getItemMinHeight() { 2598 if (this.itemMinHeight && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemMinHeight)) { 2599 return LengthMetricsUtils.getInstance().stringify(this.itemMinHeight); 2600 } 2601 return this.hasHybrid ? this.theme.hybridItemMinHeight : this.theme.itemMinHeight; 2602 } 2603 getItemFontColor() { 2604 if (this.selected) { 2605 if (this.itemSelectedFontColor) { 2606 return this.itemSelectedFontColor.color; 2607 } 2608 return this.theme.itemSelectedFontColor; 2609 } 2610 if (this.itemFontColor) { 2611 return this.itemFontColor.color; 2612 } 2613 return this.theme.itemFontColor; 2614 } 2615 getItemFontSize() { 2616 if (this.selected) { 2617 if ( 2618 this.itemSelectedFontSize && 2619 LengthMetricsUtils.getInstance().isNaturalNumber(this.itemSelectedFontSize) && 2620 this.itemSelectedFontSize.unit !== LengthUnit.PERCENT 2621 ) { 2622 return LengthMetricsUtils.getInstance().stringify(this.itemSelectedFontSize); 2623 } 2624 return this.theme.itemFontSize; 2625 } 2626 if ( 2627 this.itemFontSize && 2628 LengthMetricsUtils.getInstance().isNaturalNumber(this.itemFontSize) && 2629 this.itemFontSize.unit !== LengthUnit.PERCENT 2630 ) { 2631 return LengthMetricsUtils.getInstance().stringify(this.itemFontSize); 2632 } 2633 return this.theme.itemFontSize; 2634 } 2635 getItemIconHeight() { 2636 if (this.itemIconSize?.height && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemIconSize.height)) { 2637 return LengthMetricsUtils.getInstance().stringify(this.itemIconSize.height); 2638 } 2639 return this.theme.itemIconSize; 2640 } 2641 getItemIconWidth() { 2642 if (this.itemIconSize?.width && LengthMetricsUtils.getInstance().isNaturalNumber(this.itemIconSize.width)) { 2643 return LengthMetricsUtils.getInstance().stringify(this.itemIconSize.width); 2644 } 2645 return this.theme.itemIconSize; 2646 } 2647 getItemIconFillColor() { 2648 if (this.selected) { 2649 if (this.itemSelectedIconFillColor) { 2650 return this.itemSelectedIconFillColor.color; 2651 } 2652 return this.theme.itemSelectedIconFillColor; 2653 } 2654 if (this.itemIconFillColor) { 2655 return this.itemIconFillColor.color; 2656 } 2657 return this.theme.itemIconFillColor; 2658 } 2659 updateStateVars(params) { 2660 if (params === undefined) { 2661 return; 2662 } 2663 if ('hasHybrid' in params) { 2664 this.updateParam('hasHybrid', params.hasHybrid); 2665 } 2666 if ('item' in params) { 2667 this.updateParam('item', params.item); 2668 } 2669 if ('selected' in params) { 2670 this.updateParam('selected', params.selected); 2671 } 2672 if ('theme' in params) { 2673 this.updateParam('theme', params.theme); 2674 } 2675 if ('itemMinFontScale' in params) { 2676 this.updateParam('itemMinFontScale', params.itemMinFontScale); 2677 } 2678 if ('itemMaxFontScale' in params) { 2679 this.updateParam('itemMaxFontScale', params.itemMaxFontScale); 2680 } 2681 if ('itemFontColor' in params) { 2682 this.updateParam('itemFontColor', params.itemFontColor); 2683 } 2684 if ('itemSelectedFontColor' in params) { 2685 this.updateParam('itemSelectedFontColor', params.itemSelectedFontColor); 2686 } 2687 if ('itemFontSize' in params) { 2688 this.updateParam('itemFontSize', params.itemFontSize); 2689 } 2690 if ('itemSelectedFontSize' in params) { 2691 this.updateParam('itemSelectedFontSize', params.itemSelectedFontSize); 2692 } 2693 if ('itemFontWeight' in params) { 2694 this.updateParam('itemFontWeight', params.itemFontWeight); 2695 } 2696 if ('itemSelectedFontWeight' in params) { 2697 this.updateParam('itemSelectedFontWeight', params.itemSelectedFontWeight); 2698 } 2699 if ('itemIconSize' in params) { 2700 this.updateParam('itemIconSize', params.itemIconSize); 2701 } 2702 if ('itemIconFillColor' in params) { 2703 this.updateParam('itemIconFillColor', params.itemIconFillColor); 2704 } 2705 if ('itemSelectedIconFillColor' in params) { 2706 this.updateParam('itemSelectedIconFillColor', params.itemSelectedIconFillColor); 2707 } 2708 if ('itemSymbolFontSize' in params) { 2709 this.updateParam('itemSymbolFontSize', params.itemSymbolFontSize); 2710 } 2711 if ('itemSymbolFontColor' in params) { 2712 this.updateParam('itemSymbolFontColor', params.itemSymbolFontColor); 2713 } 2714 if ('itemSelectedSymbolFontColor' in params) { 2715 this.updateParam('itemSelectedSymbolFontColor', params.itemSelectedSymbolFontColor); 2716 } 2717 if ('itemMinHeight' in params) { 2718 this.updateParam('itemMinHeight', params.itemMinHeight); 2719 } 2720 if ('itemPadding' in params) { 2721 this.updateParam('itemPadding', params.itemPadding); 2722 } 2723 if ('languageDirection' in params) { 2724 this.updateParam('languageDirection', params.languageDirection); 2725 } 2726 } 2727 rerender() { 2728 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 2729 this.updateDirtyElements(); 2730 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 2731 } 2732} 2733__decorate([Param], SegmentButtonV2ItemContent.prototype, 'hasHybrid', void 0); 2734__decorate([Param], SegmentButtonV2ItemContent.prototype, 'item', void 0); 2735__decorate([Param], SegmentButtonV2ItemContent.prototype, 'selected', void 0); 2736__decorate([Param], SegmentButtonV2ItemContent.prototype, 'theme', void 0); 2737__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemMinFontScale', void 0); 2738__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemMaxFontScale', void 0); 2739__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemFontColor', void 0); 2740__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSelectedFontColor', void 0); 2741__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemFontSize', void 0); 2742__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSelectedFontSize', void 0); 2743__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemFontWeight', void 0); 2744__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSelectedFontWeight', void 0); 2745__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemIconSize', void 0); 2746__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemIconFillColor', void 0); 2747__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSelectedIconFillColor', void 0); 2748__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSymbolFontSize', void 0); 2749__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSymbolFontColor', void 0); 2750__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemSelectedSymbolFontColor', void 0); 2751__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemMinHeight', void 0); 2752__decorate([Param], SegmentButtonV2ItemContent.prototype, 'itemPadding', void 0); 2753__decorate([Param], SegmentButtonV2ItemContent.prototype, 'languageDirection', void 0); 2754class LengthMetricsUtils { 2755 constructor() {} 2756 static getInstance() { 2757 if (!LengthMetricsUtils.instance) { 2758 LengthMetricsUtils.instance = new LengthMetricsUtils(); 2759 } 2760 return LengthMetricsUtils.instance; 2761 } 2762 stringify(metrics) { 2763 switch (metrics.unit) { 2764 case LengthUnit.PX: 2765 return `${metrics.value}px`; 2766 case LengthUnit.VP: 2767 return `${metrics.value}vp`; 2768 case LengthUnit.FP: 2769 return `${metrics.value}fp`; 2770 case LengthUnit.PERCENT: 2771 return `${metrics.value}%`; 2772 case LengthUnit.LPX: 2773 return `${metrics.value}lpx`; 2774 } 2775 } 2776 isNaturalNumber(metrics) { 2777 return metrics.value >= 0; 2778 } 2779} 2780function parseNumericResource(context, resource) { 2781 const resourceManager = context.getHostContext()?.resourceManager; 2782 if (!resourceManager) { 2783 return undefined; 2784 } 2785 try { 2786 return resourceManager.getNumber(resource); 2787 } catch (err) { 2788 // todo log err 2789 return undefined; 2790 } 2791} 2792function normalize(value, min, max) { 2793 return Math.min(Math.max(value, min), max); 2794} 2795function generateUniqueKye(groupId) { 2796 return (item, index) => { 2797 let key = groupId; 2798 if (item.text) { 2799 if (typeof item.text === 'string') { 2800 key += item.text; 2801 } else { 2802 key += getResourceUniqueId(item.text); 2803 } 2804 } 2805 if (item.icon) { 2806 if (typeof item.icon === 'string') { 2807 key += item.icon; 2808 } else { 2809 key += getResourceUniqueId(item.icon); 2810 } 2811 } 2812 if (item.symbol) { 2813 key += getResourceUniqueId(item.symbol); 2814 } 2815 return key; 2816 }; 2817} 2818function getResourceUniqueId(resource) { 2819 if (resource.id !== -1) { 2820 return `${resource.id}`; 2821 } else { 2822 return JSON.stringify(resource); 2823 } 2824} 2825class GroupIdGenerator { 2826 constructor() { 2827 this.id = 0; 2828 } 2829 static getInstance() { 2830 if (!GroupIdGenerator.instance) { 2831 GroupIdGenerator.instance = new GroupIdGenerator(); 2832 } 2833 return GroupIdGenerator.instance; 2834 } 2835 generate() { 2836 return util.generateRandomUUID() || `SegmentButton-${this.id++}`; 2837 } 2838} 2839GroupIdGenerator.instance = null; 2840 2841export default { 2842 SegmentButtonV2Item, 2843 SegmentButtonV2Items, 2844 TabSegmentButtonV2, 2845 CapsuleSegmentButtonV2, 2846 MultiCapsuleSegmentButtonV2, 2847}; 2848