phoenix-ui-components 2.14.0 → 2.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -9
- package/dist/README.md +2 -9
- package/dist/components/phoenix-ui.module.d.ts +3 -4
- package/dist/esm2020/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.mjs +32 -39
- package/dist/esm2020/components/phoenix-ui.module.mjs +1 -5
- package/dist/fesm2015/phoenix-ui-components.mjs +30 -41
- package/dist/fesm2015/phoenix-ui-components.mjs.map +1 -1
- package/dist/fesm2020/phoenix-ui-components.mjs +30 -41
- package/dist/fesm2020/phoenix-ui-components.mjs.map +1 -1
- package/package.json +11 -12
|
@@ -14,8 +14,6 @@ import * as i4 from '@angular/material/slide-toggle';
|
|
|
14
14
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
15
15
|
import * as i4$1 from '@angular/material/checkbox';
|
|
16
16
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
17
|
-
import * as i6 from '@rp3e11/ngx-slider';
|
|
18
|
-
import { NgxSliderModule } from '@rp3e11/ngx-slider';
|
|
19
17
|
import { EventDisplay, SceneManager, PrettySymbols, Edm4hepJsonLoader, JiveXMLLoader, CMSLoader, readZipFile, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
|
|
20
18
|
import * as i3$1 from '@angular/material/menu';
|
|
21
19
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -279,7 +277,6 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Templ
|
|
|
279
277
|
i0.ɵɵproperty("value", config_r15.color);
|
|
280
278
|
}
|
|
281
279
|
}
|
|
282
|
-
const _c2$1 = function (a0, a1, a2) { return { floor: a0, ceil: a1, step: a2, animate: false }; };
|
|
283
280
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template(rf, ctx) {
|
|
284
281
|
if (rf & 1) {
|
|
285
282
|
const _r44 = i0.ɵɵgetCurrentView();
|
|
@@ -294,10 +291,7 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Templat
|
|
|
294
291
|
i0.ɵɵelementEnd();
|
|
295
292
|
i0.ɵɵelementStart(6, "input", 40);
|
|
296
293
|
i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.highValue = $event.target.value; return i0.ɵɵresetView(config_r15.onChange(config_r15)); });
|
|
297
|
-
i0.ɵɵelementEnd()();
|
|
298
|
-
i0.ɵɵelementStart(7, "ngx-slider", 41);
|
|
299
|
-
i0.ɵɵlistener("valueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_valueChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.value = $event); })("highValueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_highValueChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.highValue = $event); })("userChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_userChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onChange($event)); });
|
|
300
|
-
i0.ɵɵelementEnd()();
|
|
294
|
+
i0.ɵɵelementEnd()()();
|
|
301
295
|
}
|
|
302
296
|
if (rf & 2) {
|
|
303
297
|
const config_r15 = i0.ɵɵnextContext(3).$implicit;
|
|
@@ -309,29 +303,27 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Templat
|
|
|
309
303
|
i0.ɵɵproperty("value", config_r15.value);
|
|
310
304
|
i0.ɵɵadvance(1);
|
|
311
305
|
i0.ɵɵproperty("value", config_r15.highValue);
|
|
312
|
-
i0.ɵɵadvance(1);
|
|
313
|
-
i0.ɵɵproperty("value", config_r15.value)("highValue", config_r15.highValue)("options", i0.ɵɵpureFunction3(7, _c2$1, config_r15.min, config_r15.max, config_r15.step));
|
|
314
306
|
}
|
|
315
307
|
}
|
|
316
308
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template(rf, ctx) {
|
|
317
309
|
if (rf & 1) {
|
|
318
|
-
i0.ɵɵelementStart(0, "option",
|
|
310
|
+
i0.ɵɵelementStart(0, "option", 43);
|
|
319
311
|
i0.ɵɵtext(1);
|
|
320
312
|
i0.ɵɵelementEnd();
|
|
321
313
|
}
|
|
322
314
|
if (rf & 2) {
|
|
323
|
-
const
|
|
324
|
-
i0.ɵɵproperty("value",
|
|
315
|
+
const singleOption_r53 = ctx.$implicit;
|
|
316
|
+
i0.ɵɵproperty("value", singleOption_r53);
|
|
325
317
|
i0.ɵɵadvance(1);
|
|
326
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
318
|
+
i0.ɵɵtextInterpolate1(" ", singleOption_r53, " ");
|
|
327
319
|
}
|
|
328
320
|
}
|
|
329
321
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) {
|
|
330
322
|
if (rf & 1) {
|
|
331
|
-
const
|
|
332
|
-
i0.ɵɵelementStart(0, "select",
|
|
333
|
-
i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(
|
|
334
|
-
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option",
|
|
323
|
+
const _r56 = i0.ɵɵgetCurrentView();
|
|
324
|
+
i0.ɵɵelementStart(0, "select", 41);
|
|
325
|
+
i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r56); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onChange($event.target.value)); });
|
|
326
|
+
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option", 42);
|
|
335
327
|
i0.ɵɵelementEnd();
|
|
336
328
|
}
|
|
337
329
|
if (rf & 2) {
|
|
@@ -340,7 +332,7 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Temp
|
|
|
340
332
|
i0.ɵɵproperty("ngForOf", config_r15.options);
|
|
341
333
|
}
|
|
342
334
|
}
|
|
343
|
-
const
|
|
335
|
+
const _c2$1 = function (a0) { return { "p-0": a0 }; };
|
|
344
336
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf, ctx) {
|
|
345
337
|
if (rf & 1) {
|
|
346
338
|
i0.ɵɵelementStart(0, "div", 27);
|
|
@@ -348,13 +340,13 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf,
|
|
|
348
340
|
i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
|
|
349
341
|
i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template, 2, 1, "button", 30);
|
|
350
342
|
i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template, 1, 1, "input", 31);
|
|
351
|
-
i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template,
|
|
343
|
+
i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template, 7, 4, "div", 32);
|
|
352
344
|
i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template, 2, 1, "select", 33);
|
|
353
345
|
i0.ɵɵelementEnd();
|
|
354
346
|
}
|
|
355
347
|
if (rf & 2) {
|
|
356
348
|
const config_r15 = i0.ɵɵnextContext(2).$implicit;
|
|
357
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7,
|
|
349
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2$1, config_r15.type === "button"));
|
|
358
350
|
i0.ɵɵadvance(1);
|
|
359
351
|
i0.ɵɵproperty("ngSwitchCase", "checkbox");
|
|
360
352
|
i0.ɵɵadvance(1);
|
|
@@ -397,12 +389,12 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) {
|
|
|
397
389
|
i0.ɵɵproperty("ngIf", !config_r15.hidden);
|
|
398
390
|
}
|
|
399
391
|
}
|
|
400
|
-
const
|
|
392
|
+
const _c3$1 = function (a0) { return { "top.px": a0 }; };
|
|
401
393
|
function PhoenixMenuItemComponent_div_7_Template(rf, ctx) {
|
|
402
394
|
if (rf & 1) {
|
|
403
|
-
const
|
|
395
|
+
const _r61 = i0.ɵɵgetCurrentView();
|
|
404
396
|
i0.ɵɵelementStart(0, "div")(1, "button", 15);
|
|
405
|
-
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(
|
|
397
|
+
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r61); const ctx_r60 = i0.ɵɵnextContext(); ctx_r60.calculateConfigTop(); return i0.ɵɵresetView(ctx_r60.currentNode.configActive = !ctx_r60.currentNode.configActive); });
|
|
406
398
|
i0.ɵɵnamespaceSVG();
|
|
407
399
|
i0.ɵɵelementStart(2, "svg");
|
|
408
400
|
i0.ɵɵelement(3, "use", 16);
|
|
@@ -418,40 +410,40 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) {
|
|
|
418
410
|
i0.ɵɵadvance(4);
|
|
419
411
|
i0.ɵɵproperty("ngIf", ctx_r4.currentNode.configActive);
|
|
420
412
|
i0.ɵɵadvance(1);
|
|
421
|
-
i0.ɵɵproperty("hidden", !ctx_r4.currentNode.configActive)("ngStyle", i0.ɵɵpureFunction1(4,
|
|
413
|
+
i0.ɵɵproperty("hidden", !ctx_r4.currentNode.configActive)("ngStyle", i0.ɵɵpureFunction1(4, _c3$1, ctx_r4.configTop));
|
|
422
414
|
i0.ɵɵadvance(1);
|
|
423
415
|
i0.ɵɵproperty("ngForOf", ctx_r4.castConfigsToAny(ctx_r4.currentNode.configs));
|
|
424
416
|
}
|
|
425
417
|
}
|
|
426
|
-
const
|
|
418
|
+
const _c4$1 = function (a0) { return { expanded: a0 }; };
|
|
427
419
|
function PhoenixMenuItemComponent_button_8_Template(rf, ctx) {
|
|
428
420
|
if (rf & 1) {
|
|
429
|
-
const
|
|
430
|
-
i0.ɵɵelementStart(0, "button",
|
|
431
|
-
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
421
|
+
const _r63 = i0.ɵɵgetCurrentView();
|
|
422
|
+
i0.ɵɵelementStart(0, "button", 44);
|
|
423
|
+
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r63); const ctx_r62 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r62.currentNode.childrenActive = !ctx_r62.currentNode.childrenActive); });
|
|
432
424
|
i0.ɵɵnamespaceSVG();
|
|
433
425
|
i0.ɵɵelementStart(1, "svg");
|
|
434
|
-
i0.ɵɵelement(2, "use",
|
|
426
|
+
i0.ɵɵelement(2, "use", 45);
|
|
435
427
|
i0.ɵɵelementEnd()();
|
|
436
428
|
}
|
|
437
429
|
if (rf & 2) {
|
|
438
430
|
const ctx_r5 = i0.ɵɵnextContext();
|
|
439
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1,
|
|
431
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c4$1, ctx_r5.currentNode.childrenActive));
|
|
440
432
|
}
|
|
441
433
|
}
|
|
442
434
|
function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx) {
|
|
443
435
|
if (rf & 1) {
|
|
444
|
-
i0.ɵɵelement(0, "app-phoenix-menu-item",
|
|
436
|
+
i0.ɵɵelement(0, "app-phoenix-menu-item", 48);
|
|
445
437
|
}
|
|
446
438
|
if (rf & 2) {
|
|
447
|
-
const
|
|
448
|
-
i0.ɵɵproperty("currentNode",
|
|
439
|
+
const childNode_r65 = ctx.$implicit;
|
|
440
|
+
i0.ɵɵproperty("currentNode", childNode_r65);
|
|
449
441
|
}
|
|
450
442
|
}
|
|
451
443
|
function PhoenixMenuItemComponent_div_9_Template(rf, ctx) {
|
|
452
444
|
if (rf & 1) {
|
|
453
|
-
i0.ɵɵelementStart(0, "div",
|
|
454
|
-
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item",
|
|
445
|
+
i0.ɵɵelementStart(0, "div", 46);
|
|
446
|
+
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item", 47);
|
|
455
447
|
i0.ɵɵelementEnd();
|
|
456
448
|
}
|
|
457
449
|
if (rf & 2) {
|
|
@@ -485,7 +477,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
|
|
|
485
477
|
let _t;
|
|
486
478
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.phoenixMenuItem = _t.first);
|
|
487
479
|
}
|
|
488
|
-
}, inputs: { currentNode: "currentNode" }, decls: 10, vars: 5, consts: [[1, "phoenix-menu-item"], ["phoenixMenuItem", ""], [1, "phoenix-menu-item-left", "align-items-center"], [4, "ngIf", "ngIfElse"], ["nodeName", ""], [1, "phoenix-menu-item-right"], [4, "ngIf"], ["class", "icon-wrapper icon-button btn-blank item-expand", "data-testid", "dropdown", 3, "ngClass", "click", 4, "ngIf"], ["class", "phoenix-menu-children", 4, "ngIf"], [3, "checked", "change"], [4, "ngTemplateOutlet"], [1, "d-flex", "w-100", "align-items-center"], ["class", "icon-wrapper item-icon", 4, "ngIf"], [1, "item-name", 3, "title"], [1, "icon-wrapper", "item-icon"], [1, "icon-wrapper", "icon-button", "btn-blank", "item-settings", 3, "click"], ["href", "assets/icons/gear.svg#gear"], ["class", "item-config-backdrop", 3, "click", 4, "ngIf"], [1, "item-config", 3, "hidden", "ngStyle"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "item-config-backdrop", 3, "click"], [3, "ngSwitch"], ["class", "item-config-single", 4, "ngIf"], [1, "item-config-single"], ["class", "item-config-label", "for", "item-config-field", 3, "ngClass", 4, "ngIf"], ["class", "item-config-data", 3, "ngClass", 4, "ngIf"], ["for", "item-config-field", 1, "item-config-label", 3, "ngClass"], [1, "item-config-data", 3, "ngClass"], [3, "checked", "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange", 4, "ngSwitchCase"], ["class", "w-100", "mat-button", "", "mat-stroked-button", "", 3, "click", 4, "ngSwitchCase"], ["id", "item-config-field", "type", "color", 3, "value", "input", 4, "ngSwitchCase"], ["class", "range-slider", 4, "ngSwitchCase"], ["id", "item-config-field", "class", "w-100", 3, "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange"], ["mat-button", "", "mat-stroked-button", "", 1, "w-100", 3, "click"], ["id", "item-config-field", "type", "color", 3, "value", "input"], [1, "range-slider"], [1, "range-slider-inputs", "d-flex", "justify-content-between"], ["type", "number", "placeholder", "Min", "step", "config.step", 1, "form-control", "form-control-sm", 3, "value", "input"], ["type", "number", "placeholder", "Max", "step", "config.step", 1, "form-control", "form-control-sm", 3, "value", "input"], ["
|
|
480
|
+
}, inputs: { currentNode: "currentNode" }, decls: 10, vars: 5, consts: [[1, "phoenix-menu-item"], ["phoenixMenuItem", ""], [1, "phoenix-menu-item-left", "align-items-center"], [4, "ngIf", "ngIfElse"], ["nodeName", ""], [1, "phoenix-menu-item-right"], [4, "ngIf"], ["class", "icon-wrapper icon-button btn-blank item-expand", "data-testid", "dropdown", 3, "ngClass", "click", 4, "ngIf"], ["class", "phoenix-menu-children", 4, "ngIf"], [3, "checked", "change"], [4, "ngTemplateOutlet"], [1, "d-flex", "w-100", "align-items-center"], ["class", "icon-wrapper item-icon", 4, "ngIf"], [1, "item-name", 3, "title"], [1, "icon-wrapper", "item-icon"], [1, "icon-wrapper", "icon-button", "btn-blank", "item-settings", 3, "click"], ["href", "assets/icons/gear.svg#gear"], ["class", "item-config-backdrop", 3, "click", 4, "ngIf"], [1, "item-config", 3, "hidden", "ngStyle"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "item-config-backdrop", 3, "click"], [3, "ngSwitch"], ["class", "item-config-single", 4, "ngIf"], [1, "item-config-single"], ["class", "item-config-label", "for", "item-config-field", 3, "ngClass", 4, "ngIf"], ["class", "item-config-data", 3, "ngClass", 4, "ngIf"], ["for", "item-config-field", 1, "item-config-label", 3, "ngClass"], [1, "item-config-data", 3, "ngClass"], [3, "checked", "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange", 4, "ngSwitchCase"], ["class", "w-100", "mat-button", "", "mat-stroked-button", "", 3, "click", 4, "ngSwitchCase"], ["id", "item-config-field", "type", "color", 3, "value", "input", 4, "ngSwitchCase"], ["class", "range-slider", 4, "ngSwitchCase"], ["id", "item-config-field", "class", "w-100", 3, "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange"], ["mat-button", "", "mat-stroked-button", "", 1, "w-100", 3, "click"], ["id", "item-config-field", "type", "color", 3, "value", "input"], [1, "range-slider"], [1, "range-slider-inputs", "d-flex", "justify-content-between"], ["type", "number", "placeholder", "Min", "step", "config.step", 1, "form-control", "form-control-sm", 3, "value", "input"], ["type", "number", "placeholder", "Max", "step", "config.step", 1, "form-control", "form-control-sm", 3, "value", "input"], ["id", "item-config-field", 1, "w-100", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], ["data-testid", "dropdown", 1, "icon-wrapper", "icon-button", "btn-blank", "item-expand", 3, "ngClass", "click"], ["href", "assets/icons/expand.svg#expand"], [1, "phoenix-menu-children"], [3, "currentNode", 4, "ngFor", "ngForOf"], [3, "currentNode"]], template: function PhoenixMenuItemComponent_Template(rf, ctx) {
|
|
489
481
|
if (rf & 1) {
|
|
490
482
|
i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
|
|
491
483
|
i0.ɵɵtemplate(3, PhoenixMenuItemComponent_ng_container_3_Template, 3, 2, "ng-container", 3);
|
|
@@ -508,11 +500,11 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
|
|
|
508
500
|
i0.ɵɵadvance(1);
|
|
509
501
|
i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
|
|
510
502
|
}
|
|
511
|
-
}, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.MatSlideToggle, i4$1.MatCheckbox,
|
|
503
|
+
}, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.MatSlideToggle, i4$1.MatCheckbox, PhoenixMenuItemComponent, ConfigSliderComponent], styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}\n"], encapsulation: 2 });
|
|
512
504
|
(function () {
|
|
513
505
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuItemComponent, [{
|
|
514
506
|
type: Component,
|
|
515
|
-
args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n <div class=\"phoenix-menu-item-left align-items-center\">\n <!-- If the item has some toggle function -->\n <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n <mat-slide-toggle\n [checked]=\"currentNode.toggleState\"\n (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n >\n <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n </mat-slide-toggle>\n </ng-container>\n <!-- If the item has no toggle function -->\n <ng-template #nodeName>\n <span class=\"d-flex w-100 align-items-center\">\n <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n <svg>\n <use\n attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n currentNode.icon\n }}\"\n ></use>\n </svg>\n </span>\n <span class=\"item-name\" [title]=\"currentNode.name\">{{\n currentNode.name\n }}</span>\n </span>\n </ng-template>\n </div>\n <div class=\"phoenix-menu-item-right\">\n <div *ngIf=\"currentNode.configs.length > 0\">\n <button\n class=\"icon-wrapper icon-button btn-blank item-settings\"\n (click)=\"\n calculateConfigTop();\n currentNode.configActive = !currentNode.configActive\n \"\n >\n <svg>\n <use href=\"assets/icons/gear.svg#gear\"></use>\n </svg>\n </button>\n <div\n class=\"item-config-backdrop\"\n *ngIf=\"currentNode.configActive\"\n (click)=\"currentNode.configActive = false\"\n ></div>\n <div\n class=\"item-config\"\n [hidden]=\"!currentNode.configActive\"\n [ngStyle]=\"{ 'top.px': configTop }\"\n >\n <ng-container\n *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n [ngSwitch]=\"config.type\"\n >\n <!-- Config types -->\n <div class=\"item-config-single\" *ngIf=\"!config.hidden\">\n <label\n class=\"item-config-label\"\n for=\"item-config-field\"\n *ngIf=\"config.type !== 'button'\"\n [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n >\n {{ config.label }}\n </label>\n <div\n class=\"item-config-data\"\n [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n *ngIf=\"config.type !== 'label'\"\n >\n <mat-checkbox\n *ngSwitchCase=\"'checkbox'\"\n [checked]=\"config.isChecked\"\n (change)=\"\n config.onChange($event.checked);\n config.isChecked = $event.checked\n \"\n ></mat-checkbox>\n\n <app-config-slider\n *ngSwitchCase=\"'slider'\"\n [value]=\"config.value\"\n (onChange)=\"config.onChange($event); config.value = $event\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [allowCustomValue]=\"config.allowCustomValue\"\n >\n </app-config-slider>\n\n <button\n *ngSwitchCase=\"'button'\"\n class=\"w-100\"\n (click)=\"config.onClick()\"\n mat-button\n mat-stroked-button\n >\n {{ config.label }}\n </button>\n\n <input\n *ngSwitchCase=\"'color'\"\n id=\"item-config-field\"\n type=\"color\"\n [value]=\"config.color\"\n (input)=\"\n config.onChange($event.target.value);\n config.color = $event.target.value\n \"\n />\n\n <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <mat-checkbox\n [checked]=\"config.enableMin\"\n (change)=\"config.setEnableMin($event.checked)\"\n ></mat-checkbox>\n <mat-checkbox\n [checked]=\"config.enableMax\"\n (change)=\"config.setEnableMax($event.checked)\"\n ></mat-checkbox>\n </div>\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <input\n type=\"number\"\n placeholder=\"Min\"\n class=\"form-control form-control-sm\"\n [value]=\"config.value\"\n (input)=\"\n config.value = $event.target.value;\n config.onChange(config)\n \"\n step=\"config.step\"\n />\n <input\n type=\"number\"\n placeholder=\"Max\"\n class=\"form-control form-control-sm\"\n [value]=\"config.highValue\"\n (input)=\"\n config.highValue = $event.target.value;\n config.onChange(config)\n \"\n step=\"config.step\"\n />\n </div>\n <ngx-slider\n [(value)]=\"config.value\"\n [(highValue)]=\"config.highValue\"\n (userChange)=\"config.onChange($event)\"\n thumbLabel\n [options]=\"{\n floor: config.min,\n ceil: config.max,\n step: config.step,\n animate: false\n }\"\n ></ngx-slider>\n </div>\n\n <select\n *ngSwitchCase=\"'select'\"\n id=\"item-config-field\"\n class=\"w-100\"\n (change)=\"config.onChange($event.target.value)\"\n >\n <option\n *ngFor=\"let singleOption of config.options\"\n [value]=\"singleOption\"\n >\n {{ singleOption }}\n </option>\n </select>\n </div>\n </div>\n <!-- Config types END -->\n </ng-container>\n </div>\n </div>\n <button\n class=\"icon-wrapper icon-button btn-blank item-expand\"\n *ngIf=\"currentNode.children.length > 0\"\n (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n data-testid=\"dropdown\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n <app-phoenix-menu-item\n *ngFor=\"let childNode of currentNode.children\"\n [currentNode]=\"childNode\"\n >\n </app-phoenix-menu-item>\n</div>\n", styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"] }]
|
|
507
|
+
args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n <div class=\"phoenix-menu-item-left align-items-center\">\n <!-- If the item has some toggle function -->\n <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n <mat-slide-toggle\n [checked]=\"currentNode.toggleState\"\n (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n >\n <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n </mat-slide-toggle>\n </ng-container>\n <!-- If the item has no toggle function -->\n <ng-template #nodeName>\n <span class=\"d-flex w-100 align-items-center\">\n <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n <svg>\n <use\n attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n currentNode.icon\n }}\"\n ></use>\n </svg>\n </span>\n <span class=\"item-name\" [title]=\"currentNode.name\">{{\n currentNode.name\n }}</span>\n </span>\n </ng-template>\n </div>\n <div class=\"phoenix-menu-item-right\">\n <div *ngIf=\"currentNode.configs.length > 0\">\n <button\n class=\"icon-wrapper icon-button btn-blank item-settings\"\n (click)=\"\n calculateConfigTop();\n currentNode.configActive = !currentNode.configActive\n \"\n >\n <svg>\n <use href=\"assets/icons/gear.svg#gear\"></use>\n </svg>\n </button>\n <div\n class=\"item-config-backdrop\"\n *ngIf=\"currentNode.configActive\"\n (click)=\"currentNode.configActive = false\"\n ></div>\n <div\n class=\"item-config\"\n [hidden]=\"!currentNode.configActive\"\n [ngStyle]=\"{ 'top.px': configTop }\"\n >\n <ng-container\n *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n [ngSwitch]=\"config.type\"\n >\n <!-- Config types -->\n <div class=\"item-config-single\" *ngIf=\"!config.hidden\">\n <label\n class=\"item-config-label\"\n for=\"item-config-field\"\n *ngIf=\"config.type !== 'button'\"\n [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n >\n {{ config.label }}\n </label>\n <div\n class=\"item-config-data\"\n [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n *ngIf=\"config.type !== 'label'\"\n >\n <mat-checkbox\n *ngSwitchCase=\"'checkbox'\"\n [checked]=\"config.isChecked\"\n (change)=\"\n config.onChange($event.checked);\n config.isChecked = $event.checked\n \"\n ></mat-checkbox>\n\n <app-config-slider\n *ngSwitchCase=\"'slider'\"\n [value]=\"config.value\"\n (onChange)=\"config.onChange($event); config.value = $event\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [allowCustomValue]=\"config.allowCustomValue\"\n >\n </app-config-slider>\n\n <button\n *ngSwitchCase=\"'button'\"\n class=\"w-100\"\n (click)=\"config.onClick()\"\n mat-button\n mat-stroked-button\n >\n {{ config.label }}\n </button>\n\n <input\n *ngSwitchCase=\"'color'\"\n id=\"item-config-field\"\n type=\"color\"\n [value]=\"config.color\"\n (input)=\"\n config.onChange($event.target.value);\n config.color = $event.target.value\n \"\n />\n\n <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <mat-checkbox\n [checked]=\"config.enableMin\"\n (change)=\"config.setEnableMin($event.checked)\"\n ></mat-checkbox>\n <mat-checkbox\n [checked]=\"config.enableMax\"\n (change)=\"config.setEnableMax($event.checked)\"\n ></mat-checkbox>\n </div>\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <input\n type=\"number\"\n placeholder=\"Min\"\n class=\"form-control form-control-sm\"\n [value]=\"config.value\"\n (input)=\"\n config.value = $event.target.value;\n config.onChange(config)\n \"\n step=\"config.step\"\n />\n <input\n type=\"number\"\n placeholder=\"Max\"\n class=\"form-control form-control-sm\"\n [value]=\"config.highValue\"\n (input)=\"\n config.highValue = $event.target.value;\n config.onChange(config)\n \"\n step=\"config.step\"\n />\n </div>\n </div>\n\n <select\n *ngSwitchCase=\"'select'\"\n id=\"item-config-field\"\n class=\"w-100\"\n (change)=\"config.onChange($event.target.value)\"\n >\n <option\n *ngFor=\"let singleOption of config.options\"\n [value]=\"singleOption\"\n >\n {{ singleOption }}\n </option>\n </select>\n </div>\n </div>\n <!-- Config types END -->\n </ng-container>\n </div>\n </div>\n <button\n class=\"icon-wrapper icon-button btn-blank item-expand\"\n *ngIf=\"currentNode.children.length > 0\"\n (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n data-testid=\"dropdown\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n <app-phoenix-menu-item\n *ngFor=\"let childNode of currentNode.children\"\n [currentNode]=\"childNode\"\n >\n </app-phoenix-menu-item>\n</div>\n", styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}\n"] }]
|
|
516
508
|
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { currentNode: [{
|
|
517
509
|
type: Input
|
|
518
510
|
}], phoenixMenuItem: [{
|
|
@@ -3839,7 +3831,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3839
3831
|
MatSlideToggleModule,
|
|
3840
3832
|
MatCheckboxModule,
|
|
3841
3833
|
MatIconModule,
|
|
3842
|
-
NgxSliderModule,
|
|
3843
3834
|
CdkTreeModule,
|
|
3844
3835
|
MatTabsModule] });
|
|
3845
3836
|
(function () {
|
|
@@ -3862,7 +3853,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3862
3853
|
MatSlideToggleModule,
|
|
3863
3854
|
MatCheckboxModule,
|
|
3864
3855
|
MatIconModule,
|
|
3865
|
-
NgxSliderModule,
|
|
3866
3856
|
CdkTreeModule,
|
|
3867
3857
|
MatTabsModule,
|
|
3868
3858
|
],
|
|
@@ -3947,7 +3937,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3947
3937
|
MatSlideToggleModule,
|
|
3948
3938
|
MatCheckboxModule,
|
|
3949
3939
|
MatIconModule,
|
|
3950
|
-
NgxSliderModule,
|
|
3951
3940
|
CdkTreeModule,
|
|
3952
3941
|
MatTabsModule], exports: [NavComponent,
|
|
3953
3942
|
UiMenuWrapperComponent,
|