1/*
2 * Copyright (c) 2023-2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16if (!('finalizeConstruction' in ViewPU.prototype)) {
17  Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { });
18}
19const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
20const MeasureText = requireNapi('measure');
21const hilog = requireNapi('hilog');
22const PUBLIC_MORE = { 'id': -1, 'type': 20000, params: ['sys.media.ohos_ic_public_more'],
23  'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
24const TEXT_EDITABLE_DIALOG = '18.3fp';
25const IMAGE_SIZE = '64vp';
26const MAX_DIALOG = '256vp';
27const MIN_DIALOG = '216vp';
28export class TabTitleBar extends ViewPU {
29  constructor(g9, h9, i9, j9 = -1, k9 = undefined, l9) {
30    super(g9, i9, j9, l9);
31    if (typeof k9 === 'function') {
32      this.paramsGenerator_ = k9;
33    }
34    this.tabItems = [];
35    this.menuItems = [];
36    this.swiperContent = undefined;
37    this.__tabWidth = new ObservedPropertySimplePU(0, this, 'tabWidth');
38    this.__currentIndex = new ObservedPropertySimplePU(0, this, 'currentIndex');
39    this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize');
40    this.menuSectionWidth = 0;
41    this.tabOffsets = [];
42    this.imageWidths = [];
43    this.scroller = new Scroller();
44    this.swiperController = new SwiperController();
45    this.settings = new RenderingContextSettings(true);
46    this.leftContext2D = new CanvasRenderingContext2D(this.settings);
47    this.rightContext2D = new CanvasRenderingContext2D(this.settings);
48    this.setInitiallyProvidedValue(h9);
49    this.finalizeConstruction();
50  }
51  setInitiallyProvidedValue(f9) {
52    if (f9.tabItems !== undefined) {
53      this.tabItems = f9.tabItems;
54    }
55    if (f9.menuItems !== undefined) {
56      this.menuItems = f9.menuItems;
57    }
58    if (f9.swiperContent !== undefined) {
59      this.swiperContent = f9.swiperContent;
60    }
61    if (f9.tabWidth !== undefined) {
62      this.tabWidth = f9.tabWidth;
63    }
64    if (f9.currentIndex !== undefined) {
65      this.currentIndex = f9.currentIndex;
66    }
67    if (f9.fontSize !== undefined) {
68      this.fontSize = f9.fontSize;
69    }
70    if (f9.menuSectionWidth !== undefined) {
71      this.menuSectionWidth = f9.menuSectionWidth;
72    }
73    if (f9.tabOffsets !== undefined) {
74      this.tabOffsets = f9.tabOffsets;
75    }
76    if (f9.imageWidths !== undefined) {
77      this.imageWidths = f9.imageWidths;
78    }
79    if (f9.scroller !== undefined) {
80      this.scroller = f9.scroller;
81    }
82    if (f9.swiperController !== undefined) {
83      this.swiperController = f9.swiperController;
84    }
85    if (f9.settings !== undefined) {
86      this.settings = f9.settings;
87    }
88    if (f9.leftContext2D !== undefined) {
89      this.leftContext2D = f9.leftContext2D;
90    }
91    if (f9.rightContext2D !== undefined) {
92      this.rightContext2D = f9.rightContext2D;
93    }
94  }
95  updateStateVars(e9) {
96  }
97  purgeVariableDependenciesOnElmtId(d9) {
98    this.__tabWidth.purgeDependencyOnElmtId(d9);
99    this.__currentIndex.purgeDependencyOnElmtId(d9);
100    this.__fontSize.purgeDependencyOnElmtId(d9);
101  }
102  aboutToBeDeleted() {
103    this.__tabWidth.aboutToBeDeleted();
104    this.__currentIndex.aboutToBeDeleted();
105    this.__fontSize.aboutToBeDeleted();
106    SubscriberManager.Get().delete(this.id__());
107    this.aboutToBeDeletedInternal();
108  }
109  get tabWidth() {
110    return this.__tabWidth.get();
111  }
112  set tabWidth(c9) {
113    this.__tabWidth.set(c9);
114  }
115  get currentIndex() {
116    return this.__currentIndex.get();
117  }
118  set currentIndex(b9) {
119    this.__currentIndex.set(b9);
120  }
121  get fontSize() {
122    return this.__fontSize.get();
123  }
124  set fontSize(a9) {
125    this.__fontSize.set(a9);
126  }
127  GradientMask(p8, q8, r8, s8, t8, u8 = null) {
128    this.observeComponentCreation2((y8, z8) => {
129      Column.create();
130      Column.blendMode(BlendMode.DST_OUT);
131      Column.width(TabTitleBar.gradientMaskWidth);
132      Column.height(TabTitleBar.totalHeight);
133    }, Column);
134    this.observeComponentCreation2((v8, w8) => {
135      Canvas.create(p8);
136      Canvas.width(TabTitleBar.gradientMaskWidth);
137      Canvas.height(TabTitleBar.totalHeight);
138      Canvas.onReady(() => {
139        let x8 = p8.createLinearGradient(q8, r8, s8, t8);
140        x8.addColorStop(0.0, '#ffffffff');
141        x8.addColorStop(1, '#00ffffff');
142        p8.fillStyle = x8;
143        p8.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight);
144      });
145    }, Canvas);
146    Canvas.pop();
147    Column.pop();
148  }
149  emptyBuilder(o8 = null) {
150  }
151  aboutToAppear() {
152    if (!this.swiperContent) {
153      this.swiperContent = this.emptyBuilder;
154    }
155    this.tabItems.forEach((n8) => {
156      this.imageWidths.push(0);
157    });
158    this.loadOffsets();
159  }
160  loadOffsets() {
161    this.tabOffsets.length = 0;
162    let k8 = 0;
163    this.tabOffsets.push(k8);
164    k8 += TabContentItem.marginFirst;
165    this.tabItems.forEach((l8, m8) => {
166      if (l8.icon !== undefined) {
167        if (Math.abs(this.imageWidths[m8]) > TabContentItem.imageHotZoneWidth) {
168          k8 += this.imageWidths[m8];
169        } else {
170          k8 += TabContentItem.imageHotZoneWidth;
171        }
172      } else {
173        k8 += TabContentItem.paddingLeft;
174        k8 += px2vp(MeasureText.measureText({
175          textContent: l8.title.toString(),
176          fontSize: 18,
177          fontWeight: FontWeight.Medium,
178        }));
179        k8 += TabContentItem.paddingRight;
180      }
181      this.tabOffsets.push(k8);
182    });
183  }
184  initialRender() {
185    this.observeComponentCreation2((i8, j8) => {
186      Column.create();
187    }, Column);
188    this.observeComponentCreation2((e8, f8) => {
189      Flex.create({
190        justifyContent: FlexAlign.SpaceBetween,
191        alignItems: ItemAlign.Stretch
192      });
193      Flex.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_background'],
194        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
195      Flex.margin({ right: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_max_padding_end'],
196        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } });
197      Flex.onAreaChange((g8, h8) => {
198        this.tabWidth = Number(h8.width) - this.menuSectionWidth;
199      });
200    }, Flex);
201    this.observeComponentCreation2((c8, d8) => {
202      Stack.create({ alignContent: Alignment.End });
203      Stack.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN);
204    }, Stack);
205    this.observeComponentCreation2((a8, b8) => {
206      Stack.create({ alignContent: Alignment.Start });
207    }, Stack);
208    this.observeComponentCreation2((y7, z7) => {
209      Column.create();
210    }, Column);
211    this.observeComponentCreation2((w7, x7) => {
212      List.create({ initialIndex: 0, scroller: this.scroller, space: 0 });
213      List.width('100%');
214      List.height(TabTitleBar.totalHeight);
215      List.constraintSize({ maxWidth: this.tabWidth });
216      List.edgeEffect(EdgeEffect.Spring);
217      List.listDirection(Axis.Horizontal);
218      List.scrollBar(BarState.Off);
219    }, List);
220    this.observeComponentCreation2((z6, a7) => {
221      ForEach.create();
222      const b7 = (c7, d7) => {
223        const e7 = c7;
224        {
225          const f7 = (u7, v7) => {
226            ViewStackProcessor.StartGetAccessRecordingFor(u7);
227            g7(u7, v7);
228            if (!v7) {
229              ListItem.pop();
230            }
231            ViewStackProcessor.StopGetAccessRecording();
232          };
233          const g7 = (s7, t7) => {
234            ListItem.create(h7, true);
235          };
236          const h7 = (i7, j7) => {
237            f7(i7, j7);
238            {
239              this.observeComponentCreation2((k7, l7) => {
240                if (l7) {
241                  let m7 = new TabContentItem(this, {
242                    item: e7,
243                    index: d7,
244                    maxIndex: this.tabItems.length - 1,
245                    currentIndex: this.currentIndex,
246                    onCustomClick: (r7) => this.currentIndex = r7,
247                    onImageComplete: (q7) => {
248                      this.imageWidths[d7] = q7;
249                      this.loadOffsets();
250                    }
251                  }, undefined, k7, () => { }, { page: 'library/src/main/ets/components/MainPage.ets',
252                    line: 138, col: 21 });
253                  ViewPU.create(m7);
254                  let n7 = () => {
255                    return {
256                      item: e7,
257                      index: d7,
258                      maxIndex: this.tabItems.length - 1,
259                      currentIndex: this.currentIndex,
260                      onCustomClick: (p7) => this.currentIndex = p7,
261                      onImageComplete: (o7) => {
262                        this.imageWidths[d7] = o7;
263                        this.loadOffsets();
264                      }
265                    };
266                  };
267                  m7.paramsGenerator_ = n7;
268                }
269                else {
270                  this.updateStateVarsOfChildByElmtId(k7, {
271                    currentIndex: this.currentIndex
272                  });
273                }
274              }, { name: 'TabContentItem' });
275            }
276            ListItem.pop();
277          };
278          this.observeComponentCreation2(g7, ListItem);
279          ListItem.pop();
280        }
281      };
282      this.forEachUpdateFunction(z6, this.tabItems, b7, undefined, true, false);
283    }, ForEach);
284    ForEach.pop();
285    List.pop();
286    Column.pop();
287    this.GradientMask.bind(this)(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, TabTitleBar.gradientMaskWidth,
288      TabTitleBar.totalHeight / 2);
289    Stack.pop();
290    this.GradientMask.bind(this)(this.rightContext2D, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2, 0,
291      TabTitleBar.totalHeight / 2);
292    Stack.pop();
293    this.observeComponentCreation2((p6, q6) => {
294      If.create();
295      if (this.menuItems !== undefined && this.menuItems.length > 0) {
296        this.ifElseBranchUpdateFunction(0, () => {
297          this.observeComponentCreation2((v6, w6) => {
298            __Common__.create();
299            __Common__.height(TabTitleBar.totalHeight);
300            __Common__.onAreaChange((x6, y6) => {
301              this.menuSectionWidth = Number(y6.width);
302            });
303          }, __Common__);
304          {
305            this.observeComponentCreation2((r6, s6) => {
306              if (s6) {
307                let t6 = new CollapsibleMenuSection(this, { menuItems: this.menuItems,
308                  index: 1 + TabTitleBar.instanceCount++ }, undefined, r6, () => { },
309                  { page: 'library/src/main/ets/components/MainPage.ets', line: 168, col: 11 });
310                ViewPU.create(t6);
311                let u6 = () => {
312                  return {
313                    menuItems: this.menuItems,
314                    index: 1 + TabTitleBar.instanceCount++
315                  };
316                };
317                t6.paramsGenerator_ = u6;
318              } else {
319                this.updateStateVarsOfChildByElmtId(r6, {});
320              }
321            }, { name: 'CollapsibleMenuSection' });
322          }
323          __Common__.pop();
324        });
325      } else {
326        this.ifElseBranchUpdateFunction(1, () => {
327        });
328      }
329    }, If);
330    If.pop();
331    Flex.pop();
332    this.observeComponentCreation2((n6, o6) => {
333      Column.create();
334    }, Column);
335    this.observeComponentCreation2((j6, k6) => {
336      Swiper.create(this.swiperController);
337      Swiper.index(this.currentIndex);
338      Swiper.itemSpace(0);
339      Swiper.indicator(false);
340      Swiper.width('100%');
341      Swiper.height('100%');
342      Swiper.curve(Curve.Friction);
343      Swiper.onChange((l6) => {
344        const m6 = this.tabOffsets[l6] + TabTitleBar.correctionOffset;
345        this.currentIndex = l6;
346        this.scroller.scrollTo({
347          xOffset: m6 > 0 ? m6 : 0,
348          yOffset: 0,
349          animation: {
350            duration: 300,
351            curve: Curve.EaseInOut
352          }
353        });
354      });
355      Swiper.onAppear(() => {
356        this.scroller.scrollToIndex(this.currentIndex);
357        this.scroller.scrollBy(TabTitleBar.correctionOffset, 0);
358      });
359    }, Swiper);
360    this.swiperContent.bind(this)();
361    Swiper.pop();
362    Column.pop();
363    Column.pop();
364  }
365  rerender() {
366    this.updateDirtyElements();
367  }
368}
369TabTitleBar.totalHeight = 56;
370TabTitleBar.correctionOffset = -40.0;
371TabTitleBar.gradientMaskWidth = 24;
372TabTitleBar.instanceCount = 0;
373class CollapsibleMenuSection extends ViewPU {
374  constructor(b6, c6, d6, e6 = -1, f6 = undefined, g6) {
375    super(b6, d6, e6, g6);
376    if (typeof f6 === 'function') {
377      this.paramsGenerator_ = f6;
378    }
379    this.menuItems = [];
380    this.index = 0;
381    this.item = {
382      value: PUBLIC_MORE,
383      label: { 'id': -1, 'type': 10003, params: ['sys.string.ohos_toolbar_more'],
384        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
385    };
386    this.longPressTime = 500;
387    this.minFontSize = 1.75;
388    this.isFollowingSystemFontScale = false;
389    this.maxFontScale = 1;
390    this.systemFontScale = 1;
391    this.firstFocusableIndex = -1;
392    this.__isPopupShown = new ObservedPropertySimplePU(false, this, 'isPopupShown');
393    this.__isMoreIconOnFocus = new ObservedPropertySimplePU(false, this, 'isMoreIconOnFocus');
394    this.__isMoreIconOnHover = new ObservedPropertySimplePU(false, this, 'isMoreIconOnHover');
395    this.__isMoreIconOnClick = new ObservedPropertySimplePU(false, this, 'isMoreIconOnClick');
396    this.__fontSize = new SynchedPropertySimpleOneWayPU(c6.fontSize, this, 'fontSize');
397    this.dialogController = new CustomDialogController({
398      builder: () => {
399        let h6 = new TabTitleBarDialog(this, {
400          cancel: () => {
401          },
402          confirm: () => {
403          },
404          tabTitleDialog: this.item,
405          tabTitleBarDialog: this.item.label ? this.item.label : '',
406          fontSize: this.fontSize,
407        }, undefined, -1, () => { }, { page: 'library/src/main/ets/components/MainPage.ets', line: 237, col: 14 });
408        h6.setController(this.dialogController);
409        ViewPU.create(h6);
410        let i6 = () => {
411          return {
412            cancel: () => {
413            },
414            confirm: () => {
415            },
416            tabTitleDialog: this.item,
417            tabTitleBarDialog: this.item.label ? this.item.label : '',
418            fontSize: this.fontSize
419          };
420        };
421        h6.paramsGenerator_ = i6;
422      },
423      maskColor: Color.Transparent,
424      isModal: true,
425      customStyle: true
426    }, this);
427    this.setInitiallyProvidedValue(c6);
428    this.finalizeConstruction();
429  }
430  setInitiallyProvidedValue(a6) {
431    if (a6.menuItems !== undefined) {
432      this.menuItems = a6.menuItems;
433    }
434    if (a6.index !== undefined) {
435      this.index = a6.index;
436    }
437    if (a6.item !== undefined) {
438      this.item = a6.item;
439    }
440    if (a6.longPressTime !== undefined) {
441      this.longPressTime = a6.longPressTime;
442    }
443    if (a6.minFontSize !== undefined) {
444      this.minFontSize = a6.minFontSize;
445    }
446    if (a6.isFollowingSystemFontScale !== undefined) {
447      this.isFollowingSystemFontScale = a6.isFollowingSystemFontScale;
448    }
449    if (a6.maxFontScale !== undefined) {
450      this.maxFontScale = a6.maxFontScale;
451    }
452    if (a6.systemFontScale !== undefined) {
453      this.systemFontScale = a6.systemFontScale;
454    }
455    if (a6.firstFocusableIndex !== undefined) {
456      this.firstFocusableIndex = a6.firstFocusableIndex;
457    }
458    if (a6.isPopupShown !== undefined) {
459      this.isPopupShown = a6.isPopupShown;
460    }
461    if (a6.isMoreIconOnFocus !== undefined) {
462      this.isMoreIconOnFocus = a6.isMoreIconOnFocus;
463    }
464    if (a6.isMoreIconOnHover !== undefined) {
465      this.isMoreIconOnHover = a6.isMoreIconOnHover;
466    }
467    if (a6.isMoreIconOnClick !== undefined) {
468      this.isMoreIconOnClick = a6.isMoreIconOnClick;
469    }
470    if (a6.fontSize === undefined) {
471      this.__fontSize.set(1);
472    }
473    if (a6.dialogController !== undefined) {
474      this.dialogController = a6.dialogController;
475    }
476  }
477  updateStateVars(z5) {
478    this.__fontSize.reset(z5.fontSize);
479  }
480  purgeVariableDependenciesOnElmtId(y5) {
481    this.__isPopupShown.purgeDependencyOnElmtId(y5);
482    this.__isMoreIconOnFocus.purgeDependencyOnElmtId(y5);
483    this.__isMoreIconOnHover.purgeDependencyOnElmtId(y5);
484    this.__isMoreIconOnClick.purgeDependencyOnElmtId(y5);
485    this.__fontSize.purgeDependencyOnElmtId(y5);
486  }
487  aboutToBeDeleted() {
488    this.__isPopupShown.aboutToBeDeleted();
489    this.__isMoreIconOnFocus.aboutToBeDeleted();
490    this.__isMoreIconOnHover.aboutToBeDeleted();
491    this.__isMoreIconOnClick.aboutToBeDeleted();
492    this.__fontSize.aboutToBeDeleted();
493    SubscriberManager.Get().delete(this.id__());
494    this.aboutToBeDeletedInternal();
495  }
496  get isPopupShown() {
497    return this.__isPopupShown.get();
498  }
499  set isPopupShown(x5) {
500    this.__isPopupShown.set(x5);
501  }
502  get isMoreIconOnFocus() {
503    return this.__isMoreIconOnFocus.get();
504  }
505  set isMoreIconOnFocus(w5) {
506    this.__isMoreIconOnFocus.set(w5);
507  }
508  get isMoreIconOnHover() {
509    return this.__isMoreIconOnHover.get();
510  }
511  set isMoreIconOnHover(v5) {
512    this.__isMoreIconOnHover.set(v5);
513  }
514  get isMoreIconOnClick() {
515    return this.__isMoreIconOnClick.get();
516  }
517  set isMoreIconOnClick(u5) {
518    this.__isMoreIconOnClick.set(u5);
519  }
520  get fontSize() {
521    return this.__fontSize.get();
522  }
523  set fontSize(t5) {
524    this.__fontSize.set(t5);
525  }
526  getMoreIconFgColor() {
527    return this.isMoreIconOnClick
528      ? { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon_pressed'],
529        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } :
530      { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'],
531        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
532  }
533  getMoreIconBgColor() {
534    if (this.isMoreIconOnClick) {
535      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_click_effect'],
536        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
537    }
538    else if (this.isMoreIconOnHover) {
539      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_hover'],
540        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
541    }
542    else {
543      return Color.Transparent;
544    }
545  }
546  aboutToAppear() {
547    try {
548      let s5 = this.getUIContext();
549      this.isFollowingSystemFontScale = s5.isFollowingSystemFontScale();
550      this.maxFontScale = s5.getMaxFontScale();
551    }
552    catch (p5) {
553      let q5 = p5.code;
554      let r5 = p5.message;
555      hilog.error(0x3900, 'Ace', `Faild to decideFontScale,cause, code: ${q5}, message: ${r5}`);
556    }
557    this.menuItems.forEach((n5, o5) => {
558      if (n5.isEnabled && this.firstFocusableIndex === -1 &&
559        o5 > CollapsibleMenuSection.maxCountOfVisibleItems - 2) {
560        this.firstFocusableIndex = this.index * 1000 + o5 + 1;
561      }
562    });
563  }
564  decideFontScale() {
565    let m5 = this.getUIContext();
566    this.systemFontScale = m5.getHostContext()?.config?.fontSizeScale ?? 1;
567    if (!this.isFollowingSystemFontScale) {
568      return 1;
569    }
570    return Math.min(this.systemFontScale, this.maxFontScale);
571  }
572  initialRender() {
573    this.observeComponentCreation2((k5, l5) => {
574      Column.create();
575      Column.height('100%');
576      Column.justifyContent(FlexAlign.Center);
577    }, Column);
578    this.observeComponentCreation2((i5, j5) => {
579      Row.create();
580    }, Row);
581    this.observeComponentCreation2((d4, e4) => {
582      If.create();
583      if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) {
584        this.ifElseBranchUpdateFunction(0, () => {
585          this.observeComponentCreation2((y4, z4) => {
586            ForEach.create();
587            const a5 = (b5, c5) => {
588              const d5 = b5;
589              {
590                this.observeComponentCreation2((e5, f5) => {
591                  if (f5) {
592                    let g5 = new ImageMenuItem(this, { item: d5, index: this.index * 1000 + c5 + 1 },
593                      undefined, e5, () => { }, { page: 'library/src/main/ets/components/MainPage.ets',
594                        line: 299, col: 13 });
595                    ViewPU.create(g5);
596                    let h5 = () => {
597                      return {
598                        item: d5,
599                        index: this.index * 1000 + c5 + 1
600                      };
601                    };
602                    g5.paramsGenerator_ = h5;
603                  } else {
604                    this.updateStateVarsOfChildByElmtId(e5, {});
605                  }
606                }, { name: 'ImageMenuItem' });
607              }
608            };
609            this.forEachUpdateFunction(y4, this.menuItems, a5, undefined, true, false);
610          }, ForEach);
611          ForEach.pop();
612        });
613      } else {
614        this.ifElseBranchUpdateFunction(1, () => {
615          this.observeComponentCreation2((o4, p4) => {
616            ForEach.create();
617            const q4 = (r4, s4) => {
618              const t4 = r4;
619              {
620                this.observeComponentCreation2((u4, v4) => {
621                  if (v4) {
622                    let w4 = new ImageMenuItem(this, { item: t4, index: this.index * 1000 + s4 + 1 }, undefined, u4,
623                      () => { }, { page: 'library/src/main/ets/components/MainPage.ets', line: 304, col: 15 });
624                    ViewPU.create(w4);
625                    let x4 = () => {
626                      return {
627                        item: t4,
628                        index: this.index * 1000 + s4 + 1
629                      };
630                    };
631                    w4.paramsGenerator_ = x4;
632                  } else {
633                    this.updateStateVarsOfChildByElmtId(u4, {});
634                  }
635                }, { name: 'ImageMenuItem' });
636              }
637            };
638            this.forEachUpdateFunction(o4, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1),
639              q4, undefined, true, false);
640          }, ForEach);
641          ForEach.pop();
642          this.observeComponentCreation2((h4, i4) => {
643            Row.create();
644            Row.width(ImageMenuItem.imageHotZoneWidth);
645            Row.height(ImageMenuItem.imageHotZoneWidth);
646            Row.borderRadius(ImageMenuItem.buttonBorderRadius);
647            Row.foregroundColor(this.getMoreIconFgColor());
648            Row.backgroundColor(this.getMoreIconBgColor());
649            Row.justifyContent(FlexAlign.Center);
650            ViewStackProcessor.visualState('focused');
651            Row.border({
652              radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
653                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
654              width: ImageMenuItem.focusBorderWidth,
655              color: { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_focused_outline'],
656                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
657              style: BorderStyle.Solid
658            });
659            ViewStackProcessor.visualState('normal');
660            Row.border({
661              radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
662                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
663              width: 0
664            });
665            ViewStackProcessor.visualState();
666            Row.onFocus(() => this.isMoreIconOnFocus = true);
667            Row.onBlur(() => this.isMoreIconOnFocus = false);
668            Row.onHover((n4) => this.isMoreIconOnHover = n4);
669            Row.onKeyEvent((m4) => {
670              if (m4.keyCode !== KeyCode.KEYCODE_ENTER && m4.keyCode !== KeyCode.KEYCODE_SPACE) {
671                return;
672              }
673              if (m4.type === KeyType.Down) {
674                this.isMoreIconOnClick = true;
675              }
676              if (m4.type === KeyType.Up) {
677                this.isMoreIconOnClick = false;
678              }
679            });
680            Row.onTouch((l4) => {
681              if (l4.type === TouchType.Down) {
682                this.isMoreIconOnClick = true;
683              }
684              if (l4.type === TouchType.Up || l4.type === TouchType.Cancel) {
685                this.isMoreIconOnClick = false;
686                if (this.fontSize >= this.minFontSize) {
687                  this.dialogController?.close();
688                }
689              }
690            });
691            Row.onClick(() => this.isPopupShown = true);
692            Gesture.create(GesturePriority.Low);
693            LongPressGesture.create({ repeat: false, duration: this.longPressTime });
694            LongPressGesture.onAction((k4) => {
695              this.fontSize = this.decideFontScale();
696              if (k4) {
697                if (this.fontSize >= this.minFontSize) {
698                  this.dialogController?.open();
699                }
700              }
701            });
702            LongPressGesture.pop();
703            Gesture.pop();
704            Row.bindPopup(this.isPopupShown, {
705              builder: { builder: this.popupBuilder.bind(this) },
706              placement: Placement.Bottom,
707              popupColor: Color.White,
708              enableArrow: false,
709              onStateChange: (j4) => {
710                this.isPopupShown = j4.isVisible;
711                if (!j4.isVisible) {
712                  this.isMoreIconOnClick = false;
713                }
714              }
715            });
716          }, Row);
717          this.observeComponentCreation2((f4, g4) => {
718            Image.create(PUBLIC_MORE);
719            Image.width(ImageMenuItem.imageSize);
720            Image.height(ImageMenuItem.imageSize);
721            Image.focusable(true);
722            Image.draggable(false);
723            Image.fillColor({ 'id': -1, 'type': 10001, params: ['sys.color.icon_primary'],
724              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
725          }, Image);
726          Row.pop();
727        });
728      }
729    }, If);
730    If.pop();
731    Row.pop();
732    Column.pop();
733  }
734  popupBuilder(q3 = null) {
735    this.observeComponentCreation2((b4, c4) => {
736      Column.create();
737      Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum);
738      Column.margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding });
739      Column.onAppear(() => {
740        focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex);
741      });
742    }, Column);
743    this.observeComponentCreation2((r3, s3) => {
744      ForEach.create();
745      const t3 = (u3, v3) => {
746        const w3 = u3;
747        {
748          this.observeComponentCreation2((x3, y3) => {
749            if (y3) {
750              let z3 = new ImageMenuItem(this, { item: w3,
751                index: this.index * 1000 + CollapsibleMenuSection.maxCountOfVisibleItems + v3 }, undefined, x3,
752                () => { }, { page: 'library/src/main/ets/components/MainPage.ets', line: 397, col: 11 });
753              ViewPU.create(z3);
754              let a4 = () => {
755                return {
756                  item: w3,
757                  index: this.index * 1000 + CollapsibleMenuSection.maxCountOfVisibleItems + v3
758                };
759              };
760              z3.paramsGenerator_ = a4;
761            }
762            else {
763              this.updateStateVarsOfChildByElmtId(x3, {});
764            }
765          }, { name: 'ImageMenuItem' });
766        }
767      };
768      this.forEachUpdateFunction(r3, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1,
769        this.menuItems.length), t3, undefined, true, false);
770    }, ForEach);
771    ForEach.pop();
772    Column.pop();
773  }
774  rerender() {
775    this.updateDirtyElements();
776  }
777}
778CollapsibleMenuSection.maxCountOfVisibleItems = 1;
779CollapsibleMenuSection.focusPadding = 4;
780CollapsibleMenuSection.marginsNum = 2;
781class TabContentItem extends ViewPU {
782  constructor(k3, l3, m3, n3 = -1, o3 = undefined, p3) {
783    super(k3, m3, n3, p3);
784    if (typeof o3 === 'function') {
785      this.paramsGenerator_ = o3;
786    }
787    this.item = { title: '' };
788    this.index = 0;
789    this.maxIndex = 0;
790    this.onCustomClick = undefined;
791    this.onImageComplete = undefined;
792    this.__currentIndex = new SynchedPropertySimpleOneWayPU(l3.currentIndex, this, 'currentIndex');
793    this.__isOnFocus = new ObservedPropertySimplePU(false, this, 'isOnFocus');
794    this.__isOnHover = new ObservedPropertySimplePU(false, this, 'isOnHover');
795    this.__isOnClick = new ObservedPropertySimplePU(false, this, 'isOnClick');
796    this.__tabWidth = new ObservedPropertySimplePU(0, this, 'tabWidth');
797    this.__imageWidth = new ObservedPropertySimplePU(24, this, 'imageWidth');
798    this.__imageHeight = new ObservedPropertySimplePU(24, this, 'imageHeight');
799    this.setInitiallyProvidedValue(l3);
800    this.finalizeConstruction();
801  }
802  setInitiallyProvidedValue(j3) {
803    if (j3.item !== undefined) {
804      this.item = j3.item;
805    }
806    if (j3.index !== undefined) {
807      this.index = j3.index;
808    }
809    if (j3.maxIndex !== undefined) {
810      this.maxIndex = j3.maxIndex;
811    }
812    if (j3.onCustomClick !== undefined) {
813      this.onCustomClick = j3.onCustomClick;
814    }
815    if (j3.onImageComplete !== undefined) {
816      this.onImageComplete = j3.onImageComplete;
817    }
818    if (j3.isOnFocus !== undefined) {
819      this.isOnFocus = j3.isOnFocus;
820    }
821    if (j3.isOnHover !== undefined) {
822      this.isOnHover = j3.isOnHover;
823    }
824    if (j3.isOnClick !== undefined) {
825      this.isOnClick = j3.isOnClick;
826    }
827    if (j3.tabWidth !== undefined) {
828      this.tabWidth = j3.tabWidth;
829    }
830    if (j3.imageWidth !== undefined) {
831      this.imageWidth = j3.imageWidth;
832    }
833    if (j3.imageHeight !== undefined) {
834      this.imageHeight = j3.imageHeight;
835    }
836  }
837  updateStateVars(i3) {
838    this.__currentIndex.reset(i3.currentIndex);
839  }
840  purgeVariableDependenciesOnElmtId(h3) {
841    this.__currentIndex.purgeDependencyOnElmtId(h3);
842    this.__isOnFocus.purgeDependencyOnElmtId(h3);
843    this.__isOnHover.purgeDependencyOnElmtId(h3);
844    this.__isOnClick.purgeDependencyOnElmtId(h3);
845    this.__tabWidth.purgeDependencyOnElmtId(h3);
846    this.__imageWidth.purgeDependencyOnElmtId(h3);
847    this.__imageHeight.purgeDependencyOnElmtId(h3);
848  }
849  aboutToBeDeleted() {
850    this.__currentIndex.aboutToBeDeleted();
851    this.__isOnFocus.aboutToBeDeleted();
852    this.__isOnHover.aboutToBeDeleted();
853    this.__isOnClick.aboutToBeDeleted();
854    this.__tabWidth.aboutToBeDeleted();
855    this.__imageWidth.aboutToBeDeleted();
856    this.__imageHeight.aboutToBeDeleted();
857    SubscriberManager.Get().delete(this.id__());
858    this.aboutToBeDeletedInternal();
859  }
860  get currentIndex() {
861    return this.__currentIndex.get();
862  }
863  set currentIndex(g3) {
864    this.__currentIndex.set(g3);
865  }
866  get isOnFocus() {
867    return this.__isOnFocus.get();
868  }
869  set isOnFocus(f3) {
870    this.__isOnFocus.set(f3);
871  }
872  get isOnHover() {
873    return this.__isOnHover.get();
874  }
875  set isOnHover(e3) {
876    this.__isOnHover.set(e3);
877  }
878  get isOnClick() {
879    return this.__isOnClick.get();
880  }
881  set isOnClick(d3) {
882    this.__isOnClick.set(d3);
883  }
884  get tabWidth() {
885    return this.__tabWidth.get();
886  }
887  set tabWidth(c3) {
888    this.__tabWidth.set(c3);
889  }
890  get imageWidth() {
891    return this.__imageWidth.get();
892  }
893  set imageWidth(b3) {
894    this.__imageWidth.set(b3);
895  }
896  get imageHeight() {
897    return this.__imageHeight.get();
898  }
899  set imageHeight(a3) {
900    this.__imageHeight.set(a3);
901  }
902  getBgColor() {
903    if (this.isOnClick) {
904      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_click_effect'],
905        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
906    } else if (this.isOnHover) {
907      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_hover'],
908        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
909    } else {
910      return Color.Transparent;
911    }
912  }
913  getBorderAttr() {
914    if (this.isOnFocus) {
915      return {
916        radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
917          'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
918        width: TabContentItem.focusBorderWidth,
919        color: { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_focused_outline'],
920          'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
921        style: BorderStyle.Solid
922      };
923    }
924    return { width: 0 };
925  }
926  getImageScaleFactor() {
927    return this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1;
928  }
929  getImageLayoutWidth() {
930    return TabContentItem.imageSize / Math.max(this.imageHeight, 1.0) * this.imageWidth;
931  }
932  initialRender() {
933    this.observeComponentCreation2((y2, z2) => {
934      Stack.create();
935      Stack.margin({
936        left: this.index === 0 ? TabContentItem.marginFirst : 0,
937        right: this.index === this.maxIndex ? 12 : 0
938      });
939    }, Stack);
940    this.observeComponentCreation2((u2, v2) => {
941      Row.create();
942      Row.height(TabTitleBar.totalHeight);
943      Row.alignItems(VerticalAlign.Center);
944      Row.justifyContent(FlexAlign.Center);
945      Row.borderRadius(TabContentItem.buttonBorderRadius);
946      Row.backgroundColor(this.getBgColor());
947      Row.onAreaChange((w2, x2) => {
948        this.tabWidth = Number(x2.width);
949      });
950    }, Row);
951    this.observeComponentCreation2((s2, t2) => {
952      Column.create();
953      Column.justifyContent(FlexAlign.Center);
954    }, Column);
955    this.observeComponentCreation2((c2, d2) => {
956      If.create();
957      if (this.item.icon === undefined) {
958        this.ifElseBranchUpdateFunction(0, () => {
959          this.observeComponentCreation2((n2, o2) => {
960            Text.create(this.item.title);
961            Context.animation({ duration: 300 });
962            Text.fontSize(this.index === this.currentIndex ?
963              { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'],
964                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } :
965              { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline9'],
966                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
967            Text.fontColor(this.index === this.currentIndex ?
968              { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_text'],
969                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } :
970              { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_text_off'],
971                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
972            Text.fontWeight(FontWeight.Medium);
973            Text.focusable(true);
974            Context.animation(null);
975            Text.padding({
976              top: this.index === this.currentIndex ? 6 : 10,
977              left: TabContentItem.paddingLeft,
978              bottom: 2,
979              right: TabContentItem.paddingRight
980            });
981            Text.onFocus(() => this.isOnFocus = true);
982            Text.onBlur(() => this.isOnFocus = false);
983            Text.onHover((r2) => this.isOnHover = r2);
984            Text.onKeyEvent((q2) => {
985              if (q2.keyCode !== KeyCode.KEYCODE_ENTER && q2.keyCode !== KeyCode.KEYCODE_SPACE) {
986                return;
987              }
988              if (q2.type === KeyType.Down) {
989                this.isOnClick = true;
990              }
991              if (q2.type === KeyType.Up) {
992                this.isOnClick = false;
993              }
994            });
995            Text.onTouch((p2) => {
996              if (p2.type === TouchType.Down) {
997                this.isOnClick = true;
998              }
999              if (p2.type === TouchType.Up || p2.type === TouchType.Cancel) {
1000                this.isOnClick = false;
1001              }
1002            });
1003            Text.onClick(() => this.onCustomClick && this.onCustomClick(this.index));
1004          }, Text);
1005          Text.pop();
1006        });
1007      }
1008      else {
1009        this.ifElseBranchUpdateFunction(1, () => {
1010          this.observeComponentCreation2((i2, j2) => {
1011            Row.create();
1012            Context.animation({ duration: 300 });
1013            Row.width(this.getImageLayoutWidth() * this.getImageScaleFactor() +
1014            TabContentItem.paddingLeft + TabContentItem.paddingRight);
1015            Row.constraintSize({
1016              minWidth: TabContentItem.imageHotZoneWidth,
1017              minHeight: TabContentItem.imageHotZoneWidth
1018            });
1019            Context.animation(null);
1020            Row.justifyContent(FlexAlign.Center);
1021            Row.onFocus(() => this.isOnFocus = true);
1022            Row.onBlur(() => this.isOnFocus = false);
1023            Row.onHover((m2) => this.isOnHover = m2);
1024            Row.onKeyEvent((l2) => {
1025              if (l2.keyCode !== KeyCode.KEYCODE_ENTER && l2.keyCode !== KeyCode.KEYCODE_SPACE) {
1026                return;
1027              }
1028              if (l2.type === KeyType.Down) {
1029                this.isOnClick = true;
1030              }
1031              if (l2.type === KeyType.Up) {
1032                this.isOnClick = false;
1033              }
1034            });
1035            Row.onTouch((k2) => {
1036              if (k2.type === TouchType.Down) {
1037                this.isOnClick = true;
1038              }
1039              if (k2.type === TouchType.Up || k2.type === TouchType.Cancel) {
1040                this.isOnClick = false;
1041              }
1042            });
1043            Row.onClick(() => this.onCustomClick && this.onCustomClick(this.index));
1044          }, Row);
1045          this.observeComponentCreation2((e2, f2) => {
1046            Image.create(this.item.icon);
1047            Context.animation({ duration: 300 });
1048            Image.alt(this.item.title);
1049            Image.width(this.getImageLayoutWidth());
1050            Image.height(TabContentItem.imageSize);
1051            Image.objectFit(ImageFit.Fill);
1052            Image.scale({
1053              x: this.getImageScaleFactor(),
1054              y: this.getImageScaleFactor()
1055            });
1056            Context.animation(null);
1057            Image.hitTestBehavior(HitTestMode.None);
1058            Image.focusable(true);
1059            Image.onComplete((h2) => {
1060              if (!this.onImageComplete) {
1061                return;
1062              }
1063              this.imageWidth = px2vp(h2?.width);
1064              this.imageHeight = px2vp(h2?.height);
1065              this.onImageComplete(px2vp(h2?.componentWidth) +
1066              TabContentItem.paddingLeft + TabContentItem.paddingRight);
1067            });
1068            Image.onError((g2) => {
1069              if (!this.onImageComplete) {
1070                return;
1071              }
1072              this.onImageComplete(px2vp(g2.componentWidth) +
1073              TabContentItem.paddingLeft + TabContentItem.paddingRight);
1074            });
1075          }, Image);
1076          Row.pop();
1077        });
1078      }
1079    }, If);
1080    If.pop();
1081    Column.pop();
1082    Row.pop();
1083    this.observeComponentCreation2((y1, z1) => {
1084      If.create();
1085      if (this.isOnFocus && this.tabWidth > 0) {
1086        this.ifElseBranchUpdateFunction(0, () => {
1087          this.observeComponentCreation2((a2, b2) => {
1088            Row.create();
1089            Row.width(this.tabWidth);
1090            Row.height(TabTitleBar.totalHeight);
1091            Row.hitTestBehavior(HitTestMode.None);
1092            Row.borderRadius(TabContentItem.buttonBorderRadius);
1093            ViewStackProcessor.visualState('focused');
1094            Row.border(this.getBorderAttr());
1095            ViewStackProcessor.visualState('normal');
1096            Row.border({
1097              radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
1098                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1099              width: 0
1100            });
1101            ViewStackProcessor.visualState();
1102          }, Row);
1103          Row.pop();
1104        });
1105      }
1106      else {
1107        this.ifElseBranchUpdateFunction(1, () => {
1108        });
1109      }
1110    }, If);
1111    If.pop();
1112    Stack.pop();
1113  }
1114  rerender() {
1115    this.updateDirtyElements();
1116  }
1117}
1118TabContentItem.imageSize = 24;
1119TabContentItem.imageHotZoneWidth = 48;
1120TabContentItem.imageMagnificationFactor = 1.4;
1121TabContentItem.buttonBorderRadius = 8;
1122TabContentItem.focusBorderWidth = 2;
1123TabContentItem.paddingLeft = 8;
1124TabContentItem.paddingRight = 8;
1125TabContentItem.marginFirst = 16;
1126class ImageMenuItem extends ViewPU {
1127  constructor(s1, t1, u1, v1 = -1, w1 = undefined, x1) {
1128    super(s1, u1, v1, x1);
1129    if (typeof w1 === 'function') {
1130      this.paramsGenerator_ = w1;
1131    }
1132    this.item = { value: '' };
1133    this.index = 0;
1134    this.__isOnFocus = new ObservedPropertySimplePU(false, this, 'isOnFocus');
1135    this.__isOnHover = new ObservedPropertySimplePU(false, this, 'isOnHover');
1136    this.__isOnClick = new ObservedPropertySimplePU(false, this, 'isOnClick');
1137    this.setInitiallyProvidedValue(t1);
1138    this.finalizeConstruction();
1139  }
1140  setInitiallyProvidedValue(r1) {
1141    if (r1.item !== undefined) {
1142      this.item = r1.item;
1143    }
1144    if (r1.index !== undefined) {
1145      this.index = r1.index;
1146    }
1147    if (r1.isOnFocus !== undefined) {
1148      this.isOnFocus = r1.isOnFocus;
1149    }
1150    if (r1.isOnHover !== undefined) {
1151      this.isOnHover = r1.isOnHover;
1152    }
1153    if (r1.isOnClick !== undefined) {
1154      this.isOnClick = r1.isOnClick;
1155    }
1156  }
1157  updateStateVars(q1) {
1158  }
1159  purgeVariableDependenciesOnElmtId(p1) {
1160    this.__isOnFocus.purgeDependencyOnElmtId(p1);
1161    this.__isOnHover.purgeDependencyOnElmtId(p1);
1162    this.__isOnClick.purgeDependencyOnElmtId(p1);
1163  }
1164  aboutToBeDeleted() {
1165    this.__isOnFocus.aboutToBeDeleted();
1166    this.__isOnHover.aboutToBeDeleted();
1167    this.__isOnClick.aboutToBeDeleted();
1168    SubscriberManager.Get().delete(this.id__());
1169    this.aboutToBeDeletedInternal();
1170  }
1171  get isOnFocus() {
1172    return this.__isOnFocus.get();
1173  }
1174  set isOnFocus(o1) {
1175    this.__isOnFocus.set(o1);
1176  }
1177  get isOnHover() {
1178    return this.__isOnHover.get();
1179  }
1180  set isOnHover(n1) {
1181    this.__isOnHover.set(n1);
1182  }
1183  get isOnClick() {
1184    return this.__isOnClick.get();
1185  }
1186  set isOnClick(m1) {
1187    this.__isOnClick.set(m1);
1188  }
1189  getFgColor() {
1190    return this.isOnClick ?
1191      { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon_pressed'],
1192        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } :
1193      { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'],
1194        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
1195  }
1196  getBgColor() {
1197    if (this.isOnClick) {
1198      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_click_effect'],
1199        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
1200    } else if (this.isOnHover) {
1201      return { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_hover'],
1202        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
1203    } else {
1204      return Color.Transparent;
1205    }
1206  }
1207  initialRender() {
1208    this.observeComponentCreation2((h1, i1) => {
1209      Row.create();
1210      Row.width(ImageMenuItem.imageHotZoneWidth);
1211      Row.height(ImageMenuItem.imageHotZoneWidth);
1212      Row.borderRadius(ImageMenuItem.buttonBorderRadius);
1213      Row.foregroundColor(this.getFgColor());
1214      Row.backgroundColor(this.getBgColor());
1215      Row.justifyContent(FlexAlign.Center);
1216      Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity);
1217      ViewStackProcessor.visualState('focused');
1218      Row.border({
1219        radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
1220          'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1221        width: ImageMenuItem.focusBorderWidth,
1222        color: { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_focused_outline'],
1223          'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1224        style: BorderStyle.Solid
1225      });
1226      ViewStackProcessor.visualState('normal');
1227      Row.border({
1228        radius: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_corner_radius_clicked'],
1229          'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1230        width: 0
1231      });
1232      ViewStackProcessor.visualState();
1233      Row.onFocus(() => {
1234        if (!this.item.isEnabled) {
1235          return;
1236        }
1237        this.isOnFocus = true;
1238      });
1239      Row.onBlur(() => this.isOnFocus = false);
1240      Row.onHover((l1) => {
1241        if (!this.item.isEnabled) {
1242          return;
1243        }
1244        this.isOnHover = l1;
1245      });
1246      Row.onKeyEvent((k1) => {
1247        if (!this.item.isEnabled) {
1248          return;
1249        }
1250        if (k1.keyCode !== KeyCode.KEYCODE_ENTER && k1.keyCode !== KeyCode.KEYCODE_SPACE) {
1251          return;
1252        }
1253        if (k1.type === KeyType.Down) {
1254          this.isOnClick = true;
1255        }
1256        if (k1.type === KeyType.Up) {
1257          this.isOnClick = false;
1258        }
1259      });
1260      Row.onTouch((j1) => {
1261        if (!this.item.isEnabled) {
1262          return;
1263        }
1264        if (j1.type === TouchType.Down) {
1265          this.isOnClick = true;
1266        }
1267        if (j1.type === TouchType.Up || j1.type === TouchType.Cancel) {
1268          this.isOnClick = false;
1269        }
1270      });
1271      Row.onClick(() => this.item.isEnabled && this.item.action && this.item.action());
1272    }, Row);
1273    this.observeComponentCreation2((f1, g1) => {
1274      Image.create(this.item.value);
1275      Image.width(ImageMenuItem.imageSize);
1276      Image.height(ImageMenuItem.imageSize);
1277      Image.focusable(this.item.isEnabled);
1278      Image.key(ImageMenuItem.focusablePrefix + this.index);
1279      Image.draggable(false);
1280    }, Image);
1281    Row.pop();
1282  }
1283  rerender() {
1284    this.updateDirtyElements();
1285  }
1286}
1287ImageMenuItem.imageSize = 24;
1288ImageMenuItem.imageHotZoneWidth = 48;
1289ImageMenuItem.buttonBorderRadius = 8;
1290ImageMenuItem.focusBorderWidth = 2;
1291ImageMenuItem.disabledImageOpacity = 0.4;
1292ImageMenuItem.focusablePrefix = 'Id-TabTitleBar-ImageMenuItem-';
1293class TabTitleBarDialog extends ViewPU {
1294  constructor(z, a1, b1, c1 = -1, d1 = undefined, e1) {
1295    super(z, b1, c1, e1);
1296    if (typeof d1 === 'function') {
1297      this.paramsGenerator_ = d1;
1298    }
1299    this.tabTitleDialog = { value: '' };
1300    this.callbackId = undefined;
1301    this.tabTitleBarDialog = '';
1302    this.mainWindowStage = undefined;
1303    this.controller = undefined;
1304    this.minFontSize = 1.75;
1305    this.maxFontSize = 3.2;
1306    this.screenWidth = 640;
1307    this.verticalScreenLines = 6;
1308    this.horizontalsScreenLines = 1;
1309    this.__mainWindow = this.createStorageLink('mainWindow', undefined, 'mainWindow');
1310    this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize');
1311    this.__maxLines = new ObservedPropertySimplePU(1, this, 'maxLines');
1312    this.__windowStandardHeight = this.createStorageProp('windowStandardHeight', 0, 'windowStandardHeight');
1313    this.cancel = () => {
1314    };
1315    this.confirm = () => {
1316    };
1317    this.setInitiallyProvidedValue(a1);
1318    this.finalizeConstruction();
1319  }
1320  setInitiallyProvidedValue(y) {
1321    if (y.tabTitleDialog !== undefined) {
1322      this.tabTitleDialog = y.tabTitleDialog;
1323    }
1324    if (y.callbackId !== undefined) {
1325      this.callbackId = y.callbackId;
1326    }
1327    if (y.tabTitleBarDialog !== undefined) {
1328      this.tabTitleBarDialog = y.tabTitleBarDialog;
1329    }
1330    if (y.mainWindowStage !== undefined) {
1331      this.mainWindowStage = y.mainWindowStage;
1332    }
1333    if (y.controller !== undefined) {
1334      this.controller = y.controller;
1335    }
1336    if (y.minFontSize !== undefined) {
1337      this.minFontSize = y.minFontSize;
1338    }
1339    if (y.maxFontSize !== undefined) {
1340      this.maxFontSize = y.maxFontSize;
1341    }
1342    if (y.screenWidth !== undefined) {
1343      this.screenWidth = y.screenWidth;
1344    }
1345    if (y.verticalScreenLines !== undefined) {
1346      this.verticalScreenLines = y.verticalScreenLines;
1347    }
1348    if (y.horizontalsScreenLines !== undefined) {
1349      this.horizontalsScreenLines = y.horizontalsScreenLines;
1350    }
1351    if (y.fontSize !== undefined) {
1352      this.fontSize = y.fontSize;
1353    }
1354    if (y.maxLines !== undefined) {
1355      this.maxLines = y.maxLines;
1356    }
1357    if (y.cancel !== undefined) {
1358      this.cancel = y.cancel;
1359    }
1360    if (y.confirm !== undefined) {
1361      this.confirm = y.confirm;
1362    }
1363  }
1364  updateStateVars(x) {
1365  }
1366  purgeVariableDependenciesOnElmtId(w) {
1367    this.__mainWindow.purgeDependencyOnElmtId(w);
1368    this.__fontSize.purgeDependencyOnElmtId(w);
1369    this.__maxLines.purgeDependencyOnElmtId(w);
1370    this.__windowStandardHeight.purgeDependencyOnElmtId(w);
1371  }
1372  aboutToBeDeleted() {
1373    this.__mainWindow.aboutToBeDeleted();
1374    this.__fontSize.aboutToBeDeleted();
1375    this.__maxLines.aboutToBeDeleted();
1376    this.__windowStandardHeight.aboutToBeDeleted();
1377    SubscriberManager.Get().delete(this.id__());
1378    this.aboutToBeDeletedInternal();
1379  }
1380  setController(v) {
1381    this.controller = v;
1382  }
1383  get mainWindow() {
1384    return this.__mainWindow.get();
1385  }
1386  set mainWindow(u) {
1387    this.__mainWindow.set(u);
1388  }
1389  get fontSize() {
1390    return this.__fontSize.get();
1391  }
1392  set fontSize(t) {
1393    this.__fontSize.set(t);
1394  }
1395  get maxLines() {
1396    return this.__maxLines.get();
1397  }
1398  set maxLines(s) {
1399    this.__maxLines.set(s);
1400  }
1401  get windowStandardHeight() {
1402    return this.__windowStandardHeight.get();
1403  }
1404  set windowStandardHeight(r) {
1405    this.__windowStandardHeight.set(r);
1406  }
1407  initialRender() {
1408    this.observeComponentCreation2((d, e) => {
1409      If.create();
1410      if (this.tabTitleBarDialog) {
1411        this.ifElseBranchUpdateFunction(0, () => {
1412          this.observeComponentCreation2((p, q) => {
1413            Column.create();
1414            Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG);
1415            Column.constraintSize({ minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG });
1416            Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK);
1417            Column.shadow(ShadowStyle.OUTER_DEFAULT_LG);
1418            Column.borderRadius({ 'id': -1, 'type': 10002, params: ['sys.float.corner_radius_level10'],
1419              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1420          }, Column);
1421          this.observeComponentCreation2((n, o) => {
1422            Image.create(this.tabTitleDialog.value);
1423            Image.width(IMAGE_SIZE);
1424            Image.height(IMAGE_SIZE);
1425            Image.margin({
1426              top: { 'id': -1, 'type': 10002, params: ['sys.float.padding_level24'],
1427                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1428              bottom: { 'id': -1, 'type': 10002, params: ['sys.float.padding_level8'],
1429                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1430            });
1431            Image.fillColor({ 'id': -1, 'type': 10001, params: ['sys.color.icon_primary'],
1432              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1433          }, Image);
1434          this.observeComponentCreation2((l, m) => {
1435            Column.create();
1436            Column.width('100%');
1437            Column.padding({
1438              left: { 'id': -1, 'type': 10002, params: ['sys.float.padding_level4'],
1439                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1440              right: { 'id': -1, 'type': 10002, params: ['sys.float.padding_level4'],
1441                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1442              bottom: { 'id': -1, 'type': 10002, params: ['sys.float.padding_level12'],
1443                'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
1444            });
1445          }, Column);
1446          this.observeComponentCreation2((j, k) => {
1447            Text.create(this.tabTitleBarDialog);
1448            Text.fontSize(TEXT_EDITABLE_DIALOG);
1449            Text.textOverflow({ overflow: TextOverflow.Ellipsis });
1450            Text.maxLines(this.maxLines);
1451            Text.width('100%');
1452            Text.textAlign(TextAlign.Center);
1453            Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'],
1454              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1455          }, Text);
1456          Text.pop();
1457          Column.pop();
1458          Column.pop();
1459        });
1460      }
1461      else {
1462        this.ifElseBranchUpdateFunction(1, () => {
1463          this.observeComponentCreation2((h, i) => {
1464            Column.create();
1465            Column.width(this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG);
1466            Column.constraintSize({ minHeight: this.fontSize === this.maxFontSize ? MAX_DIALOG : MIN_DIALOG });
1467            Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK);
1468            Column.shadow(ShadowStyle.OUTER_DEFAULT_LG);
1469            Column.borderRadius({ 'id': -1, 'type': 10002, params: ['sys.float.corner_radius_level10'],
1470              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1471            Column.justifyContent(FlexAlign.Center);
1472          }, Column);
1473          this.observeComponentCreation2((f, g) => {
1474            Image.create(this.tabTitleDialog.value);
1475            Image.width(IMAGE_SIZE);
1476            Image.height(IMAGE_SIZE);
1477            Image.fillColor({ 'id': -1, 'type': 10001, params: ['sys.color.icon_primary'],
1478              'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1479          }, Image);
1480          Column.pop();
1481        });
1482      }
1483    }, If);
1484    If.pop();
1485  }
1486  async aboutToAppear() {
1487    let a = this.getUIContext().getHostContext();
1488    this.mainWindowStage = a.windowStage.getMainWindowSync();
1489    let b = this.mainWindowStage.getWindowProperties();
1490    let c = b.windowRect;
1491    if (px2vp(c.height) > this.screenWidth) {
1492      this.maxLines = this.verticalScreenLines;
1493    } else {
1494      this.maxLines = this.horizontalsScreenLines;
1495    }
1496  }
1497  rerender() {
1498    this.updateDirtyElements();
1499  }
1500}
1501export default {
1502  TabTitleBar: TabTitleBar
1503};