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
16let __decorate = (this && this.__decorate) || function (m4, n4, o4, p4) {
17  let q4 = arguments.length;
18  let r4 = q4 < 3 ? n4 : p4 === null ? p4 = Object.getOwnPropertyDescriptor(n4, o4) : p4;
19  let s4;
20  if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') {
21    r4 = Reflect.decorate(m4, n4, o4, p4);
22  } else {
23    for (let t4 = m4.length - 1; t4 >= 0; t4--) {
24      (s4 = m4[t4]) && (r4 = (q4 < 3 ? s4(r4) : q4 > 3 ? s4(n4, o4, r4) : s4(n4, o4)) || r4);
25    }
26  }
27  return q4 > 3 && r4 && Object.defineProperty(n4, o4, r4), r4;
28};
29if (!('finalizeConstruction' in ViewPU.prototype)) {
30  Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { });
31}
32const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
33const LengthUnit = requireNapi('arkui.node').LengthUnit;
34const ColorMetrics = requireNapi('arkui.node').ColorMetrics;
35const DividerModifier = requireNapi('arkui.modifier').DividerModifier;
36const hilog = requireNapi('hilog');
37
38export let ItemState;
39(function (j3) {
40  j3[j3['ENABLE'] = 1] = 'ENABLE';
41  j3[j3['DISABLE'] = 2] = 'DISABLE';
42  j3[j3['ACTIVATE'] = 3] = 'ACTIVATE';
43})(ItemState || (ItemState = {}));
44
45const PUBLIC_MORE = { id: -1, type: 20000, params: ['sys.media.ohos_ic_public_more'], bundleName: '', moduleName: '' };
46const IMAGE_SIZE = '24vp';
47const DEFAULT_TOOLBAR_HEIGHT = 56;
48const TOOLBAR_MAX_LENGTH = 5;
49const MAX_FONT_SIZE = 3.2;
50const DIALOG_IMAGE_SIZE = '64vp';
51const MAX_DIALOG = '256vp';
52const MIN_DIALOG = '216vp';
53const TEXT_TOOLBAR_DIALOG = '18.3fp';
54const FOCUS_BOX_MARGIN = -2;
55const FOCUS_BOX_BORDER_WIDTH = 2;
56
57class ButtonGestureModifier {
58  constructor(m7) {
59    this.fontSize = 1;
60    this.controller = null;
61    this.controller = m7;
62  }
63  applyGesture(j7) {
64    if (this.fontSize >= ButtonGestureModifier.minFontSize) {
65      j7.addGesture(new LongPressGestureHandler({ repeat: false, duration: ButtonGestureModifier.longPressTime })
66        .onAction(() => {
67          if (j7) {
68            this.controller?.open();
69          }
70        })
71        .onActionEnd(() => {
72          this.controller?.close();
73        }));
74    }
75    else {
76      j7.clearGestures();
77    }
78  }
79}
80ButtonGestureModifier.longPressTime = 500;
81ButtonGestureModifier.minFontSize = 1.75;
82
83let ToolBarOption = class ToolBarOption {
84  constructor() {
85    this.content = '';
86    this.action = undefined;
87    this.icon = undefined;
88    this.state = 1;
89    this.iconColor = {
90      'id': -1,
91      'type': 10001,
92      params: ['sys.color.icon_primary'],
93      'bundleName': '',
94      'moduleName': '',
95    };
96    this.activatedIconColor = {
97      'id': -1,
98      'type': 10001,
99      params: ['sys.color.icon_emphasize'],
100      'bundleName': '',
101      'moduleName': '',
102    };
103    this.textColor = {
104      'id': -1,
105      'type': 10001,
106      params: ['sys.color.font_primary'],
107      'bundleName': '',
108      'moduleName': '',
109    };
110    this.activatedTextColor = {
111      'id': -1,
112      'type': 10001,
113      params: ['sys.color.font_emphasize'],
114      'bundleName': '',
115      'moduleName': '',
116    };
117    this.toolBarSymbolOptions = undefined;
118  }
119};
120
121ToolBarOption = __decorate([
122  Observed
123], ToolBarOption);
124export { ToolBarOption };
125let ToolBarOptions = class ToolBarOptions extends Array {
126};
127ToolBarOptions = __decorate([
128  Observed
129], ToolBarOptions);
130export { ToolBarOptions };
131
132export class ToolBarModifier {
133  constructor() {
134    this.backgroundColorValue = {
135      'id': -1,
136      'type': 10001,
137      params: ['sys.color.ohos_id_color_toolbar_bg'],
138      'bundleName': '',
139      'moduleName': '',
140    };
141    this.heightValue = LengthMetrics.vp(DEFAULT_TOOLBAR_HEIGHT);
142    this.stateEffectValue = true;
143    this.paddingValue = LengthMetrics.resource({
144      'id': -1,
145      'type': 10002,
146      params: ['sys.float.padding_level12'],
147      'bundleName': '',
148      'moduleName': '',
149    });
150  }
151  applyNormalAttribute(j4) {
152    j4.backgroundColor(this.backgroundColorValue);
153  }
154  backgroundColor(i4) {
155    this.backgroundColorValue = i4;
156    return this;
157  }
158  height(h4) {
159    this.heightValue = h4;
160    return this;
161  }
162  stateEffect(g4) {
163    this.stateEffectValue = g4;
164    return this;
165  }
166  padding(f4) {
167    this.paddingValue = f4;
168    return this;
169  }
170}
171
172export class ToolBar extends ViewPU {
173  constructor(y6, z6, a7, b7 = -1, c7 = undefined, d7) {
174    super(y6, a7, b7, d7);
175    if (typeof c7 === 'function') {
176      this.paramsGenerator_ = c7;
177    }
178    this.__toolBarList = new SynchedPropertyNesedObjectPU(z6.toolBarList, this, 'toolBarList');
179    this.controller = new TabsController();
180    this.__activateIndex = new SynchedPropertySimpleOneWayPU(z6.activateIndex, this, 'activateIndex');
181    this.__dividerModifier = new SynchedPropertyObjectOneWayPU(z6.dividerModifier, this, 'dividerModifier');
182    this.__toolBarModifier = new SynchedPropertyObjectOneWayPU(z6.toolBarModifier, this, 'toolBarModifier');
183    this.__moreText = new SynchedPropertyObjectOneWayPU(z6.moreText, this, 'moreText');
184    this.__menuContent = new ObservedPropertyObjectPU([], this, 'menuContent');
185    this.__toolBarItemBackground = new ObservedPropertyObjectPU([], this, 'toolBarItemBackground');
186    this.__iconPrimaryColor = new ObservedPropertyObjectPU({
187      'id': -1,
188      'type': 10001,
189      params: ['sys.color.icon_primary'],
190      'bundleName': '',
191      'moduleName': '' },
192      this, 'iconPrimaryColor');
193    this.__iconActivePrimaryColor = new ObservedPropertyObjectPU({
194      'id': -1,
195      'type': 10001,
196      params: ['sys.color.icon_emphasize'],
197      'bundleName': '',
198      'moduleName': '' },
199      this, 'iconActivePrimaryColor');
200    this.__fontPrimaryColor = new ObservedPropertyObjectPU({
201      'id': -1,
202      'type': 10001,
203      params: ['sys.color.font_primary'],
204      'bundleName': '',
205      'moduleName': '' },
206      this, 'fontPrimaryColor');
207    this.__fontActivatedPrimaryColor = new ObservedPropertyObjectPU({
208      'id': -1,
209      'type': 10001,
210      params: ['sys.color.font_emphasize'],
211      'bundleName': '',
212      'moduleName': '' },
213      this, 'fontActivatedPrimaryColor');
214    this.__symbolEffect = new ObservedPropertyObjectPU(new SymbolEffect(), this, 'symbolEffect');
215    this.__fontSize = new ObservedPropertySimplePU(1, this, 'fontSize');
216    this.isFollowSystem = false;
217    this.maxFontSizeScale = 3.2;
218    this.moreIndex = 4;
219    this.moreItem = {
220      content: {
221        'id': -1,
222        'type': 10003,
223        params: ['sys.string.ohos_toolbar_more'],
224        'bundleName': '',
225        'moduleName': '' },
226      icon: PUBLIC_MORE,
227    };
228    this.setInitiallyProvidedValue(z6);
229    this.finalizeConstruction();
230  }
231
232  setInitiallyProvidedValue(x6) {
233    this.__toolBarList.set(x6.toolBarList);
234    if (x6.controller !== undefined) {
235      this.controller = x6.controller;
236    }
237    if (x6.activateIndex === undefined) {
238      this.__activateIndex.set(-1);
239    }
240    if (x6.dividerModifier === undefined) {
241      this.__dividerModifier.set(new DividerModifier());
242    }
243    if (x6.toolBarModifier === undefined) {
244      this.__toolBarModifier.set(new ToolBarModifier()
245        .padding(LengthMetrics.resource({
246          'id': -1, 'type': 10002, params: ['sys.float.padding_level12'], 'bundleName': '', 'moduleName': '' }))
247        .stateEffect(true)
248        .height(LengthMetrics.vp(DEFAULT_TOOLBAR_HEIGHT))
249        .backgroundColor('sys.color.ohos_id_color_toolbar_bg'));
250    }
251    if (x6.moreText === undefined) {
252      this.__moreText.set({
253        'id': -1, 'type': 10003, params: ['sys.string.ohos_toolbar_more'],
254        'bundleName': '', 'moduleName': '',
255      });
256    }
257    if (x6.menuContent !== undefined) {
258      this.menuContent = x6.menuContent;
259    }
260    if (x6.toolBarItemBackground !== undefined) {
261      this.toolBarItemBackground = x6.toolBarItemBackground;
262    }
263    if (x6.iconPrimaryColor !== undefined) {
264      this.iconPrimaryColor = x6.iconPrimaryColor;
265    }
266    if (x6.iconActivePrimaryColor !== undefined) {
267      this.iconActivePrimaryColor = x6.iconActivePrimaryColor;
268    }
269    if (x6.fontPrimaryColor !== undefined) {
270      this.fontPrimaryColor = x6.fontPrimaryColor;
271    }
272    if (x6.fontActivatedPrimaryColor !== undefined) {
273      this.fontActivatedPrimaryColor = x6.fontActivatedPrimaryColor;
274    }
275    if (x6.symbolEffect !== undefined) {
276      this.symbolEffect = x6.symbolEffect;
277    }
278    if (x6.fontSize !== undefined) {
279      this.fontSize = x6.fontSize;
280    }
281    if (x6.isFollowSystem !== undefined) {
282      this.isFollowSystem = x6.isFollowSystem;
283    }
284    if (x6.maxFontSizeScale !== undefined) {
285      this.maxFontSizeScale = x6.maxFontSizeScale;
286    }
287    if (x6.moreIndex !== undefined) {
288      this.moreIndex = x6.moreIndex;
289    }
290    if (x6.moreItem !== undefined) {
291      this.moreItem = x6.moreItem;
292    }
293  }
294
295  updateStateVars(w6) {
296    this.__toolBarList.set(w6.toolBarList);
297    this.__activateIndex.reset(w6.activateIndex);
298    this.__dividerModifier.reset(w6.dividerModifier);
299    this.__toolBarModifier.reset(w6.toolBarModifier);
300    this.__moreText.reset(w6.moreText);
301  }
302
303  purgeVariableDependenciesOnElmtId(v6) {
304    this.__toolBarList.purgeDependencyOnElmtId(v6);
305    this.__activateIndex.purgeDependencyOnElmtId(v6);
306    this.__dividerModifier.purgeDependencyOnElmtId(v6);
307    this.__toolBarModifier.purgeDependencyOnElmtId(v6);
308    this.__moreText.purgeDependencyOnElmtId(v6);
309    this.__menuContent.purgeDependencyOnElmtId(v6);
310    this.__toolBarItemBackground.purgeDependencyOnElmtId(v6);
311    this.__iconPrimaryColor.purgeDependencyOnElmtId(v6);
312    this.__iconActivePrimaryColor.purgeDependencyOnElmtId(v6);
313    this.__fontPrimaryColor.purgeDependencyOnElmtId(v6);
314    this.__fontActivatedPrimaryColor.purgeDependencyOnElmtId(v6);
315    this.__symbolEffect.purgeDependencyOnElmtId(v6);
316    this.__fontSize.purgeDependencyOnElmtId(v6);
317  }
318
319  aboutToBeDeleted() {
320    this.__toolBarList.aboutToBeDeleted();
321    this.__activateIndex.aboutToBeDeleted();
322    this.__dividerModifier.aboutToBeDeleted();
323    this.__toolBarModifier.aboutToBeDeleted();
324    this.__moreText.aboutToBeDeleted();
325    this.__menuContent.aboutToBeDeleted();
326    this.__toolBarItemBackground.aboutToBeDeleted();
327    this.__iconPrimaryColor.aboutToBeDeleted();
328    this.__iconActivePrimaryColor.aboutToBeDeleted();
329    this.__fontPrimaryColor.aboutToBeDeleted();
330    this.__fontActivatedPrimaryColor.aboutToBeDeleted();
331    this.__symbolEffect.aboutToBeDeleted();
332    this.__fontSize.aboutToBeDeleted();
333    SubscriberManager.Get().delete(this.id__());
334    this.aboutToBeDeletedInternal();
335  }
336
337  get toolBarList() {
338    return this.__toolBarList.get();
339  }
340
341  get activateIndex() {
342    return this.__activateIndex.get();
343  }
344  set activateIndex(u6) {
345    this.__activateIndex.set(u6);
346  }
347
348  get dividerModifier() {
349    return this.__dividerModifier.get();
350  }
351  set dividerModifier(t6) {
352    this.__dividerModifier.set(t6);
353  }
354
355  get toolBarModifier() {
356    return this.__toolBarModifier.get();
357  }
358  set toolBarModifier(s6) {
359    this.__toolBarModifier.set(s6);
360  }
361
362  get moreText() {
363    return this.__moreText.get();
364  }
365  set moreText(r6) {
366    this.__moreText.set(r6);
367  }
368
369  get menuContent() {
370    return this.__menuContent.get();
371  }
372  set menuContent(q6) {
373    this.__menuContent.set(q6);
374  }
375
376  get toolBarItemBackground() {
377    return this.__toolBarItemBackground.get();
378  }
379
380  set toolBarItemBackground(p6) {
381    this.__toolBarItemBackground.set(p6);
382  }
383
384  get iconPrimaryColor() {
385    return this.__iconPrimaryColor.get();
386  }
387
388  set iconPrimaryColor(o6) {
389    this.__iconPrimaryColor.set(o6);
390  }
391
392  get iconActivePrimaryColor() {
393    return this.__iconActivePrimaryColor.get();
394  }
395  set iconActivePrimaryColor(n6) {
396    this.__iconActivePrimaryColor.set(n6);
397  }
398
399  get fontPrimaryColor() {
400    return this.__fontPrimaryColor.get();
401  }
402  set fontPrimaryColor(m6) {
403    this.__fontPrimaryColor.set(m6);
404  }
405
406  get fontActivatedPrimaryColor() {
407    return this.__fontActivatedPrimaryColor.get();
408  }
409  set fontActivatedPrimaryColor(l6) {
410    this.__fontActivatedPrimaryColor.set(l6);
411  }
412
413  get symbolEffect() {
414    return this.__symbolEffect.get();
415  }
416  set symbolEffect(k6) {
417    this.__symbolEffect.set(k6);
418  }
419
420  get fontSize() {
421    return this.__fontSize.get();
422  }
423
424  set fontSize(j6) {
425    this.__fontSize.set(j6);
426  }
427
428  onWillApplyTheme(i6) {
429    this.iconPrimaryColor = i6.colors.iconPrimary;
430    this.iconActivePrimaryColor = i6.colors.iconEmphasize;
431    this.fontPrimaryColor = i6.colors.fontPrimary;
432    this.fontActivatedPrimaryColor = i6.colors.fontEmphasize;
433  }
434
435  MoreTabBuilder(s5, t5 = null) {
436    this.observeComponentCreation2((e6, f6) => {
437      Button.createWithChild({ type: ButtonType.Normal, stateEffect: false });
438      Button.focusable(true);
439      Button.focusOnTouch(true);
440      Button.focusBox({
441        margin: LengthMetrics.vp(FOCUS_BOX_MARGIN),
442        strokeWidth: LengthMetrics.vp(FOCUS_BOX_BORDER_WIDTH),
443        strokeColor: ColorMetrics.resourceColor({
444          'id': -1,
445          'type': 10001,
446          params: ['sys.color.ohos_id_color_focused_outline'],
447          'bundleName': '',
448          'moduleName': '',
449        })
450      });
451      Button.width('100%');
452      Button.height('100%');
453      Button.bindMenu(ObservedObject.GetRawObject(this.menuContent),
454        { placement: Placement.TopRight, offset: { x: -12, y: -10 } });
455      Button.borderRadius({
456        'id': -1,
457        'type': 10002,
458        params: ['sys.float.ohos_id_corner_radius_clicked'],
459        'bundleName': '',
460        'moduleName': '',
461      });
462      Button.backgroundColor(this.toolBarItemBackground[s5]);
463      Button.onHover((h6) => {
464        if (h6) {
465          this.toolBarItemBackground[s5] = {
466            'id': -1,
467            'type': 10001,
468            params: ['sys.color.ohos_id_color_hover'],
469            'bundleName': '',
470            'moduleName': '',
471          };
472        }
473        else {
474          this.toolBarItemBackground[s5] = Color.Transparent;
475        }
476      });
477      ViewStackProcessor.visualState('pressed');
478      Button.backgroundColor((!this.toolBarModifier.stateEffectValue) ?
479      this.toolBarItemBackground[s5] : {
480          'id': -1,
481          'type': 10001,
482          params: ['sys.color.ohos_id_color_click_effect'],
483          'bundleName': '',
484          'moduleName': '',
485        });
486      ViewStackProcessor.visualState();
487      Button.gestureModifier(this.getItemGestureModifier(this.moreItem, s5));
488    }, Button);
489    this.observeComponentCreation2((c6, d6) => {
490      Column.create();
491      Column.width('100%');
492      Column.height('100%');
493      Column.justifyContent(FlexAlign.Center);
494      Column.padding({
495        start: LengthMetrics.resource({
496          'id': -1,
497          'type': 10002,
498          params: ['sys.float.padding_level2'],
499          'bundleName': '',
500          'moduleName': '',
501        }),
502        end: LengthMetrics.resource({
503          'id': -1,
504          'type': 10002,
505          params: ['sys.float.padding_level2'],
506          'bundleName': '',
507          'moduleName': '',
508        }),
509      });
510      Column.borderRadius({
511        'id': -1,
512        'type': 10002,
513        params: ['sys.float.ohos_id_corner_radius_clicked'],
514        'bundleName': '',
515        'moduleName': '',
516      });
517    }, Column);
518    this.observeComponentCreation2((a6, b6) => {
519      Image.create(PUBLIC_MORE);
520      Image.width(IMAGE_SIZE);
521      Image.height(IMAGE_SIZE);
522      Image.fillColor(ObservedObject.GetRawObject(this.iconPrimaryColor));
523      Image.margin({ bottom: {
524        'id': -1,
525        'type': 10002,
526        params: ['sys.float.padding_level1'],
527        'bundleName': '',
528        'moduleName': '',
529      } });
530      Image.objectFit(ImageFit.Contain);
531      Image.draggable(false);
532    }, Image);
533    this.observeComponentCreation2((y5, z5) => {
534      Text.create(this.moreText);
535      Text.fontColor(ObservedObject.GetRawObject(this.fontPrimaryColor));
536      Text.fontSize({
537        'id': -1,
538        'type': 10002,
539        params: ['sys.float.ohos_id_text_size_caption'],
540        'bundleName': '',
541        'moduleName': '',
542      });
543      Text.fontWeight(FontWeight.Medium);
544      Text.maxLines(1);
545      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
546      Text.textAlign(TextAlign.Center);
547      Text.focusable(true);
548      Text.focusOnTouch(true);
549    }, Text);
550    Text.pop();
551    Column.pop();
552    Button.pop();
553  }
554
555  TabBuilder(t4, u4 = null) {
556    this.observeComponentCreation2((n5, o5) => {
557      Button.createWithChild({ type: ButtonType.Normal, stateEffect: false });
558      Button.enabled(this.toolBarList[t4]?.state !== ItemState.DISABLE);
559      Button.width('100%');
560      Button.height('100%');
561      Button.borderRadius({
562        'id': -1,
563        'type': 10002,
564        params: ['sys.float.ohos_id_corner_radius_clicked'],
565        'bundleName': '',
566        'moduleName': '',
567      });
568      Button.focusable(!(this.toolBarList[t4]?.state === ItemState.DISABLE));
569      Button.focusOnTouch(!(this.toolBarList[t4]?.state === ItemState.DISABLE));
570      Button.focusBox({
571        margin: LengthMetrics.vp(FOCUS_BOX_MARGIN),
572        strokeWidth: LengthMetrics.vp(FOCUS_BOX_BORDER_WIDTH),
573        strokeColor: ColorMetrics.resourceColor({
574          'id': -1,
575          'type': 10001,
576          params: ['sys.color.ohos_id_color_focused_outline'],
577          'bundleName': '',
578          'moduleName': '',
579        })
580      });
581      Button.backgroundColor(this.toolBarItemBackground[t4]);
582      Button.onHover((r5) => {
583        if (r5 && this.toolBarList[t4]?.state !== ItemState.DISABLE) {
584          this.toolBarItemBackground[t4] = {
585            'id': -1,
586            'type': 10001,
587            params: ['sys.color.ohos_id_color_hover'],
588            'bundleName': '',
589            'moduleName': '',
590          };
591        }
592        else {
593          this.toolBarItemBackground[t4] = Color.Transparent;
594        }
595      });
596      ViewStackProcessor.visualState('pressed');
597      Button.backgroundColor((this.toolBarList[t4]?.state === ItemState.DISABLE) ||
598        (!this.toolBarModifier.stateEffectValue) ?
599      this.toolBarItemBackground[t4] : {
600          'id': -1,
601          'type': 10001,
602          params: ['sys.color.ohos_id_color_click_effect'],
603          'bundleName': '',
604          'moduleName': '',
605        });
606      ViewStackProcessor.visualState();
607      Button.onClick(() => {
608        this.clickEventAction(t4);
609      });
610      Button.gestureModifier(this.getItemGestureModifier(this.toolBarList[t4], t4));
611    }, Button);
612    this.observeComponentCreation2((l5, m5) => {
613      Column.create();
614      Column.justifyContent(FlexAlign.Center);
615      Column.width('100%');
616      Column.height('100%');
617      Column.borderRadius({
618        'id': -1,
619        'type': 10002,
620        params: ['sys.float.ohos_id_corner_radius_clicked'],
621        'bundleName': '',
622        'moduleName': '',
623      });
624      Column.padding({
625        start: LengthMetrics.resource({
626          'id': -1,
627          'type': 10002,
628          params: ['sys.float.padding_level2'],
629          'bundleName': '',
630          'moduleName': '',
631        }),
632        end: LengthMetrics.resource({
633          'id': -1,
634          'type': 10002,
635          params: ['sys.float.padding_level2'],
636          'bundleName': '',
637          'moduleName': '',
638        }),
639      });
640    }, Column);
641    this.observeComponentCreation2((b5, c5) => {
642      If.create();
643      if (this.toolBarList[t4]?.toolBarSymbolOptions?.normal ||
644        this.toolBarList[t4]?.toolBarSymbolOptions?.activated) {
645        this.ifElseBranchUpdateFunction(0, () => {
646          this.observeComponentCreation2((j5, k5) => {
647            SymbolGlyph.create();
648            SymbolGlyph.fontSize(IMAGE_SIZE);
649            SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false);
650            SymbolGlyph.attributeModifier.bind(this)(this.getToolBarSymbolModifier(t4));
651            SymbolGlyph.margin({ bottom: {
652              'id': -1,
653              'type': 10002,
654              params: ['sys.float.padding_level1'],
655              'bundleName': '',
656              'moduleName': '' } });
657          }, SymbolGlyph);
658        });
659      }
660      else {
661        this.ifElseBranchUpdateFunction(1, () => {
662          this.observeComponentCreation2((f5, g5) => {
663            Image.create(this.toolBarList[t4]?.icon);
664            Image.width(IMAGE_SIZE);
665            Image.height(IMAGE_SIZE);
666            Image.fillColor(this.getIconColor(t4));
667            Image.margin({ bottom: {
668              'id': -1,
669              'type': 10002,
670              params: ['sys.float.padding_level1'],
671              'bundleName': '',
672              'moduleName': '' } });
673            Image.objectFit(ImageFit.Contain);
674            Image.draggable(false);
675          }, Image);
676        });
677      }
678    }, If);
679    If.pop();
680    this.observeComponentCreation2((z4, a5) => {
681      Text.create(this.toolBarList[t4]?.content);
682      Text.fontColor(this.getTextColor(t4));
683      Text.fontSize({
684        'id': -1,
685        'type': 10002,
686        params: ['sys.float.ohos_id_text_size_caption'],
687        'bundleName': '',
688        'moduleName': '',
689      });
690      Text.maxFontSize({
691        'id': -1,
692        'type': 10002,
693        params: ['sys.float.ohos_id_text_size_caption'],
694        'bundleName': '',
695        'moduleName': '',
696      });
697      Text.minFontSize(9);
698      Text.fontWeight(FontWeight.Medium);
699      Text.maxLines(1);
700      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
701      Text.textAlign(TextAlign.Center);
702      Text.focusable(!(this.toolBarList[t4]?.state === ItemState.DISABLE));
703      Text.focusOnTouch(!(this.toolBarList[t4]?.state === ItemState.DISABLE));
704    }, Text);
705    Text.pop();
706    Column.pop();
707    Button.pop();
708  }
709
710  getFontSizeScale() {
711    let r4 = this.getUIContext();
712    let s4 = r4.getHostContext()?.config?.fontSizeScale ?? 1;
713    if (!this.isFollowSystem) {
714      return 1;
715    }
716    else {
717      return Math.min(s4, this.maxFontSizeScale);
718    }
719  }
720
721  getToolBarSymbolModifier(q4) {
722    if ((!this.toolBarList[q4]?.toolBarSymbolOptions?.activated) &&
723      (!this.toolBarList[q4]?.toolBarSymbolOptions?.normal)) {
724      return undefined;
725    }
726    if (this.activateIndex === q4 && (this.toolBarList[q4]?.state === ItemState.ACTIVATE)) {
727      return this.toolBarList[q4]?.toolBarSymbolOptions?.activated;
728    }
729    return this.toolBarList[q4]?.toolBarSymbolOptions?.normal;
730  }
731
732  getIconColor(p4) {
733    if (this.activateIndex === p4 && (this.toolBarList[p4]?.state === ItemState.ACTIVATE)) {
734      return this.toolBarList[p4]?.activatedIconColor ?? this.iconActivePrimaryColor;
735    }
736    return this.toolBarList[p4]?.iconColor ?? this.iconPrimaryColor;
737  }
738
739  getTextColor(o4) {
740    if (this.activateIndex === o4 && (this.toolBarList[o4]?.state === ItemState.ACTIVATE)) {
741      return this.toolBarList[o4]?.activatedTextColor ?? this.fontActivatedPrimaryColor;
742    }
743    return this.toolBarList[o4]?.textColor ?? this.fontPrimaryColor;
744  }
745
746  toLengthString(l4) {
747    if (l4 === void (0)) {
748      return '';
749    }
750    const m4 = l4.value;
751    let n4 = '';
752    switch (l4.unit) {
753      case LengthUnit.PX:
754        n4 = `${m4}px`;
755        break;
756      case LengthUnit.FP:
757        n4 = `${m4}fp`;
758        break;
759      case LengthUnit.LPX:
760        n4 = `${m4}lpx`;
761        break;
762      case LengthUnit.PERCENT:
763        n4 = `${m4 * 100}%`;
764        break;
765      case LengthUnit.VP:
766        n4 = `${m4}vp`;
767        break;
768      default:
769        n4 = `${m4}vp`;
770        break;
771    }
772    return n4;
773  }
774
775  clickEventAction(j4) {
776    let k4 = this.toolBarList[j4];
777    if (k4.state === ItemState.ACTIVATE) {
778      if (this.activateIndex === j4) {
779        this.activateIndex = -1;
780      }
781      else {
782        this.activateIndex = j4;
783      }
784    }
785    if (!(k4.state === ItemState.DISABLE)) {
786      k4.action && k4.action();
787    }
788  }
789
790  getItemGestureModifier(c4, d4) {
791    let e4 = new ButtonGestureModifier(null);
792    if (c4?.icon || c4?.toolBarSymbolOptions?.activated || c4?.toolBarSymbolOptions?.normal) {
793      e4 = new ButtonGestureModifier(new CustomDialogController({
794        builder: () => {
795          let f4 = new ToolBarDialog(this, {
796            itemDialog: c4,
797            fontSize: this.fontSize,
798            itemSymbolModifier: this.getToolBarSymbolModifier(d4),
799          }, undefined, -1, () => { },
800            { page: 'library2/src/main/ets/components/mainpage/MainPage.ets', line: 375, col: 18 });
801          f4.setController();
802          ViewPU.create(f4);
803          let g4 = () => {
804            return {
805              itemDialog: c4,
806              fontSize: this.fontSize,
807              itemSymbolModifier: this.getToolBarSymbolModifier(d4)
808            };
809          };
810          f4.paramsGenerator_ = g4;
811        },
812        maskColor: Color.Transparent,
813        isModal: true,
814        customStyle: true
815      }, this));
816      e4.fontSize = this.fontSize;
817    }
818    return e4;
819  }
820
821  refreshData() {
822    this.menuContent = [];
823    for (let b4 = 0; b4 < this.toolBarList.length; b4++) {
824      if (b4 >= this.moreIndex && this.toolBarList.length > TOOLBAR_MAX_LENGTH) {
825        this.menuContent[b4 - this.moreIndex] = {
826          value: this.toolBarList[b4].content,
827          action: this.toolBarList[b4].action,
828          enabled: this.toolBarList[b4].state !== ItemState.DISABLE,
829        };
830      }
831      else {
832        this.menuContent = [];
833      }
834      this.toolBarItemBackground[b4] = this.toolBarItemBackground[b4] ?? Color.Transparent;
835    }
836    return true;
837  }
838
839  onMeasureSize(u3, v3, w3) {
840    this.fontSize = this.getFontSizeScale();
841    let x3 = { height: 0, width: 0 };
842    v3.forEach((z3) => {
843      let a4 = z3.measure(w3);
844      x3.width = a4.width;
845      x3.height = a4.height;
846    });
847    return x3;
848  }
849
850  aboutToAppear() {
851    this.refreshData();
852    try {
853      this.isFollowSystem = this.getUIContext()?.isFollowingSystemFontScale();
854      this.maxFontSizeScale = this.getUIContext()?.getMaxFontScale();
855    }
856    catch (r3) {
857      let s3 = r3?.code;
858      let t3 = r3?.message;
859      hilog.error(0x3900, 'Ace', `Faild to toolBar getMaxFontScale, code: ${s3}, message: ${t3}`);
860    }
861  }
862
863  initialRender() {
864    this.observeComponentCreation2((p3, q3) => {
865      Column.create();
866      Column.attributeModifier.bind(this)(ObservedObject.GetRawObject(this.toolBarModifier));
867    }, Column);
868    this.observeComponentCreation2((n3, o3) => {
869      Tabs.create({ controller: this.controller });
870      Tabs.visibility(Visibility.None);
871    }, Tabs);
872    Tabs.pop();
873    this.observeComponentCreation2((l3, m3) => {
874      Divider.create();
875      Divider.width('100%');
876      Divider.height(1);
877      Divider.attributeModifier.bind(this)(ObservedObject.GetRawObject(this.dividerModifier));
878    }, Divider);
879    this.observeComponentCreation2((j3, k3) => {
880      Row.create();
881      Row.justifyContent(FlexAlign.Center);
882      Row.constraintSize({
883        minHeight: this.toLengthString(this.toolBarModifier.heightValue),
884        maxHeight: this.toLengthString(this.toolBarModifier.heightValue),
885      });
886      Row.width('100%');
887      Row.height(this.toLengthString(this.toolBarModifier.heightValue));
888      Row.padding({
889        start: this.toolBarList.length < TOOLBAR_MAX_LENGTH ? this.toolBarModifier.paddingValue :
890        LengthMetrics.resource({
891          'id': -1, 'type': 10002,
892          params: ['sys.float.padding_level0'],
893          'bundleName': '',
894          'moduleName': '' }),
895        end: this.toolBarList.length < TOOLBAR_MAX_LENGTH ? this.toolBarModifier.paddingValue :
896        LengthMetrics.resource({
897          'id': -1, 'type': 10002,
898          params: ['sys.float.padding_level0'],
899          'bundleName': '',
900          'moduleName': '' }),
901      });
902    }, Row);
903    this.observeComponentCreation2((u2, v2) => {
904      ForEach.create();
905      const w2 = (y2, z2) => {
906        const a3 = y2;
907        this.observeComponentCreation2((c3, d3) => {
908          If.create();
909          if (this.toolBarList.length <= TOOLBAR_MAX_LENGTH || z2 < this.moreIndex) {
910            this.ifElseBranchUpdateFunction(0, () => {
911              this.observeComponentCreation2((h3, i3) => {
912                Row.create();
913                Row.height('100%');
914                Row.flexShrink(1);
915              }, Row);
916              this.TabBuilder.bind(this)(z2);
917              Row.pop();
918            });
919          }
920          else {
921            this.ifElseBranchUpdateFunction(1, () => {
922            });
923          }
924        }, If);
925        If.pop();
926      };
927      this.forEachUpdateFunction(u2, this.toolBarList, w2, undefined, true, false);
928    }, ForEach);
929    ForEach.pop();
930    this.observeComponentCreation2((n2, o2) => {
931      If.create();
932      if (this.refreshData() && this.toolBarList.length > TOOLBAR_MAX_LENGTH) {
933        this.ifElseBranchUpdateFunction(0, () => {
934          this.observeComponentCreation2((s2, t2) => {
935            Row.create();
936            Row.height('100%');
937            Row.flexShrink(1);
938          }, Row);
939          this.MoreTabBuilder.bind(this)(this.moreIndex);
940          Row.pop();
941        });
942      }
943      else {
944        this.ifElseBranchUpdateFunction(1, () => {
945        });
946      }
947    }, If);
948    If.pop();
949    Row.pop();
950    Column.pop();
951  }
952
953  rerender() {
954    this.updateDirtyElements();
955  }
956}
957
958class ToolBarDialog extends ViewPU {
959  constructor(r1, s1, t1, u1 = -1, v1 = undefined, w1) {
960    super(r1, t1, u1, w1);
961    if (typeof v1 === 'function') {
962      this.paramsGenerator_ = v1;
963    }
964    this.itemDialog = {
965      icon: undefined,
966      content: '',
967    };
968    this.itemSymbolModifier = undefined;
969    this.mainWindowStage = undefined;
970    this.controller = undefined;
971    this.screenWidth = 640;
972    this.verticalScreenLines = 6;
973    this.horizontalsScreenLines = 1;
974    this.cancel = () => {
975    };
976    this.confirm = () => {
977    };
978    this.__mainWindow = this.createStorageLink('mainWindow', undefined, 'mainWindow');
979    this.__fontSize = new SynchedPropertySimpleOneWayPU(s1.fontSize, this, 'fontSize');
980    this.__maxLines = new ObservedPropertySimplePU(1, this, 'maxLines');
981    this.__windowStandardHeight = this.createStorageProp('windowStandardHeight', 0, 'windowStandardHeight');
982    this.__symbolEffect = new ObservedPropertyObjectPU(new SymbolEffect(), this, 'symbolEffect');
983    this.setInitiallyProvidedValue(s1);
984    this.finalizeConstruction();
985  }
986
987  setInitiallyProvidedValue(q1) {
988    if (q1.itemDialog !== undefined) {
989      this.itemDialog = q1.itemDialog;
990    }
991    if (q1.itemSymbolModifier !== undefined) {
992      this.itemSymbolModifier = q1.itemSymbolModifier;
993    }
994    if (q1.mainWindowStage !== undefined) {
995      this.mainWindowStage = q1.mainWindowStage;
996    }
997    if (q1.controller !== undefined) {
998      this.controller = q1.controller;
999    }
1000    if (q1.screenWidth !== undefined) {
1001      this.screenWidth = q1.screenWidth;
1002    }
1003    if (q1.verticalScreenLines !== undefined) {
1004      this.verticalScreenLines = q1.verticalScreenLines;
1005    }
1006    if (q1.horizontalsScreenLines !== undefined) {
1007      this.horizontalsScreenLines = q1.horizontalsScreenLines;
1008    }
1009    if (q1.cancel !== undefined) {
1010      this.cancel = q1.cancel;
1011    }
1012    if (q1.confirm !== undefined) {
1013      this.confirm = q1.confirm;
1014    }
1015    if (q1.fontSize === undefined) {
1016      this.__fontSize.set(1);
1017    }
1018    if (q1.maxLines !== undefined) {
1019      this.maxLines = q1.maxLines;
1020    }
1021    if (q1.symbolEffect !== undefined) {
1022      this.symbolEffect = q1.symbolEffect;
1023    }
1024  }
1025
1026  updateStateVars(p1) {
1027    this.__fontSize.reset(p1.fontSize);
1028  }
1029
1030  purgeVariableDependenciesOnElmtId(o1) {
1031    this.__mainWindow.purgeDependencyOnElmtId(o1);
1032    this.__fontSize.purgeDependencyOnElmtId(o1);
1033    this.__maxLines.purgeDependencyOnElmtId(o1);
1034    this.__windowStandardHeight.purgeDependencyOnElmtId(o1);
1035    this.__symbolEffect.purgeDependencyOnElmtId(o1);
1036  }
1037
1038  aboutToBeDeleted() {
1039    this.__mainWindow.aboutToBeDeleted();
1040    this.__fontSize.aboutToBeDeleted();
1041    this.__maxLines.aboutToBeDeleted();
1042    this.__windowStandardHeight.aboutToBeDeleted();
1043    this.__symbolEffect.aboutToBeDeleted();
1044    SubscriberManager.Get().delete(this.id__());
1045    this.aboutToBeDeletedInternal();
1046  }
1047
1048  setController(n1) {
1049    this.controller = n1;
1050  }
1051
1052  get mainWindow() {
1053    return this.__mainWindow.get();
1054  }
1055  set mainWindow(m1) {
1056    this.__mainWindow.set(m1);
1057  }
1058
1059  get fontSize() {
1060    return this.__fontSize.get();
1061  }
1062  set fontSize(l1) {
1063    this.__fontSize.set(l1);
1064  }
1065
1066  get maxLines() {
1067    return this.__maxLines.get();
1068  }
1069  set maxLines(k1) {
1070    this.__maxLines.set(k1);
1071  }
1072
1073  get windowStandardHeight() {
1074    return this.__windowStandardHeight.get();
1075  }
1076  set windowStandardHeight(j1) {
1077    this.__windowStandardHeight.set(j1);
1078  }
1079
1080  get symbolEffect() {
1081    return this.__symbolEffect.get();
1082  }
1083  set symbolEffect(i1) {
1084    this.__symbolEffect.set(i1);
1085  }
1086
1087  initialRender() {
1088    this.observeComponentCreation2((e, f) => {
1089      If.create();
1090      if (this.itemDialog.content) {
1091        this.ifElseBranchUpdateFunction(0, () => {
1092          this.observeComponentCreation2((g1, h1) => {
1093            Column.create();
1094            Column.width(this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG);
1095            Column.constraintSize({ minHeight: this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG });
1096            Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK);
1097            Column.shadow(ShadowStyle.OUTER_DEFAULT_LG);
1098            Column.borderRadius(({
1099              'id': -1,
1100              'type': 10002,
1101              params: ['sys.float.corner_radius_level10'],
1102              'bundleName': '',
1103              'moduleName': '',
1104            }));
1105          }, Column);
1106          this.observeComponentCreation2((w, x) => {
1107            If.create();
1108            if (this.itemDialog.toolBarSymbolOptions?.normal ||
1109              this.itemDialog.toolBarSymbolOptions?.activated) {
1110              this.ifElseBranchUpdateFunction(0, () => {
1111                this.observeComponentCreation2((e1, f1) => {
1112                  SymbolGlyph.create();
1113                  SymbolGlyph.attributeModifier.bind(this)(this.itemSymbolModifier);
1114                  SymbolGlyph.symbolEffect(ObservedObject.GetRawObject(this.symbolEffect), false);
1115                  SymbolGlyph.fontColor([{
1116                    'id': -1,
1117                    'type': 10001,
1118                    params: ['sys.color.icon_primary'],
1119                    'bundleName': '',
1120                    'moduleName': '',
1121                  }]);
1122                  SymbolGlyph.fontSize(DIALOG_IMAGE_SIZE);
1123                  SymbolGlyph.margin({
1124                    top: {
1125                      'id': -1,
1126                      'type': 10002,
1127                      params: ['sys.float.padding_level24'],
1128                      'bundleName': '',
1129                      'moduleName': '',
1130                    },
1131                    bottom: {
1132                      'id': -1,
1133                      'type': 10002,
1134                      params: ['sys.float.padding_level8'],
1135                      'bundleName': '',
1136                      'moduleName': '',
1137                    },
1138                  });
1139                }, SymbolGlyph);
1140              });
1141            }
1142            else {
1143              this.ifElseBranchUpdateFunction(1, () => {
1144                this.observeComponentCreation2((a1, b1) => {
1145                  Image.create(this.itemDialog.icon);
1146                  Image.width(DIALOG_IMAGE_SIZE);
1147                  Image.height(DIALOG_IMAGE_SIZE);
1148                  Image.margin({
1149                    top: {
1150                      'id': -1,
1151                      'type': 10002,
1152                      params: ['sys.float.padding_level24'],
1153                      'bundleName': '',
1154                      'moduleName': '',
1155                    },
1156                    bottom: {
1157                      'id': -1,
1158                      'type': 10002,
1159                      params: ['sys.float.padding_level8'],
1160                      'bundleName': '',
1161                      'moduleName': '',
1162                    },
1163                  });
1164                  Image.fillColor({
1165                    'id': -1,
1166                    'type': 10001,
1167                    params: ['sys.color.icon_primary'],
1168                    'bundleName': '',
1169                    'moduleName': '',
1170                  });
1171                }, Image);
1172              });
1173            }
1174          }, If);
1175          If.pop();
1176          this.observeComponentCreation2((u, v) => {
1177            Column.create();
1178            Column.width('100%');
1179            Column.padding({
1180              left: {
1181                'id': -1,
1182                'type': 10002,
1183                params: ['sys.float.padding_level4'],
1184                'bundleName': '',
1185                'moduleName': '',
1186              },
1187              right: {
1188                'id': -1,
1189                'type': 10002,
1190                params: ['sys.float.padding_level4'],
1191                'bundleName': '',
1192                'moduleName': '',
1193              },
1194              bottom: {
1195                'id': -1,
1196                'type': 10002,
1197                params: ['sys.float.padding_level12'],
1198                'bundleName': '',
1199                'moduleName': '',
1200              },
1201            });
1202          }, Column);
1203          this.observeComponentCreation2((s, t) => {
1204            Text.create(this.itemDialog.content);
1205            Text.fontSize(TEXT_TOOLBAR_DIALOG);
1206            Text.textOverflow({ overflow: TextOverflow.Ellipsis });
1207            Text.maxLines(this.maxLines);
1208            Text.width('100%');
1209            Text.textAlign(TextAlign.Center);
1210            Text.fontColor({
1211              'id': -1,
1212              'type': 10001,
1213              params: ['sys.color.font_primary'],
1214              'bundleName': '',
1215              'moduleName': '',
1216            });
1217          }, Text);
1218          Text.pop();
1219          Column.pop();
1220          Column.pop();
1221        });
1222      }
1223      else {
1224        this.ifElseBranchUpdateFunction(1, () => {
1225          this.observeComponentCreation2((l, m) => {
1226            Column.create();
1227            Column.width(this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG);
1228            Column.constraintSize({ minHeight: this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG });
1229            Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK);
1230            Column.shadow(ShadowStyle.OUTER_DEFAULT_LG);
1231            Column.borderRadius(({
1232              'id': -1,
1233              'type': 10002,
1234              params: ['sys.float.corner_radius_level10'],
1235              'bundleName': '',
1236              'moduleName': '',
1237            }));
1238            Column.justifyContent(FlexAlign.Center);
1239          }, Column);
1240          this.observeComponentCreation2((j, k) => {
1241            Image.create(this.itemDialog.icon);
1242            Image.width(DIALOG_IMAGE_SIZE);
1243            Image.height(DIALOG_IMAGE_SIZE);
1244            Image.fillColor({
1245              'id': -1,
1246              'type': 10001,
1247              params: ['sys.color.icon_primary'],
1248              'bundleName': '',
1249              'moduleName': '',
1250            });
1251          }, Image);
1252          Column.pop();
1253        });
1254      }
1255    }, If);
1256    If.pop();
1257  }
1258
1259  async aboutToAppear() {
1260    let a = this.getUIContext().getHostContext();
1261    this.mainWindowStage = a.windowStage.getMainWindowSync();
1262    let b = this.mainWindowStage.getWindowProperties();
1263    let c = b.windowRect;
1264    if (px2vp(c.height) > this.screenWidth) {
1265      this.maxLines = this.verticalScreenLines;
1266    }
1267    else {
1268      this.maxLines = this.horizontalsScreenLines;
1269    }
1270  }
1271
1272  rerender() {
1273    this.updateDirtyElements();
1274  }
1275}
1276
1277export default { ToolBarOptions, ToolBar, ItemState, ToolBarOption, ToolBarModifier };