• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the 'License');
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an 'AS IS' BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15if (!('finalizeConstruction' in ViewPU.prototype)) {
16    Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { });
17}
18
19const curves = requireNativeModule('ohos.curves');
20const display = requireNapi('display');
21const mediaquery = requireNapi('mediaquery');
22const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
23
24const LOG_TAG = 'CustomAppBar';
25const VIEW_WIDTH = 80;
26const VIEW_HEIGHT = 36;
27const BUTTON_SIZE = 40;
28const IMAGE_SIZE = '20vp';
29const MENU_RADIUS = '20vp';
30const DIVIDER_HEIGHT = '16vp';
31const BORDER_WIDTH = '1px';
32const VIEW_MARGIN_RIGHT = 8;
33const ICON_SIZE = 27;
34const ICON_FILL_COLOR_DEFAULT = '#182431';
35const BORDER_COLOR_DEFAULT = '#33000000';
36const MENU_BACK_COLOR = '#99FFFFFF';
37const MENU_BACK_BLUR = 5;
38const MENU_MARGIN_TOP = 10;
39const SM_MENU_MARGIN_END = 16;
40const MD_MENU_MARGIN_END = 24;
41const LG_MENU_MARGIN_END = 32;
42// 半屏参数
43const BUTTON_IMAGE_SIZE = 18;
44const HALF_CONTAINER_BORDER_SIZE = 32;
45const HALF_BUTTON_BACK_COLOR = '#0D000000';
46const HALF_BUTTON_IMAGE_COLOR = '#0C000000';
47const HALF_MENU_MARGIN = 16;
48const EYELASH_HEIGHT = 36;
49const CHEVRON_HEIGHT = 20;
50const CHEVRON_WIDTH = 10;
51const CHEVRON_MARGIN = 4;
52const TITLE_FONT_SIZE = 14;
53const TITLE_LINE_HEIGHT = 16;
54const TITLE_MARGIN_RIGHT = 12;
55const TITLE_MARGIN_TOP = 8;
56const TITLE_LABEL_MARGIN = 8.5;
57const TITLE_TEXT_MARGIN = 3;
58const MD_WIDTH = 480;
59const LG_WIDTH_LIMIT = 0.6;
60const LG_WIDTH_HEIGHT_RATIO = 1.95;
61const ARKUI_APP_BAR_COLOR_CONFIGURATION = 'arkui_app_bar_color_configuration';
62const ARKUI_APP_BAR_MENU_SAFE_AREA = 'arkui_app_bar_menu_safe_area';
63const ARKUI_APP_BAR_CONTENT_SAFE_AREA = 'arkui_app_bar_content_safe_area';
64const ARKUI_APP_BAR_BAR_INFO = 'arkui_app_bar_info';
65const ARKUI_APP_BAR_SCREEN = 'arkui_app_bar_screen';
66const ARKUI_APP_BG_COLOR = 'arkui_app_bg_color';
67const EVENT_NAME_CUSTOM_APP_BAR_MENU_CLICK = 'arkui_custom_app_bar_menu_click';
68const EVENT_NAME_CUSTOM_APP_BAR_CLOSE_CLICK = 'arkui_custom_app_bar_close_click';
69const EVENT_NAME_CUSTOM_APP_BAR_DID_BUILD = 'arkui_custom_app_bar_did_build';
70const EVENT_NAME_CUSTOM_APP_BAR_CREATE_SERVICE_PANEL = 'arkui_custom_app_bar_create_service_panel';
71const ARKUI_APP_BAR_SERVICE_PANEL = 'arkui_app_bar_service_panel';
72const ARKUI_APP_BAR_CLOSE = 'arkui_app_bar_close';
73
74/**
75 * 适配不同颜色模式集合
76 */
77class ColorGroup {
78    constructor(light, dark) {
79        this.light = '#000000';
80        this.dark = '#FFFFFF';
81        this.light = light;
82        this.dark = dark;
83    }
84}
85const colorMap = new Map([
86    [ICON_FILL_COLOR_DEFAULT, new ColorGroup('#182431', '#e5ffffff')],
87    [BORDER_COLOR_DEFAULT, new ColorGroup('#33182431', '#4Dffffff')],
88    [MENU_BACK_COLOR, new ColorGroup('#99FFFFFF', '#33000000')],
89    [HALF_BUTTON_BACK_COLOR, new ColorGroup('#0D000000', '#19FFFFFF')],
90    [HALF_BUTTON_IMAGE_COLOR, new ColorGroup('#000000', '#FFFFFF')]
91]);
92export class CustomAppBar extends ViewPU {
93    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
94        super(parent, __localStorage, elmtId, extraInfo);
95        if (typeof paramsLambda === 'function') {
96            this.paramsGenerator_ = paramsLambda;
97        }
98        this.__menuResource = new ObservedPropertyObjectPU({
99            bundleName: '',
100            moduleName: '',
101            params: [],
102            id: 125830217,
103            type: 20000
104        }, this, 'menuResource');
105        this.__closeResource = new ObservedPropertyObjectPU({
106            bundleName: '',
107            moduleName: '',
108            params: [],
109            id: 125831084,
110            type: 20000
111        }, this, 'closeResource');
112        this.__menuFillColor = new ObservedPropertySimplePU(this.getResourceColor(ICON_FILL_COLOR_DEFAULT), this, 'menuFillColor');
113        this.__closeFillColor = new ObservedPropertySimplePU(this.getResourceColor(ICON_FILL_COLOR_DEFAULT), this, 'closeFillColor');
114        this.__menubarBorderColor = new ObservedPropertySimplePU(this.getResourceColor(BORDER_COLOR_DEFAULT), this, 'menubarBorderColor');
115        this.__menubarBackColor = new ObservedPropertySimplePU(this.getResourceColor(MENU_BACK_COLOR), this, 'menubarBackColor');
116        this.__dividerBackgroundColor = new ObservedPropertySimplePU(this.getResourceColor(BORDER_COLOR_DEFAULT), this, 'dividerBackgroundColor');
117        this.__halfButtonBackColor = new ObservedPropertySimplePU(this.getResourceColor(HALF_BUTTON_BACK_COLOR), this, 'halfButtonBackColor');
118        this.__halfButtonImageColor = new ObservedPropertySimplePU(this.getResourceColor(HALF_BUTTON_IMAGE_COLOR), this, 'halfButtonImageColor');
119        this.__contentMarginTop = new ObservedPropertySimplePU(0, this, 'contentMarginTop');
120        this.__contentMarginLeft = new ObservedPropertySimplePU(0, this, 'contentMarginLeft');
121        this.__contentMarginRight = new ObservedPropertySimplePU(0, this, 'contentMarginRight');
122        this.__contentMarginBottom = new ObservedPropertySimplePU(0, this, 'contentMarginBottom');
123        this.__menuMarginEnd = new ObservedPropertySimplePU(SM_MENU_MARGIN_END, this, 'menuMarginEnd');
124        this.__isHalfScreen = new ObservedPropertySimplePU(true, this, 'isHalfScreen');
125        this.__containerHeight = new ObservedPropertySimplePU('0%', this, 'containerHeight');
126        this.__containerWidth = new ObservedPropertySimplePU('100%', this, 'containerWidth');
127        this.__stackHeight = new ObservedPropertySimplePU('100%', this, 'stackHeight');
128        this.__titleOpacity = new ObservedPropertySimplePU(0, this, 'titleOpacity');
129        this.__buttonOpacity = new ObservedPropertySimplePU(1, this, 'buttonOpacity');
130        this.__titleHeight = new ObservedPropertySimplePU(0, this, 'titleHeight');
131        this.__titleOffset = new ObservedPropertySimplePU(0, this, 'titleOffset');
132        this.__maskOpacity = new ObservedPropertySimplePU(0, this, 'maskOpacity');
133        this.__maskBlurScale = new ObservedPropertySimplePU(0, this, 'maskBlurScale');
134        this.__contentBgColor = new ObservedPropertyObjectPU('#FFFFFFFF', this, 'contentBgColor');
135        this.__statusBarHeight = new ObservedPropertySimplePU(0, this, 'statusBarHeight');
136        this.__ratio = new ObservedPropertyObjectPU(undefined, this, 'ratio');
137        this.__breakPoint = new ObservedPropertySimplePU(BreakPointsType.NONE, this, 'breakPoint');
138        this.__serviceMenuRead = new ObservedPropertySimplePU(this.getStringByResourceToken(ARKUI_APP_BAR_SERVICE_PANEL), this, 'serviceMenuRead');
139        this.__closeRead = new ObservedPropertySimplePU(this.getStringByResourceToken(ARKUI_APP_BAR_CLOSE), this, 'closeRead');
140        this.isHalfToFullScreen = false;
141        this.isDark = true;
142        this.bundleName = '';
143        this.labelName = '';
144        this.icon = { 'id': -1, 'type': 20000, params: ['sys.media.ohos_app_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' };
145        this.fullContentMarginTop = 0;
146        this.windowWidth = 0;
147        this.windowHeight = 0;
148        this.smListener = mediaquery.matchMediaSync('(0vp<width) and (width<600vp)');
149        this.mdListener = mediaquery.matchMediaSync('(600vp<=width) and (width<840vp)');
150        this.lgListener = mediaquery.matchMediaSync('(840vp<=width)');
151        this.setInitiallyProvidedValue(params);
152        this.declareWatch('breakPoint', this.onBreakPointChange);
153        this.finalizeConstruction();
154    }
155    setInitiallyProvidedValue(params) {
156        if (params.menuResource !== undefined) {
157            this.menuResource = params.menuResource;
158        }
159        if (params.closeResource !== undefined) {
160            this.closeResource = params.closeResource;
161        }
162        if (params.menuFillColor !== undefined) {
163            this.menuFillColor = params.menuFillColor;
164        }
165        if (params.closeFillColor !== undefined) {
166            this.closeFillColor = params.closeFillColor;
167        }
168        if (params.menubarBorderColor !== undefined) {
169            this.menubarBorderColor = params.menubarBorderColor;
170        }
171        if (params.menubarBackColor !== undefined) {
172            this.menubarBackColor = params.menubarBackColor;
173        }
174        if (params.dividerBackgroundColor !== undefined) {
175            this.dividerBackgroundColor = params.dividerBackgroundColor;
176        }
177        if (params.halfButtonBackColor !== undefined) {
178            this.halfButtonBackColor = params.halfButtonBackColor;
179        }
180        if (params.halfButtonImageColor !== undefined) {
181            this.halfButtonImageColor = params.halfButtonImageColor;
182        }
183        if (params.contentMarginTop !== undefined) {
184            this.contentMarginTop = params.contentMarginTop;
185        }
186        if (params.contentMarginLeft !== undefined) {
187            this.contentMarginLeft = params.contentMarginLeft;
188        }
189        if (params.contentMarginRight !== undefined) {
190            this.contentMarginRight = params.contentMarginRight;
191        }
192        if (params.contentMarginBottom !== undefined) {
193            this.contentMarginBottom = params.contentMarginBottom;
194        }
195        if (params.menuMarginEnd !== undefined) {
196            this.menuMarginEnd = params.menuMarginEnd;
197        }
198        if (params.isHalfScreen !== undefined) {
199            this.isHalfScreen = params.isHalfScreen;
200        }
201        if (params.containerHeight !== undefined) {
202            this.containerHeight = params.containerHeight;
203        }
204        if (params.containerWidth !== undefined) {
205            this.containerWidth = params.containerWidth;
206        }
207        if (params.stackHeight !== undefined) {
208            this.stackHeight = params.stackHeight;
209        }
210        if (params.titleOpacity !== undefined) {
211            this.titleOpacity = params.titleOpacity;
212        }
213        if (params.buttonOpacity !== undefined) {
214            this.buttonOpacity = params.buttonOpacity;
215        }
216        if (params.titleHeight !== undefined) {
217            this.titleHeight = params.titleHeight;
218        }
219        if (params.titleOffset !== undefined) {
220            this.titleOffset = params.titleOffset;
221        }
222        if (params.maskOpacity !== undefined) {
223            this.maskOpacity = params.maskOpacity;
224        }
225        if (params.maskBlurScale !== undefined) {
226            this.maskBlurScale = params.maskBlurScale;
227        }
228        if (params.contentBgColor !== undefined) {
229            this.contentBgColor = params.contentBgColor;
230        }
231        if (params.statusBarHeight !== undefined) {
232            this.statusBarHeight = params.statusBarHeight;
233        }
234        if (params.ratio !== undefined) {
235            this.ratio = params.ratio;
236        }
237        if (params.breakPoint !== undefined) {
238            this.breakPoint = params.breakPoint;
239        }
240        if (params.serviceMenuRead !== undefined) {
241            this.serviceMenuRead = params.serviceMenuRead;
242        }
243        if (params.closeRead !== undefined) {
244            this.closeRead = params.closeRead;
245        }
246        if (params.isHalfToFullScreen !== undefined) {
247            this.isHalfToFullScreen = params.isHalfToFullScreen;
248        }
249        if (params.isDark !== undefined) {
250            this.isDark = params.isDark;
251        }
252        if (params.bundleName !== undefined) {
253            this.bundleName = params.bundleName;
254        }
255        if (params.labelName !== undefined) {
256            this.labelName = params.labelName;
257        }
258        if (params.icon !== undefined) {
259            this.icon = params.icon;
260        }
261        if (params.fullContentMarginTop !== undefined) {
262            this.fullContentMarginTop = params.fullContentMarginTop;
263        }
264        if (params.windowWidth !== undefined) {
265            this.windowWidth = params.windowWidth;
266        }
267        if (params.windowHeight !== undefined) {
268            this.windowHeight = params.windowHeight;
269        }
270        if (params.smListener !== undefined) {
271            this.smListener = params.smListener;
272        }
273        if (params.mdListener !== undefined) {
274            this.mdListener = params.mdListener;
275        }
276        if (params.lgListener !== undefined) {
277            this.lgListener = params.lgListener;
278        }
279    }
280    updateStateVars(params) {
281    }
282    purgeVariableDependenciesOnElmtId(rmElmtId) {
283        this.__menuResource.purgeDependencyOnElmtId(rmElmtId);
284        this.__closeResource.purgeDependencyOnElmtId(rmElmtId);
285        this.__menuFillColor.purgeDependencyOnElmtId(rmElmtId);
286        this.__closeFillColor.purgeDependencyOnElmtId(rmElmtId);
287        this.__menubarBorderColor.purgeDependencyOnElmtId(rmElmtId);
288        this.__menubarBackColor.purgeDependencyOnElmtId(rmElmtId);
289        this.__dividerBackgroundColor.purgeDependencyOnElmtId(rmElmtId);
290        this.__halfButtonBackColor.purgeDependencyOnElmtId(rmElmtId);
291        this.__halfButtonImageColor.purgeDependencyOnElmtId(rmElmtId);
292        this.__contentMarginTop.purgeDependencyOnElmtId(rmElmtId);
293        this.__contentMarginLeft.purgeDependencyOnElmtId(rmElmtId);
294        this.__contentMarginRight.purgeDependencyOnElmtId(rmElmtId);
295        this.__contentMarginBottom.purgeDependencyOnElmtId(rmElmtId);
296        this.__menuMarginEnd.purgeDependencyOnElmtId(rmElmtId);
297        this.__isHalfScreen.purgeDependencyOnElmtId(rmElmtId);
298        this.__containerHeight.purgeDependencyOnElmtId(rmElmtId);
299        this.__containerWidth.purgeDependencyOnElmtId(rmElmtId);
300        this.__stackHeight.purgeDependencyOnElmtId(rmElmtId);
301        this.__titleOpacity.purgeDependencyOnElmtId(rmElmtId);
302        this.__buttonOpacity.purgeDependencyOnElmtId(rmElmtId);
303        this.__titleHeight.purgeDependencyOnElmtId(rmElmtId);
304        this.__titleOffset.purgeDependencyOnElmtId(rmElmtId);
305        this.__maskOpacity.purgeDependencyOnElmtId(rmElmtId);
306        this.__maskBlurScale.purgeDependencyOnElmtId(rmElmtId);
307        this.__contentBgColor.purgeDependencyOnElmtId(rmElmtId);
308        this.__statusBarHeight.purgeDependencyOnElmtId(rmElmtId);
309        this.__ratio.purgeDependencyOnElmtId(rmElmtId);
310        this.__breakPoint.purgeDependencyOnElmtId(rmElmtId);
311        this.__serviceMenuRead.purgeDependencyOnElmtId(rmElmtId);
312        this.__closeRead.purgeDependencyOnElmtId(rmElmtId);
313    }
314    aboutToBeDeleted() {
315        this.__menuResource.aboutToBeDeleted();
316        this.__closeResource.aboutToBeDeleted();
317        this.__menuFillColor.aboutToBeDeleted();
318        this.__closeFillColor.aboutToBeDeleted();
319        this.__menubarBorderColor.aboutToBeDeleted();
320        this.__menubarBackColor.aboutToBeDeleted();
321        this.__dividerBackgroundColor.aboutToBeDeleted();
322        this.__halfButtonBackColor.aboutToBeDeleted();
323        this.__halfButtonImageColor.aboutToBeDeleted();
324        this.__contentMarginTop.aboutToBeDeleted();
325        this.__contentMarginLeft.aboutToBeDeleted();
326        this.__contentMarginRight.aboutToBeDeleted();
327        this.__contentMarginBottom.aboutToBeDeleted();
328        this.__menuMarginEnd.aboutToBeDeleted();
329        this.__isHalfScreen.aboutToBeDeleted();
330        this.__containerHeight.aboutToBeDeleted();
331        this.__containerWidth.aboutToBeDeleted();
332        this.__stackHeight.aboutToBeDeleted();
333        this.__titleOpacity.aboutToBeDeleted();
334        this.__buttonOpacity.aboutToBeDeleted();
335        this.__titleHeight.aboutToBeDeleted();
336        this.__titleOffset.aboutToBeDeleted();
337        this.__maskOpacity.aboutToBeDeleted();
338        this.__maskBlurScale.aboutToBeDeleted();
339        this.__contentBgColor.aboutToBeDeleted();
340        this.__statusBarHeight.aboutToBeDeleted();
341        this.__ratio.aboutToBeDeleted();
342        this.__breakPoint.aboutToBeDeleted();
343        this.__serviceMenuRead.aboutToBeDeleted();
344        this.__closeRead.aboutToBeDeleted();
345        SubscriberManager.Get().delete(this.id__());
346        this.aboutToBeDeletedInternal();
347    }
348    get menuResource() {
349        return this.__menuResource.get();
350    }
351    set menuResource(newValue) {
352        this.__menuResource.set(newValue);
353    }
354    get closeResource() {
355        return this.__closeResource.get();
356    }
357    set closeResource(newValue) {
358        this.__closeResource.set(newValue);
359    }
360    get menuFillColor() {
361        return this.__menuFillColor.get();
362    }
363    set menuFillColor(newValue) {
364        this.__menuFillColor.set(newValue);
365    }
366    get closeFillColor() {
367        return this.__closeFillColor.get();
368    }
369    set closeFillColor(newValue) {
370        this.__closeFillColor.set(newValue);
371    }
372    get menubarBorderColor() {
373        return this.__menubarBorderColor.get();
374    }
375    set menubarBorderColor(newValue) {
376        this.__menubarBorderColor.set(newValue);
377    }
378    get menubarBackColor() {
379        return this.__menubarBackColor.get();
380    }
381    set menubarBackColor(newValue) {
382        this.__menubarBackColor.set(newValue);
383    }
384    get dividerBackgroundColor() {
385        return this.__dividerBackgroundColor.get();
386    }
387    set dividerBackgroundColor(newValue) {
388        this.__dividerBackgroundColor.set(newValue);
389    }
390    get halfButtonBackColor() {
391        return this.__halfButtonBackColor.get();
392    }
393    set halfButtonBackColor(newValue) {
394        this.__halfButtonBackColor.set(newValue);
395    }
396    get halfButtonImageColor() {
397        return this.__halfButtonImageColor.get();
398    }
399    set halfButtonImageColor(newValue) {
400        this.__halfButtonImageColor.set(newValue);
401    }
402    get contentMarginTop() {
403        return this.__contentMarginTop.get();
404    }
405    set contentMarginTop(newValue) {
406        this.__contentMarginTop.set(newValue);
407    }
408    get contentMarginLeft() {
409        return this.__contentMarginLeft.get();
410    }
411    set contentMarginLeft(newValue) {
412        this.__contentMarginLeft.set(newValue);
413    }
414    get contentMarginRight() {
415        return this.__contentMarginRight.get();
416    }
417    set contentMarginRight(newValue) {
418        this.__contentMarginRight.set(newValue);
419    }
420    get contentMarginBottom() {
421        return this.__contentMarginBottom.get();
422    }
423    set contentMarginBottom(newValue) {
424        this.__contentMarginBottom.set(newValue);
425    }
426    get menuMarginEnd() {
427        return this.__menuMarginEnd.get();
428    }
429    set menuMarginEnd(newValue) {
430        this.__menuMarginEnd.set(newValue);
431    }
432    get isHalfScreen() {
433        return this.__isHalfScreen.get();
434    }
435    set isHalfScreen(newValue) {
436        this.__isHalfScreen.set(newValue);
437    }
438    get containerHeight() {
439        return this.__containerHeight.get();
440    }
441    set containerHeight(newValue) {
442        this.__containerHeight.set(newValue);
443    }
444    get containerWidth() {
445        return this.__containerWidth.get();
446    }
447    set containerWidth(newValue) {
448        this.__containerWidth.set(newValue);
449    }
450    get stackHeight() {
451        return this.__stackHeight.get();
452    }
453    set stackHeight(newValue) {
454        this.__stackHeight.set(newValue);
455    }
456    get titleOpacity() {
457        return this.__titleOpacity.get();
458    }
459    set titleOpacity(newValue) {
460        this.__titleOpacity.set(newValue);
461    }
462    get buttonOpacity() {
463        return this.__buttonOpacity.get();
464    }
465    set buttonOpacity(newValue) {
466        this.__buttonOpacity.set(newValue);
467    }
468    get titleHeight() {
469        return this.__titleHeight.get();
470    }
471    set titleHeight(newValue) {
472        this.__titleHeight.set(newValue);
473    }
474    get titleOffset() {
475        return this.__titleOffset.get();
476    }
477    set titleOffset(newValue) {
478        this.__titleOffset.set(newValue);
479    }
480    get maskOpacity() {
481        return this.__maskOpacity.get();
482    }
483    set maskOpacity(newValue) {
484        this.__maskOpacity.set(newValue);
485    }
486    get maskBlurScale() {
487        return this.__maskBlurScale.get();
488    }
489    set maskBlurScale(newValue) {
490        this.__maskBlurScale.set(newValue);
491    }
492    get contentBgColor() {
493        return this.__contentBgColor.get();
494    }
495    set contentBgColor(newValue) {
496        this.__contentBgColor.set(newValue);
497    }
498    get statusBarHeight() {
499        return this.__statusBarHeight.get();
500    }
501    set statusBarHeight(newValue) {
502        this.__statusBarHeight.set(newValue);
503    }
504    get ratio() {
505        return this.__ratio.get();
506    }
507    set ratio(newValue) {
508        this.__ratio.set(newValue);
509    }
510    get breakPoint() {
511        return this.__breakPoint.get();
512    }
513    set breakPoint(newValue) {
514        this.__breakPoint.set(newValue);
515    }
516    get serviceMenuRead() {
517        return this.__serviceMenuRead.get();
518    }
519    set serviceMenuRead(newValue) {
520        this.__serviceMenuRead.set(newValue);
521    }
522    get closeRead() {
523        return this.__closeRead.get();
524    }
525    set closeRead(newValue) {
526        this.__closeRead.set(newValue);
527    }
528    aboutToAppear() {
529        if (this.isHalfScreen) {
530            this.contentBgColor = Color.Transparent;
531            this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
532            this.halfScreenShowAnimation();
533        }
534        else {
535            this.containerHeight = '100%';
536            this.containerWidth = '100%';
537        }
538    }
539    aboutToDisappear() {
540        this.smListener.off('change');
541        this.mdListener.off('change');
542        this.lgListener.off('change');
543    }
544    initBreakPointListener() {
545        this.smListener.on('change', (mediaQueryResult) => {
546            if (mediaQueryResult.matches) {
547                this.breakPoint = BreakPointsType.SM;
548            }
549        });
550        this.mdListener.on('change', (mediaQueryResult) => {
551            if (mediaQueryResult.matches) {
552                this.breakPoint = BreakPointsType.MD;
553            }
554        });
555        this.lgListener.on('change', (mediaQueryResult) => {
556            if (mediaQueryResult.matches) {
557                this.breakPoint = BreakPointsType.LG;
558            }
559        });
560    }
561    onBreakPointChange() {
562        if (this.windowWidth === 0) {
563            let displayData = display.getDefaultDisplaySync();
564            this.windowWidth = px2vp(displayData.width);
565            this.windowHeight = px2vp(displayData.height);
566        }
567        if (menuMarginEndMap.has(this.breakPoint)) {
568            this.menuMarginEnd = menuMarginEndMap.get(this.breakPoint);
569        }
570        if (this.isHalfScreen) {
571            if (this.breakPoint === BreakPointsType.SM) {
572                this.containerWidth = '100%';
573            }
574            else if (this.breakPoint === BreakPointsType.MD) {
575                this.containerWidth = MD_WIDTH;
576            }
577            else if (this.breakPoint === BreakPointsType.LG) {
578                this.containerWidth =
579                    this.windowWidth > this.windowHeight ? this.windowHeight * LG_WIDTH_LIMIT : this.windowWidth * LG_WIDTH_LIMIT;
580            }
581        }
582    }
583    parseBoolean(value) {
584        if (value === 'true') {
585            return true;
586        }
587        return false;
588    }
589    getResourceColor(defaultColor) {
590        if (colorMap.has(defaultColor)) {
591            const colorGroup = colorMap.get(defaultColor);
592            if (colorGroup) {
593                return this.isDark ? colorGroup.dark : colorGroup.light;
594            }
595        }
596        return defaultColor;
597    }
598    getStringByResourceToken(resName) {
599        try {
600            return getContext(this).resourceManager.getStringByNameSync(resName);
601        } catch (err) {
602            console.error(LOG_TAG, `getAccessibilityDescription, error: ${err.toString()}`);
603        }
604        return '';
605    }
606    /**
607     * atomicservice侧的事件变化回调
608     * @param eventName 事件名称
609     * @param param 事件参数
610     */
611    setCustomCallback(eventName, param) {
612        if (param === null || param === '' || param === undefined) {
613            console.error(LOG_TAG, 'invalid params');
614            return;
615        }
616        if (eventName === ARKUI_APP_BAR_COLOR_CONFIGURATION) {
617            this.onColorConfigurationUpdate(this.parseBoolean(param));
618        }
619        else if (eventName === ARKUI_APP_BAR_MENU_SAFE_AREA) {
620            if (this.statusBarHeight === px2vp(Number(param))) {
621                return;
622            }
623            this.statusBarHeight = Number(param);
624            this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
625        }
626        else if (eventName === ARKUI_APP_BAR_CONTENT_SAFE_AREA) {
627            //top left right bottom
628            let splitArray = param.split('|');
629            if (splitArray.length < 4) {
630                return;
631            }
632            this.contentMarginTop = this.isHalfScreen ? 0 : Number(splitArray[0]);
633            this.fullContentMarginTop = Number(splitArray[0]);
634            this.contentMarginLeft = Number(splitArray[1]);
635            this.contentMarginRight = Number(splitArray[2]);
636            this.contentMarginBottom = Number(splitArray[3]);
637        }
638        else if (eventName === ARKUI_APP_BAR_BAR_INFO) {
639            let splitArray = param.split('|');
640            if (splitArray.length < 2) {
641                return;
642            }
643            this.bundleName = splitArray[0];
644            this.labelName = splitArray[1];
645        }
646        else if (eventName === ARKUI_APP_BAR_SCREEN) {
647            this.isHalfScreen = this.parseBoolean(param);
648            this.initBreakPointListener();
649        }
650        else if (eventName === ARKUI_APP_BG_COLOR) {
651            this.contentBgColor = param;
652        }
653    }
654    /**
655     * 颜色变化设置
656     * @param isDark 是否是深色模式
657     */
658    onColorConfigurationUpdate(isDark) {
659        this.isDark = isDark;
660        this.menuFillColor = this.getResourceColor(ICON_FILL_COLOR_DEFAULT);
661        this.closeFillColor = this.getResourceColor(ICON_FILL_COLOR_DEFAULT);
662        this.menubarBorderColor = this.getResourceColor(BORDER_COLOR_DEFAULT);
663        this.dividerBackgroundColor = this.getResourceColor(BORDER_COLOR_DEFAULT);
664        this.menubarBackColor = this.getResourceColor(MENU_BACK_COLOR);
665        this.halfButtonBackColor = this.getResourceColor(HALF_BUTTON_BACK_COLOR);
666        this.halfButtonImageColor = this.getResourceColor(HALF_BUTTON_IMAGE_COLOR);
667    }
668    /**
669     * 标题栏图标回调
670     * @param pixelMap
671     */
672    setAppIcon(pixelMap) {
673        this.icon = pixelMap;
674    }
675    /**
676     * 服务面板按钮点击回调
677     */
678    onMenuButtonClick() {
679        ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_MENU_CLICK);
680    }
681    /**
682     * 关闭按钮点击回调
683     */
684    onCloseButtonClick() {
685        ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_CLOSE_CLICK);
686    }
687    /**
688     * 点击title栏
689     */
690    onEyelashTitleClick() {
691        let info = {
692            'bundleName':'com.huawei.hmos.asde',
693            'abilityName':'PanelAbility',
694            'params':[
695                `bundleName:${this.bundleName}`,
696                'abilityName:MainAbility',
697                'module:entry',
698                'pageName:DETAIL',
699                'ability.want.params.uiExtensionType:sysDialog/atomicServicePanel'
700            ]
701        };
702        ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_CREATE_SERVICE_PANEL, info);
703    }
704    /**
705     * 触发构建回调
706     */
707    onDidBuild() {
708        ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_DID_BUILD);
709    }
710    /**
711     * 半屏拉起动效
712     */
713    halfScreenShowAnimation() {
714        Context.animateTo({
715            duration: 250,
716            curve: Curve.Sharp,
717        }, () => {
718            this.maskOpacity = 0.3;
719            this.maskBlurScale = 1;
720        });
721        Context.animateTo({
722            duration: 250,
723            curve: curves.interpolatingSpring(0, 1, 328, 36),
724        }, () => {
725            this.containerHeight = '100%';
726            this.ratio = this.breakPoint === BreakPointsType.LG ? 1 / LG_WIDTH_HEIGHT_RATIO : undefined;
727        });
728        // 标题栏渐显
729        Context.animateTo({
730            duration: 100,
731            curve: curves.cubicBezierCurve(0.2, 0, 0.2, 1),
732        }, () => {
733            this.titleOpacity = 1;
734        });
735    }
736    /**
737     * 半屏放大至全屏动效
738     */
739    expendContainerAnimation() {
740        Context.animateTo({
741            duration: 150,
742            curve: curves.interpolatingSpring(0, 1, 328, 36),
743            onFinish: () => {
744                this.contentBgColor = '#FFFFFF';
745                this.isHalfToFullScreen = true;
746            }
747        }, () => {
748            this.containerWidth = '100%';
749            this.contentMarginTop = this.fullContentMarginTop;
750            this.titleOffset = -this.titleHeight;
751            this.isHalfScreen = false;
752        });
753        // 标题栏渐隐
754        Context.animateTo({
755            duration: 100,
756            curve: curves.cubicBezierCurve(0.2, 0, 0.2, 1),
757        }, () => {
758            this.titleOpacity = 0;
759        });
760    }
761    /**
762     * 嵌入式关闭动效
763     */
764    closeContainerAnimation() {
765        if (this.isHalfScreen) {
766            this.closeHalfContainerAnimation();
767            return;
768        }
769        if (this.isHalfToFullScreen) {
770            // 关闭弹框
771            Context.animateTo({
772                duration: 250,
773                curve: curves.interpolatingSpring(0, 1, 328, 36),
774                onFinish: () => {
775                    this.onCloseButtonClick();
776                }
777            }, () => {
778                this.stackHeight = '0%';
779            });
780        }
781        else {
782            this.onCloseButtonClick();
783        }
784    }
785    closeHalfContainerAnimation() {
786        // 关闭弹框
787        Context.animateTo({
788            duration: 250,
789            curve: curves.interpolatingSpring(0, 1, 328, 36),
790            onFinish: () => {
791                this.onCloseButtonClick();
792            }
793        }, () => {
794            this.containerHeight = '0%';
795            this.ratio = undefined;
796        });
797        // 蒙层渐隐
798        Context.animateTo({
799            duration: 250,
800            curve: Curve.Sharp,
801        }, () => {
802            this.maskOpacity = 0;
803            this.maskBlurScale = 0;
804        });
805        // 标题栏渐隐
806        Context.animateTo({
807            duration: 100,
808            curve: curves.cubicBezierCurve(0.2, 0, 0.2, 1),
809        }, () => {
810            this.titleOpacity = 0;
811        });
812    }
813    fullScreenMenubar(parent = null) {
814        this.observeComponentCreation2((elmtId, isInitialRender) => {
815            Row.create();
816            Row.id('AtomicServiceMenubarRowId');
817            Row.margin({ top: LengthMetrics.vp(this.statusBarHeight + MENU_MARGIN_TOP), end: LengthMetrics.vp(this.menuMarginEnd) });
818            Row.justifyContent(FlexAlign.End);
819            Row.height(VIEW_HEIGHT);
820            Row.hitTestBehavior(HitTestMode.Transparent);
821            Row.width('100%');
822        }, Row);
823        this.observeComponentCreation2((elmtId, isInitialRender) => {
824            Row.create();
825            Row.borderRadius(MENU_RADIUS);
826            Row.borderWidth(BORDER_WIDTH);
827            Row.borderColor(this.menubarBorderColor);
828            Row.backgroundColor(this.menubarBackColor);
829            Row.backdropBlur(MENU_BACK_BLUR);
830            Row.height(VIEW_HEIGHT);
831            Row.width(VIEW_WIDTH);
832            Row.align(Alignment.Top);
833            Row.draggable(false);
834            Row.geometryTransition('menubar');
835            Row.id('AtomicServiceMenubarId');
836        }, Row);
837        this.observeComponentCreation2((elmtId, isInitialRender) => {
838            Button.createWithChild();
839            Button.id('AtomicServiceMenuId');
840            Button.type(ButtonType.Normal);
841            Button.borderRadius({ topLeft: MENU_RADIUS, bottomLeft: MENU_RADIUS });
842            Button.backgroundColor(Color.Transparent);
843            Button.width(BUTTON_SIZE);
844            Button.height(VIEW_HEIGHT);
845            Button.accessibilityText(this.serviceMenuRead);
846            Button.onAccessibilityHover(() => {
847                this.serviceMenuRead = this.getStringByResourceToken(ARKUI_APP_BAR_SERVICE_PANEL);
848            });
849            Gesture.create(GesturePriority.Low);
850            TapGesture.create();
851            TapGesture.onAction(() => {
852                this.onMenuButtonClick();
853            });
854            TapGesture.pop();
855            Gesture.pop();
856        }, Button);
857        this.observeComponentCreation2((elmtId, isInitialRender) => {
858            Image.create(this.menuResource);
859            Image.id('AtomicServiceMenuIconId');
860            Image.width(IMAGE_SIZE);
861            Image.height(IMAGE_SIZE);
862            Image.fillColor(this.menuFillColor);
863            Image.draggable(false);
864            Image.interpolation(ImageInterpolation.High);
865        }, Image);
866        Button.pop();
867        this.observeComponentCreation2((elmtId, isInitialRender) => {
868            Divider.create();
869            Divider.id('AtomicServiceDividerId');
870            Divider.vertical(true);
871            Divider.color(this.dividerBackgroundColor);
872            Divider.lineCap(LineCapStyle.Round);
873            Divider.strokeWidth(BORDER_WIDTH);
874            Divider.height(DIVIDER_HEIGHT);
875        }, Divider);
876        this.observeComponentCreation2((elmtId, isInitialRender) => {
877            Button.createWithChild();
878            Button.id('AtomicServiceCloseId');
879            Button.type(ButtonType.Normal);
880            Button.backgroundColor(Color.Transparent);
881            Button.borderRadius({ topRight: MENU_RADIUS, bottomRight: MENU_RADIUS });
882            Button.width(BUTTON_SIZE);
883            Button.height(VIEW_HEIGHT);
884            Button.accessibilityText(this.closeRead);
885            Button.onAccessibilityHover(() => {
886                this.closeRead = this.getStringByResourceToken(ARKUI_APP_BAR_CLOSE);
887            });
888            Gesture.create(GesturePriority.Low);
889            TapGesture.create();
890            TapGesture.onAction(() => {
891                this.closeContainerAnimation();
892            });
893            TapGesture.pop();
894            Gesture.pop();
895        }, Button);
896        this.observeComponentCreation2((elmtId, isInitialRender) => {
897            Image.create(this.closeResource);
898            Image.id('AtomicServiceCloseIconId');
899            Image.width(IMAGE_SIZE);
900            Image.height(IMAGE_SIZE);
901            Image.fillColor(this.closeFillColor);
902            Image.draggable(false);
903            Image.interpolation(ImageInterpolation.High);
904        }, Image);
905        Button.pop();
906        Row.pop();
907        Row.pop();
908    }
909    eyelashTitle(parent = null) {
910        this.observeComponentCreation2((elmtId, isInitialRender) => {
911            Column.create();
912            Column.justifyContent(FlexAlign.Start);
913            Column.height(this.titleHeight);
914            Column.offset({ y: this.titleOffset });
915            Column.hitTestBehavior(HitTestMode.Transparent);
916        }, Column);
917        this.observeComponentCreation2((elmtId, isInitialRender) => {
918            Row.create();
919            Row.margin({
920                top: LengthMetrics.vp(this.statusBarHeight + TITLE_MARGIN_TOP),
921                bottom: LengthMetrics.vp(TITLE_MARGIN_TOP)
922            });
923            Row.opacity(this.titleOpacity);
924            Row.justifyContent(FlexAlign.Start);
925            Row.width('100%');
926            Row.hitTestBehavior(HitTestMode.Transparent);
927        }, Row);
928        this.observeComponentCreation2((elmtId, isInitialRender) => {
929            Row.create();
930            Row.height(EYELASH_HEIGHT);
931            ViewStackProcessor.visualState('focused');
932            Row.backgroundColor('#0D000000');
933            ViewStackProcessor.visualState('pressed');
934            Row.backgroundColor('#1A000000');
935            ViewStackProcessor.visualState('normal');
936            Row.backgroundColor(Color.Transparent);
937            ViewStackProcessor.visualState();
938            Row.borderRadius(EYELASH_HEIGHT / 2);
939            Row.onClick(() => {
940                this.onEyelashTitleClick();
941            });
942            Row.margin({ start: LengthMetrics.vp(TITLE_MARGIN_RIGHT) });
943        }, Row);
944        this.observeComponentCreation2((elmtId, isInitialRender) => {
945            Image.create(this.icon);
946            Image.height(ICON_SIZE);
947            Image.width(ICON_SIZE);
948            Image.margin({
949                start: LengthMetrics.vp(CHEVRON_MARGIN)
950            });
951        }, Image);
952        this.observeComponentCreation2((elmtId, isInitialRender) => {
953            Text.create(this.labelName);
954            Text.fontSize(TITLE_FONT_SIZE);
955            Text.lineHeight(TITLE_LINE_HEIGHT);
956            Text.fontWeight(FontWeight.Medium);
957            Text.fontColor('#FFFFFF');
958            Text.margin({ start: LengthMetrics.vp(TITLE_LABEL_MARGIN) });
959            Text.maxLines(1);
960            Text.textOverflow({ overflow: TextOverflow.Ellipsis });
961            Text.ellipsisMode(EllipsisMode.END);
962        }, Text);
963        Text.pop();
964        this.observeComponentCreation2((elmtId, isInitialRender) => {
965            Text.create('提供服务');
966            Text.fontSize(TITLE_FONT_SIZE);
967            Text.lineHeight(TITLE_LINE_HEIGHT);
968            Text.fontColor('#FFFFFF');
969            Text.margin({ start: LengthMetrics.vp(TITLE_TEXT_MARGIN) });
970        }, Text);
971        Text.pop();
972        this.observeComponentCreation2((elmtId, isInitialRender) => {
973            SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.chevron_right'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
974            SymbolGlyph.height(CHEVRON_HEIGHT);
975            SymbolGlyph.width(CHEVRON_WIDTH);
976            SymbolGlyph.margin({ start: LengthMetrics.vp(CHEVRON_MARGIN), end: LengthMetrics.vp(CHEVRON_MARGIN) });
977            SymbolGlyph.fontColor([Color.White]);
978        }, SymbolGlyph);
979        Row.pop();
980        Row.pop();
981        Column.pop();
982    }
983    halfScreenMenuBar(parent = null) {
984        this.observeComponentCreation2((elmtId, isInitialRender) => {
985            Column.create();
986            Column.height('100%');
987            Column.width('100%');
988            Column.justifyContent(FlexAlign.End);
989            Column.hitTestBehavior(HitTestMode.Transparent);
990        }, Column);
991        this.observeComponentCreation2((elmtId, isInitialRender) => {
992            Row.create();
993            Row.width(this.containerWidth);
994            Row.height(this.containerHeight);
995            Row.aspectRatio(ObservedObject.GetRawObject(this.ratio));
996            Row.alignItems(VerticalAlign.Top);
997            Row.justifyContent(FlexAlign.End);
998            Row.opacity(this.buttonOpacity);
999        }, Row);
1000        this.observeComponentCreation2((elmtId, isInitialRender) => {
1001            Row.create();
1002            Row.geometryTransition('menubar');
1003            Row.justifyContent(FlexAlign.End);
1004            Row.transition(TransitionEffect.OPACITY);
1005            Row.borderRadius(MENU_RADIUS);
1006            Row.height(BUTTON_SIZE);
1007            Row.margin({
1008                top: LengthMetrics.vp(this.titleHeight + HALF_MENU_MARGIN),
1009                end: LengthMetrics.vp(HALF_MENU_MARGIN)
1010            });
1011        }, Row);
1012        this.observeComponentCreation2((elmtId, isInitialRender) => {
1013            Button.createWithChild({ type: ButtonType.Circle });
1014            Button.width(BUTTON_SIZE);
1015            Button.height(BUTTON_SIZE);
1016            Button.backgroundColor(this.halfButtonBackColor);
1017            Button.onClick(() => {
1018                this.expendContainerAnimation();
1019            });
1020        }, Button);
1021        this.observeComponentCreation2((elmtId, isInitialRender) => {
1022            SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.arrow_up_left_and_arrow_down_right'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1023            SymbolGlyph.fontSize(BUTTON_IMAGE_SIZE);
1024            SymbolGlyph.fontWeight(FontWeight.Medium);
1025            SymbolGlyph.fontColor([this.halfButtonImageColor]);
1026        }, SymbolGlyph);
1027        Button.pop();
1028        this.observeComponentCreation2((elmtId, isInitialRender) => {
1029            Button.createWithChild({ type: ButtonType.Circle });
1030            Button.width(BUTTON_SIZE);
1031            Button.height(BUTTON_SIZE);
1032            Button.margin({
1033                start: LengthMetrics.vp(VIEW_MARGIN_RIGHT)
1034            });
1035            Button.backgroundColor(this.halfButtonBackColor);
1036            Button.onClick(() => {
1037                this.closeContainerAnimation();
1038            });
1039        }, Button);
1040        this.observeComponentCreation2((elmtId, isInitialRender) => {
1041            SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.xmark'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
1042            SymbolGlyph.fontSize(BUTTON_IMAGE_SIZE);
1043            SymbolGlyph.fontWeight(FontWeight.Medium);
1044            SymbolGlyph.fontColor([this.halfButtonImageColor]);
1045        }, SymbolGlyph);
1046        Button.pop();
1047        Row.pop();
1048        Row.pop();
1049        Column.pop();
1050    }
1051    initialRender() {
1052        this.observeComponentCreation2((elmtId, isInitialRender) => {
1053            Column.create();
1054            Column.height('100%');
1055            Column.width('100%');
1056            Column.justifyContent(FlexAlign.End);
1057            Column.backgroundColor(Color.Transparent);
1058            Column.hitTestBehavior(HitTestMode.Transparent);
1059        }, Column);
1060        this.observeComponentCreation2((elmtId, isInitialRender) => {
1061            Stack.create({ alignContent: Alignment.TopEnd });
1062            Stack.height(this.stackHeight);
1063            Stack.width('100%');
1064            Stack.backgroundColor(ObservedObject.GetRawObject(this.contentBgColor));
1065            Stack.hitTestBehavior(HitTestMode.Transparent);
1066            Stack.id('AtomicServiceContainerId');
1067        }, Stack);
1068        this.observeComponentCreation2((elmtId, isInitialRender) => {
1069            If.create();
1070            if (this.isHalfScreen) {
1071                this.ifElseBranchUpdateFunction(0, () => {
1072                    this.observeComponentCreation2((elmtId, isInitialRender) => {
1073                        // 透明模糊背板
1074                        Column.create();
1075                        // 透明模糊背板
1076                        Column.width('100%');
1077                        // 透明模糊背板
1078                        Column.height('100%');
1079                        // 透明模糊背板
1080                        Column.backgroundColor('#262626');
1081                        // 透明模糊背板
1082                        Column.opacity(this.maskOpacity);
1083                        // 透明模糊背板
1084                        Column.foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { scale: this.maskBlurScale });
1085                        // 透明模糊背板
1086                        Column.onClick(() => {
1087                            this.closeContainerAnimation();
1088                        });
1089                    }, Column);
1090                    // 透明模糊背板
1091                    Column.pop();
1092                });
1093            }
1094            else {
1095                this.ifElseBranchUpdateFunction(1, () => {
1096                });
1097            }
1098        }, If);
1099        If.pop();
1100        this.observeComponentCreation2((elmtId, isInitialRender) => {
1101            Column.create();
1102            Column.height('100%');
1103            Column.width('100%');
1104            Column.justifyContent(FlexAlign.End);
1105            Column.hitTestBehavior(HitTestMode.Transparent);
1106        }, Column);
1107        this.observeComponentCreation2((elmtId, isInitialRender) => {
1108            Column.create();
1109            Column.height(this.containerHeight);
1110            Column.width(this.containerWidth);
1111            Column.aspectRatio(ObservedObject.GetRawObject(this.ratio));
1112            Column.justifyContent(FlexAlign.End);
1113            Column.hitTestBehavior(HitTestMode.Transparent);
1114        }, Column);
1115        this.observeComponentCreation2((elmtId, isInitialRender) => {
1116            If.create();
1117            if (this.isHalfScreen) {
1118                this.ifElseBranchUpdateFunction(0, () => {
1119                    this.eyelashTitle.bind(this)();
1120                });
1121            }
1122            else {
1123                this.ifElseBranchUpdateFunction(1, () => {
1124                });
1125            }
1126        }, If);
1127        If.pop();
1128        this.observeComponentCreation2((elmtId, isInitialRender) => {
1129            Row.create();
1130            Row.padding({
1131                top: this.contentMarginTop,
1132                left: this.contentMarginLeft,
1133                right: this.contentMarginRight,
1134                bottom: this.contentMarginBottom
1135            });
1136            Row.layoutWeight(1);
1137            Row.backgroundColor(Color.Transparent);
1138            Row.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK);
1139            Row.borderRadius({
1140                topLeft: HALF_CONTAINER_BORDER_SIZE,
1141                topRight: HALF_CONTAINER_BORDER_SIZE,
1142            });
1143            Row.clip(true);
1144            Row.alignItems(VerticalAlign.Bottom);
1145            Row.hitTestBehavior(HitTestMode.Transparent);
1146            Row.width('100%');
1147            Row.id('AtomicServiceStageId');
1148        }, Row);
1149        Row.pop();
1150        Column.pop();
1151        Column.pop();
1152        this.observeComponentCreation2((elmtId, isInitialRender) => {
1153            If.create();
1154            if (this.isHalfScreen) {
1155                this.ifElseBranchUpdateFunction(0, () => {
1156                    this.halfScreenMenuBar.bind(this)();
1157                });
1158            }
1159            else {
1160                this.ifElseBranchUpdateFunction(1, () => {
1161                    this.fullScreenMenubar.bind(this)();
1162                });
1163            }
1164        }, If);
1165        If.pop();
1166        Stack.pop();
1167        Column.pop();
1168    }
1169    rerender() {
1170        this.updateDirtyElements();
1171    }
1172    static getEntryName() {
1173        return 'CustomAppBar';
1174    }
1175}
1176const BreakPointsType = {
1177    NONE: 'NONE',
1178    SM: 'SM',
1179    MD: 'MD',
1180    LG: 'LG',
1181};
1182const menuMarginEndMap = new Map([
1183    [BreakPointsType.NONE, SM_MENU_MARGIN_END],
1184    [BreakPointsType.SM, SM_MENU_MARGIN_END],
1185    [BreakPointsType.MD, MD_MENU_MARGIN_END],
1186    [BreakPointsType.LG, LG_MENU_MARGIN_END]
1187]);
1188
1189ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
1190loadCustomAppbar(new CustomAppBar(undefined, {}));
1191ViewStackProcessor.StopGetAccessRecording();