1/* 2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16var __decorate = this && this.__decorate || function(e, t, o, i) { 17 var s, r = arguments.length, 18 n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; 19 if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i); 20 else 21 for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); 22 return r > 3 && n && Object.defineProperty(t, o, n), n 23}; 24const KeyCode = requireNapi("multimodalInput.keyCode").KeyCode; 25const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdYjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC"; 26const PUBLIC_BACK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0GiIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpgIzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLnHedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+sPy9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6zELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC"; 27export class SelectTitleBar extends ViewPU { 28 constructor(e, t, o, i = -1) { 29 super(e, o, i); 30 this.__selected = new ObservedPropertySimplePU(0, this, "selected"); 31 this.options = void 0; 32 this.menuItems = void 0; 33 this.subtitle = void 0; 34 this.badgeValue = void 0; 35 this.hidesBackButton = void 0; 36 this.onSelected = void 0; 37 this.__selectMaxWidth = new ObservedPropertySimplePU(0, this, "selectMaxWidth"); 38 this.__backActive = new ObservedPropertySimplePU(!1, this, "backActive"); 39 this.setInitiallyProvidedValue(t) 40 } 41 setInitiallyProvidedValue(e) { 42 void 0 !== e.selected && (this.selected = e.selected); 43 void 0 !== e.options && (this.options = e.options); 44 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 45 void 0 !== e.subtitle && (this.subtitle = e.subtitle); 46 void 0 !== e.badgeValue && (this.badgeValue = e.badgeValue); 47 void 0 !== e.hidesBackButton && (this.hidesBackButton = e.hidesBackButton); 48 void 0 !== e.onSelected && (this.onSelected = e.onSelected); 49 void 0 !== e.selectMaxWidth && (this.selectMaxWidth = e.selectMaxWidth); 50 void 0 !== e.backActive && (this.backActive = e.backActive) 51 } 52 updateStateVars(e) {} 53 purgeVariableDependenciesOnElmtId(e) { 54 this.__selected.purgeDependencyOnElmtId(e); 55 this.__selectMaxWidth.purgeDependencyOnElmtId(e); 56 this.__backActive.purgeDependencyOnElmtId(e) 57 } 58 aboutToBeDeleted() { 59 this.__selected.aboutToBeDeleted(); 60 this.__selectMaxWidth.aboutToBeDeleted(); 61 this.__backActive.aboutToBeDeleted(); 62 SubscriberManager.Get().delete(this.id__()); 63 this.aboutToBeDeletedInternal() 64 } 65 get selected() { 66 return this.__selected.get() 67 } 68 set selected(e) { 69 this.__selected.set(e) 70 } 71 get selectMaxWidth() { 72 return this.__selectMaxWidth.get() 73 } 74 set selectMaxWidth(e) { 75 this.__selectMaxWidth.set(e) 76 } 77 get backActive() { 78 return this.__backActive.get() 79 } 80 set backActive(e) { 81 this.__backActive.set(e) 82 } 83 initialRender() { 84 this.observeComponentCreation(((e, t) => { 85 ViewStackProcessor.StartGetAccessRecordingFor(e); 86 Flex.create({ 87 justifyContent: FlexAlign.SpaceBetween, 88 alignItems: ItemAlign.Stretch 89 }); 90 Flex.width("100%"); 91 Flex.height(SelectTitleBar.totalHeight); 92 Flex.backgroundColor({ 93 id: -1, 94 type: 10001, 95 params: ["sys.color.ohos_id_color_background"], 96 bundleName: "", 97 moduleName: "" 98 }); 99 Flex.onAreaChange(((e, t) => { 100 let o = Number(t.width); 101 if (!this.hidesBackButton) { 102 o -= ImageMenuItem.imageHotZoneWidth; 103 o += SelectTitleBar.leftPadding; 104 o -= SelectTitleBar.leftPaddingWithBack 105 } 106 if (void 0 !== this.menuItems) { 107 let e = this.menuItems.length; 108 e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e) 109 } 110 void 0 !== this.badgeValue ? this.selectMaxWidth = o - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding - SelectTitleBar.badgePadding : this.selectMaxWidth = o - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding 111 })); 112 t || Flex.pop(); 113 ViewStackProcessor.StopGetAccessRecording() 114 })); 115 this.observeComponentCreation(((e, t) => { 116 ViewStackProcessor.StartGetAccessRecordingFor(e); 117 Row.create(); 118 Row.margin({ 119 left: this.hidesBackButton ? { 120 id: -1, 121 type: 10002, 122 params: ["sys.float.ohos_id_max_padding_start"], 123 bundleName: "", 124 moduleName: "" 125 } : { 126 id: -1, 127 type: 10002, 128 params: ["sys.float.ohos_id_default_padding_start"], 129 bundleName: "", 130 moduleName: "" 131 } 132 }); 133 t || Row.pop(); 134 ViewStackProcessor.StopGetAccessRecording() 135 })); 136 this.observeComponentCreation(((e, t) => { 137 ViewStackProcessor.StartGetAccessRecordingFor(e); 138 If.create(); 139 this.hidesBackButton ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => { 140 this.observeComponentCreation(((e, t) => { 141 ViewStackProcessor.StartGetAccessRecordingFor(e); 142 Navigator.create(); 143 Navigator.active(this.backActive); 144 t || Navigator.pop(); 145 ViewStackProcessor.StopGetAccessRecording() 146 })); 147 Navigator.pop(); 148 this.observeComponentCreation(((e, t) => { 149 ViewStackProcessor.StartGetAccessRecordingFor(e); 150 t ? ViewPU.create(new ImageMenuItem(this, { 151 item: { 152 value: PUBLIC_BACK, 153 isEnabled: !0, 154 action: () => this.backActive = !0 155 }, 156 index: -1 157 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 158 ViewStackProcessor.StopGetAccessRecording() 159 })) 160 })); 161 t || If.pop(); 162 ViewStackProcessor.StopGetAccessRecording() 163 })); 164 If.pop(); 165 this.observeComponentCreation(((e, t) => { 166 ViewStackProcessor.StartGetAccessRecordingFor(e); 167 Column.create(); 168 Column.justifyContent(FlexAlign.Start); 169 Column.alignItems(HorizontalAlign.Start); 170 Column.constraintSize({ 171 maxWidth: this.selectMaxWidth 172 }); 173 t || Column.pop(); 174 ViewStackProcessor.StopGetAccessRecording() 175 })); 176 this.observeComponentCreation(((e, t) => { 177 ViewStackProcessor.StartGetAccessRecordingFor(e); 178 If.create(); 179 void 0 !== this.badgeValue ? this.ifElseBranchUpdateFunction(0, (() => { 180 this.observeComponentCreation(((e, t) => { 181 ViewStackProcessor.StartGetAccessRecordingFor(e); 182 Badge.create({ 183 count: this.badgeValue, 184 position: BadgePosition.Right, 185 style: { 186 badgeSize: SelectTitleBar.badgeSize, 187 badgeColor: { 188 id: -1, 189 type: 10001, 190 params: ["sys.color.ohos_id_color_emphasize"], 191 bundleName: "", 192 moduleName: "" 193 }, 194 borderColor: { 195 id: -1, 196 type: 10001, 197 params: ["sys.color.ohos_id_color_emphasize"], 198 bundleName: "", 199 moduleName: "" 200 }, 201 borderWidth: 0 202 } 203 }); 204 t || Badge.pop(); 205 ViewStackProcessor.StopGetAccessRecording() 206 })); 207 this.observeComponentCreation(((e, t) => { 208 ViewStackProcessor.StartGetAccessRecordingFor(e); 209 Row.create(); 210 Row.justifyContent(FlexAlign.Start); 211 Row.margin({ 212 right: { 213 id: -1, 214 type: 10002, 215 params: ["sys.float.ohos_id_elements_margin_horizontal_l"], 216 bundleName: "", 217 moduleName: "" 218 } 219 }); 220 t || Row.pop(); 221 ViewStackProcessor.StopGetAccessRecording() 222 })); 223 this.observeComponentCreation(((e, t) => { 224 ViewStackProcessor.StartGetAccessRecordingFor(e); 225 Select.create(this.options); 226 Select.selected(this.selected); 227 Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : ""); 228 Select.font({ 229 size: this.hidesBackButton && void 0 === this.subtitle ? { 230 id: -1, 231 type: 10002, 232 params: ["sys.float.ohos_id_text_size_headline7"], 233 bundleName: "", 234 moduleName: "" 235 } : { 236 id: -1, 237 type: 10002, 238 params: ["sys.float.ohos_id_text_size_headline8"], 239 bundleName: "", 240 moduleName: "" 241 } 242 }); 243 Select.fontColor({ 244 id: -1, 245 type: 10001, 246 params: ["sys.color.ohos_id_color_titlebar_text"], 247 bundleName: "", 248 moduleName: "" 249 }); 250 Select.backgroundColor(Color.Transparent); 251 Select.onSelect(this.onSelected); 252 Select.constraintSize({ 253 maxWidth: this.selectMaxWidth 254 }); 255 Select.offset({ 256 x: -4 257 }); 258 t || Select.pop(); 259 ViewStackProcessor.StopGetAccessRecording() 260 })); 261 Select.pop(); 262 Row.pop(); 263 Badge.pop() 264 })) : this.ifElseBranchUpdateFunction(1, (() => { 265 this.observeComponentCreation(((e, t) => { 266 ViewStackProcessor.StartGetAccessRecordingFor(e); 267 Row.create(); 268 Row.justifyContent(FlexAlign.Start); 269 t || Row.pop(); 270 ViewStackProcessor.StopGetAccessRecording() 271 })); 272 this.observeComponentCreation(((e, t) => { 273 ViewStackProcessor.StartGetAccessRecordingFor(e); 274 Select.create(this.options); 275 Select.selected(this.selected); 276 Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : ""); 277 Select.font({ 278 size: this.hidesBackButton && void 0 === this.subtitle ? { 279 id: -1, 280 type: 10002, 281 params: ["sys.float.ohos_id_text_size_headline7"], 282 bundleName: "", 283 moduleName: "" 284 } : { 285 id: -1, 286 type: 10002, 287 params: ["sys.float.ohos_id_text_size_headline8"], 288 bundleName: "", 289 moduleName: "" 290 } 291 }); 292 Select.fontColor({ 293 id: -1, 294 type: 10001, 295 params: ["sys.color.ohos_id_color_titlebar_text"], 296 bundleName: "", 297 moduleName: "" 298 }); 299 Select.backgroundColor(Color.Transparent); 300 Select.onSelect(this.onSelected); 301 Select.constraintSize({ 302 maxWidth: this.selectMaxWidth 303 }); 304 Select.offset({ 305 x: -4 306 }); 307 t || Select.pop(); 308 ViewStackProcessor.StopGetAccessRecording() 309 })); 310 Select.pop(); 311 Row.pop() 312 })); 313 t || If.pop(); 314 ViewStackProcessor.StopGetAccessRecording() 315 })); 316 If.pop(); 317 this.observeComponentCreation(((e, t) => { 318 ViewStackProcessor.StartGetAccessRecordingFor(e); 319 If.create(); 320 void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => { 321 this.observeComponentCreation(((e, t) => { 322 ViewStackProcessor.StartGetAccessRecordingFor(e); 323 Row.create(); 324 Row.justifyContent(FlexAlign.Start); 325 Row.margin({ 326 left: SelectTitleBar.subtitleLeftPadding 327 }); 328 t || Row.pop(); 329 ViewStackProcessor.StopGetAccessRecording() 330 })); 331 this.observeComponentCreation(((e, t) => { 332 ViewStackProcessor.StartGetAccessRecordingFor(e); 333 Text.create(this.subtitle); 334 Text.fontSize({ 335 id: -1, 336 type: 10002, 337 params: ["sys.float.ohos_id_text_size_over_line"], 338 bundleName: "", 339 moduleName: "" 340 }); 341 Text.fontColor({ 342 id: -1, 343 type: 10001, 344 params: ["sys.color.ohos_id_color_titlebar_subtitle_text"], 345 bundleName: "", 346 moduleName: "" 347 }); 348 Text.maxLines(1); 349 Text.textOverflow({ 350 overflow: TextOverflow.Ellipsis 351 }); 352 Text.constraintSize({ 353 maxWidth: this.selectMaxWidth 354 }); 355 Text.offset({ 356 y: -4 357 }); 358 t || Text.pop(); 359 ViewStackProcessor.StopGetAccessRecording() 360 })); 361 Text.pop(); 362 Row.pop() 363 })) : If.branchId(1); 364 t || If.pop(); 365 ViewStackProcessor.StopGetAccessRecording() 366 })); 367 If.pop(); 368 Column.pop(); 369 Row.pop(); 370 this.observeComponentCreation(((e, t) => { 371 ViewStackProcessor.StartGetAccessRecordingFor(e); 372 If.create(); 373 void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { 374 this.observeComponentCreation(((e, t) => { 375 ViewStackProcessor.StartGetAccessRecordingFor(e); 376 t ? ViewPU.create(new CollapsibleMenuSection(this, { 377 menuItems: this.menuItems, 378 index: 1 + SelectTitleBar.instanceCount++ 379 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 380 ViewStackProcessor.StopGetAccessRecording() 381 })) 382 })) : If.branchId(1); 383 t || If.pop(); 384 ViewStackProcessor.StopGetAccessRecording() 385 })); 386 If.pop(); 387 Flex.pop() 388 } 389 rerender() { 390 this.updateDirtyElements() 391 } 392} 393SelectTitleBar.badgeSize = 16; 394SelectTitleBar.totalHeight = 56; 395SelectTitleBar.leftPadding = 24; 396SelectTitleBar.leftPaddingWithBack = 12; 397SelectTitleBar.rightPadding = 24; 398SelectTitleBar.badgePadding = 16; 399SelectTitleBar.subtitleLeftPadding = 4; 400SelectTitleBar.instanceCount = 0; 401class CollapsibleMenuSection extends ViewPU { 402 constructor(e, t, o, i = -1) { 403 super(e, o, i); 404 this.menuItems = void 0; 405 this.index = void 0; 406 this.firstFocusableIndex = -1; 407 this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); 408 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); 409 this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); 410 this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); 411 this.setInitiallyProvidedValue(t) 412 } 413 setInitiallyProvidedValue(e) { 414 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 415 void 0 !== e.index && (this.index = e.index); 416 void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); 417 void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); 418 void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); 419 void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); 420 void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) 421 } 422 updateStateVars(e) {} 423 purgeVariableDependenciesOnElmtId(e) { 424 this.__isPopupShown.purgeDependencyOnElmtId(e); 425 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); 426 this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); 427 this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) 428 } 429 aboutToBeDeleted() { 430 this.__isPopupShown.aboutToBeDeleted(); 431 this.__isMoreIconOnFocus.aboutToBeDeleted(); 432 this.__isMoreIconOnHover.aboutToBeDeleted(); 433 this.__isMoreIconOnClick.aboutToBeDeleted(); 434 SubscriberManager.Get().delete(this.id__()); 435 this.aboutToBeDeletedInternal() 436 } 437 get isPopupShown() { 438 return this.__isPopupShown.get() 439 } 440 set isPopupShown(e) { 441 this.__isPopupShown.set(e) 442 } 443 get isMoreIconOnFocus() { 444 return this.__isMoreIconOnFocus.get() 445 } 446 set isMoreIconOnFocus(e) { 447 this.__isMoreIconOnFocus.set(e) 448 } 449 get isMoreIconOnHover() { 450 return this.__isMoreIconOnHover.get() 451 } 452 set isMoreIconOnHover(e) { 453 this.__isMoreIconOnHover.set(e) 454 } 455 get isMoreIconOnClick() { 456 return this.__isMoreIconOnClick.get() 457 } 458 set isMoreIconOnClick(e) { 459 this.__isMoreIconOnClick.set(e) 460 } 461 getMoreIconFgColor() { 462 return this.isMoreIconOnClick ? { 463 id: -1, 464 type: 10001, 465 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 466 bundleName: "", 467 moduleName: "" 468 } : { 469 id: -1, 470 type: 10001, 471 params: ["sys.color.ohos_id_color_titlebar_icon"], 472 bundleName: "", 473 moduleName: "" 474 } 475 } 476 getMoreIconBgColor() { 477 return this.isMoreIconOnClick ? { 478 id: -1, 479 type: 10001, 480 params: ["sys.color.ohos_id_color_click_effect"], 481 bundleName: "", 482 moduleName: "" 483 } : this.isMoreIconOnHover ? { 484 id: -1, 485 type: 10001, 486 params: ["sys.color.ohos_id_color_hover"], 487 bundleName: "", 488 moduleName: "" 489 } : Color.Transparent 490 } 491 aboutToAppear() { 492 this.menuItems.forEach(((e, t) => { 493 e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) 494 })) 495 } 496 initialRender() { 497 this.observeComponentCreation(((e, t) => { 498 ViewStackProcessor.StartGetAccessRecordingFor(e); 499 Column.create(); 500 Column.height("100%"); 501 Column.margin({ 502 right: { 503 id: -1, 504 type: 10002, 505 params: ["sys.float.ohos_id_default_padding_end"], 506 bundleName: "", 507 moduleName: "" 508 } 509 }); 510 Column.justifyContent(FlexAlign.Center); 511 t || Column.pop(); 512 ViewStackProcessor.StopGetAccessRecording() 513 })); 514 this.observeComponentCreation(((e, t) => { 515 ViewStackProcessor.StartGetAccessRecordingFor(e); 516 Row.create(); 517 t || Row.pop(); 518 ViewStackProcessor.StopGetAccessRecording() 519 })); 520 this.observeComponentCreation(((e, t) => { 521 ViewStackProcessor.StartGetAccessRecordingFor(e); 522 If.create(); 523 this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { 524 this.observeComponentCreation(((e, t) => { 525 ViewStackProcessor.StartGetAccessRecordingFor(e); 526 ForEach.create(); 527 this.forEachUpdateFunction(e, this.menuItems, ((e, t) => { 528 const o = e; 529 this.observeComponentCreation(((e, i) => { 530 ViewStackProcessor.StartGetAccessRecordingFor(e); 531 i ? ViewPU.create(new ImageMenuItem(this, { 532 item: o, 533 index: 1e3 * this.index + t + 1 534 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 535 ViewStackProcessor.StopGetAccessRecording() 536 })) 537 }), void 0, !0, !1); 538 t || ForEach.pop(); 539 ViewStackProcessor.StopGetAccessRecording() 540 })); 541 ForEach.pop() 542 })) : this.ifElseBranchUpdateFunction(1, (() => { 543 this.observeComponentCreation(((e, t) => { 544 ViewStackProcessor.StartGetAccessRecordingFor(e); 545 ForEach.create(); 546 this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), ((e, t) => { 547 const o = e; 548 this.observeComponentCreation(((e, i) => { 549 ViewStackProcessor.StartGetAccessRecordingFor(e); 550 i ? ViewPU.create(new ImageMenuItem(this, { 551 item: o, 552 index: 1e3 * this.index + t + 1 553 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 554 ViewStackProcessor.StopGetAccessRecording() 555 })) 556 }), void 0, !0, !1); 557 t || ForEach.pop(); 558 ViewStackProcessor.StopGetAccessRecording() 559 })); 560 ForEach.pop(); 561 this.observeComponentCreation(((e, t) => { 562 ViewStackProcessor.StartGetAccessRecordingFor(e); 563 Row.create(); 564 Row.width(ImageMenuItem.imageHotZoneWidth); 565 Row.height(ImageMenuItem.imageHotZoneWidth); 566 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 567 Row.foregroundColor(this.getMoreIconFgColor()); 568 Row.backgroundColor(this.getMoreIconBgColor()); 569 Row.justifyContent(FlexAlign.Center); 570 ViewStackProcessor.visualState("focused"); 571 Row.border({ 572 radius: { 573 id: -1, 574 type: 10002, 575 params: ["sys.float.ohos_id_corner_radius_clicked"], 576 bundleName: "", 577 moduleName: "" 578 }, 579 width: ImageMenuItem.focusBorderWidth, 580 color: { 581 id: -1, 582 type: 10001, 583 params: ["sys.color.ohos_id_color_focused_outline"], 584 bundleName: "", 585 moduleName: "" 586 }, 587 style: BorderStyle.Solid 588 }); 589 ViewStackProcessor.visualState("normal"); 590 Row.border({ 591 radius: { 592 id: -1, 593 type: 10002, 594 params: ["sys.float.ohos_id_corner_radius_clicked"], 595 bundleName: "", 596 moduleName: "" 597 }, 598 width: 0 599 }); 600 ViewStackProcessor.visualState(); 601 Row.onFocus((() => this.isMoreIconOnFocus = !0)); 602 Row.onBlur((() => this.isMoreIconOnFocus = !1)); 603 Row.onHover((e => this.isMoreIconOnHover = e)); 604 Row.onKeyEvent((e => { 605 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 606 e.type === KeyType.Down && (this.isMoreIconOnClick = !0); 607 e.type === KeyType.Up && (this.isMoreIconOnClick = !1) 608 } 609 })); 610 Row.onTouch((e => { 611 e.type === TouchType.Down && (this.isMoreIconOnClick = !0); 612 e.type === TouchType.Up && (this.isMoreIconOnClick = !1) 613 })); 614 Row.onClick((() => this.isPopupShown = !0)); 615 Row.bindPopup(this.isPopupShown, { 616 builder: { 617 builder: this.popupBuilder.bind(this) 618 }, 619 placement: Placement.Bottom, 620 popupColor: Color.White, 621 enableArrow: !1, 622 onStateChange: e => { 623 this.isPopupShown = e.isVisible; 624 e.isVisible || (this.isMoreIconOnClick = !1) 625 } 626 }); 627 t || Row.pop(); 628 ViewStackProcessor.StopGetAccessRecording() 629 })); 630 this.observeComponentCreation(((e, t) => { 631 ViewStackProcessor.StartGetAccessRecordingFor(e); 632 Image.create(PUBLIC_MORE); 633 Image.width(ImageMenuItem.imageSize); 634 Image.height(ImageMenuItem.imageSize); 635 Image.focusable(!0); 636 t || Image.pop(); 637 ViewStackProcessor.StopGetAccessRecording() 638 })); 639 Row.pop() 640 })); 641 t || If.pop(); 642 ViewStackProcessor.StopGetAccessRecording() 643 })); 644 If.pop(); 645 Row.pop(); 646 Column.pop() 647 } 648 popupBuilder(e = null) { 649 this.observeComponentCreation(((e, t) => { 650 ViewStackProcessor.StartGetAccessRecordingFor(e); 651 Column.create(); 652 Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); 653 Column.margin({ 654 top: CollapsibleMenuSection.focusPadding, 655 bottom: CollapsibleMenuSection.focusPadding 656 }); 657 Column.onAppear((() => { 658 focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) 659 })); 660 t || Column.pop(); 661 ViewStackProcessor.StopGetAccessRecording() 662 })); 663 this.observeComponentCreation(((e, t) => { 664 ViewStackProcessor.StartGetAccessRecordingFor(e); 665 ForEach.create(); 666 this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { 667 const o = e; 668 this.observeComponentCreation(((e, i) => { 669 ViewStackProcessor.StartGetAccessRecordingFor(e); 670 i ? ViewPU.create(new ImageMenuItem(this, { 671 item: o, 672 index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t 673 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 674 ViewStackProcessor.StopGetAccessRecording() 675 })) 676 }), void 0, !0, !1); 677 t || ForEach.pop(); 678 ViewStackProcessor.StopGetAccessRecording() 679 })); 680 ForEach.pop(); 681 Column.pop() 682 } 683 rerender() { 684 this.updateDirtyElements() 685 } 686} 687CollapsibleMenuSection.maxCountOfVisibleItems = 3; 688CollapsibleMenuSection.focusPadding = 4; 689CollapsibleMenuSection.marginsNum = 2; 690__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); 691class ImageMenuItem extends ViewPU { 692 constructor(e, t, o, i = -1) { 693 super(e, o, i); 694 this.item = void 0; 695 this.index = void 0; 696 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 697 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 698 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 699 this.setInitiallyProvidedValue(t) 700 } 701 setInitiallyProvidedValue(e) { 702 void 0 !== e.item && (this.item = e.item); 703 void 0 !== e.index && (this.index = e.index); 704 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 705 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 706 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) 707 } 708 updateStateVars(e) {} 709 purgeVariableDependenciesOnElmtId(e) { 710 this.__isOnFocus.purgeDependencyOnElmtId(e); 711 this.__isOnHover.purgeDependencyOnElmtId(e); 712 this.__isOnClick.purgeDependencyOnElmtId(e) 713 } 714 aboutToBeDeleted() { 715 this.__isOnFocus.aboutToBeDeleted(); 716 this.__isOnHover.aboutToBeDeleted(); 717 this.__isOnClick.aboutToBeDeleted(); 718 SubscriberManager.Get().delete(this.id__()); 719 this.aboutToBeDeletedInternal() 720 } 721 get isOnFocus() { 722 return this.__isOnFocus.get() 723 } 724 set isOnFocus(e) { 725 this.__isOnFocus.set(e) 726 } 727 get isOnHover() { 728 return this.__isOnHover.get() 729 } 730 set isOnHover(e) { 731 this.__isOnHover.set(e) 732 } 733 get isOnClick() { 734 return this.__isOnClick.get() 735 } 736 set isOnClick(e) { 737 this.__isOnClick.set(e) 738 } 739 getFgColor() { 740 return this.isOnClick ? { 741 id: -1, 742 type: 10001, 743 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 744 bundleName: "", 745 moduleName: "" 746 } : { 747 id: -1, 748 type: 10001, 749 params: ["sys.color.ohos_id_color_titlebar_icon"], 750 bundleName: "", 751 moduleName: "" 752 } 753 } 754 getBgColor() { 755 return this.isOnClick ? { 756 id: -1, 757 type: 10001, 758 params: ["sys.color.ohos_id_color_click_effect"], 759 bundleName: "", 760 moduleName: "" 761 } : this.isOnHover ? { 762 id: -1, 763 type: 10001, 764 params: ["sys.color.ohos_id_color_hover"], 765 bundleName: "", 766 moduleName: "" 767 } : Color.Transparent 768 } 769 initialRender() { 770 this.observeComponentCreation(((e, t) => { 771 ViewStackProcessor.StartGetAccessRecordingFor(e); 772 Row.create(); 773 Row.width(ImageMenuItem.imageHotZoneWidth); 774 Row.height(ImageMenuItem.imageHotZoneWidth); 775 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 776 Row.foregroundColor(this.getFgColor()); 777 Row.backgroundColor(this.getBgColor()); 778 Row.justifyContent(FlexAlign.Center); 779 Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); 780 ViewStackProcessor.visualState("focused"); 781 Row.border({ 782 radius: { 783 id: -1, 784 type: 10002, 785 params: ["sys.float.ohos_id_corner_radius_clicked"], 786 bundleName: "", 787 moduleName: "" 788 }, 789 width: ImageMenuItem.focusBorderWidth, 790 color: { 791 id: -1, 792 type: 10001, 793 params: ["sys.color.ohos_id_color_focused_outline"], 794 bundleName: "", 795 moduleName: "" 796 }, 797 style: BorderStyle.Solid 798 }); 799 ViewStackProcessor.visualState("normal"); 800 Row.border({ 801 radius: { 802 id: -1, 803 type: 10002, 804 params: ["sys.float.ohos_id_corner_radius_clicked"], 805 bundleName: "", 806 moduleName: "" 807 }, 808 width: 0 809 }); 810 ViewStackProcessor.visualState(); 811 Row.onFocus((() => { 812 this.item.isEnabled && (this.isOnFocus = !0) 813 })); 814 Row.onBlur((() => this.isOnFocus = !1)); 815 Row.onHover((e => { 816 this.item.isEnabled && (this.isOnHover = e) 817 })); 818 Row.onKeyEvent((e => { 819 if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { 820 e.type === KeyType.Down && (this.isOnClick = !0); 821 e.type === KeyType.Up && (this.isOnClick = !1) 822 } 823 })); 824 Row.onTouch((e => { 825 if (this.item.isEnabled) { 826 e.type === TouchType.Down && (this.isOnClick = !0); 827 e.type === TouchType.Up && (this.isOnClick = !1) 828 } 829 })); 830 Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); 831 t || Row.pop(); 832 ViewStackProcessor.StopGetAccessRecording() 833 })); 834 this.observeComponentCreation(((e, t) => { 835 ViewStackProcessor.StartGetAccessRecordingFor(e); 836 Image.create(this.item.value); 837 Image.width(ImageMenuItem.imageSize); 838 Image.height(ImageMenuItem.imageSize); 839 Image.focusable(this.item.isEnabled); 840 Image.key(ImageMenuItem.focusablePrefix + this.index); 841 t || Image.pop(); 842 ViewStackProcessor.StopGetAccessRecording() 843 })); 844 Row.pop() 845 } 846 rerender() { 847 this.updateDirtyElements() 848 } 849} 850ImageMenuItem.imageSize = 24; 851ImageMenuItem.imageHotZoneWidth = 48; 852ImageMenuItem.buttonBorderRadius = 8; 853ImageMenuItem.focusBorderWidth = 2; 854ImageMenuItem.disabledImageOpacity = .4; 855ImageMenuItem.focusablePrefix = "Id-SelectTitleBar-ImageMenuItem-"; 856export default { 857 SelectTitleBar: SelectTitleBar 858};