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';
|
|
@@ -238,7 +236,6 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Templ
|
|
|
238
236
|
const config_r15 = i0.ɵɵnextContext(3).$implicit;
|
|
239
237
|
i0.ɵɵproperty("value", config_r15.color);
|
|
240
238
|
} }
|
|
241
|
-
const _c2$1 = function (a0, a1, a2) { return { floor: a0, ceil: a1, step: a2, animate: false }; };
|
|
242
239
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
243
240
|
const _r44 = i0.ɵɵgetCurrentView();
|
|
244
241
|
i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "mat-checkbox", 9);
|
|
@@ -252,10 +249,7 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Templat
|
|
|
252
249
|
i0.ɵɵelementEnd();
|
|
253
250
|
i0.ɵɵelementStart(6, "input", 40);
|
|
254
251
|
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)); });
|
|
255
|
-
i0.ɵɵelementEnd()();
|
|
256
|
-
i0.ɵɵelementStart(7, "ngx-slider", 41);
|
|
257
|
-
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)); });
|
|
258
|
-
i0.ɵɵelementEnd()();
|
|
252
|
+
i0.ɵɵelementEnd()()();
|
|
259
253
|
} if (rf & 2) {
|
|
260
254
|
const config_r15 = i0.ɵɵnextContext(3).$implicit;
|
|
261
255
|
i0.ɵɵadvance(2);
|
|
@@ -266,43 +260,41 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Templat
|
|
|
266
260
|
i0.ɵɵproperty("value", config_r15.value);
|
|
267
261
|
i0.ɵɵadvance(1);
|
|
268
262
|
i0.ɵɵproperty("value", config_r15.highValue);
|
|
269
|
-
i0.ɵɵadvance(1);
|
|
270
|
-
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));
|
|
271
263
|
} }
|
|
272
264
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template(rf, ctx) { if (rf & 1) {
|
|
273
|
-
i0.ɵɵelementStart(0, "option",
|
|
265
|
+
i0.ɵɵelementStart(0, "option", 43);
|
|
274
266
|
i0.ɵɵtext(1);
|
|
275
267
|
i0.ɵɵelementEnd();
|
|
276
268
|
} if (rf & 2) {
|
|
277
|
-
const
|
|
278
|
-
i0.ɵɵproperty("value",
|
|
269
|
+
const singleOption_r53 = ctx.$implicit;
|
|
270
|
+
i0.ɵɵproperty("value", singleOption_r53);
|
|
279
271
|
i0.ɵɵadvance(1);
|
|
280
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
272
|
+
i0.ɵɵtextInterpolate1(" ", singleOption_r53, " ");
|
|
281
273
|
} }
|
|
282
274
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) { if (rf & 1) {
|
|
283
|
-
const
|
|
284
|
-
i0.ɵɵelementStart(0, "select",
|
|
285
|
-
i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(
|
|
286
|
-
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option",
|
|
275
|
+
const _r56 = i0.ɵɵgetCurrentView();
|
|
276
|
+
i0.ɵɵelementStart(0, "select", 41);
|
|
277
|
+
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)); });
|
|
278
|
+
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option", 42);
|
|
287
279
|
i0.ɵɵelementEnd();
|
|
288
280
|
} if (rf & 2) {
|
|
289
281
|
const config_r15 = i0.ɵɵnextContext(3).$implicit;
|
|
290
282
|
i0.ɵɵadvance(1);
|
|
291
283
|
i0.ɵɵproperty("ngForOf", config_r15.options);
|
|
292
284
|
} }
|
|
293
|
-
const
|
|
285
|
+
const _c2$1 = function (a0) { return { "p-0": a0 }; };
|
|
294
286
|
function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
295
287
|
i0.ɵɵelementStart(0, "div", 27);
|
|
296
288
|
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28);
|
|
297
289
|
i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
|
|
298
290
|
i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template, 2, 1, "button", 30);
|
|
299
291
|
i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template, 1, 1, "input", 31);
|
|
300
|
-
i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template,
|
|
292
|
+
i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template, 7, 4, "div", 32);
|
|
301
293
|
i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template, 2, 1, "select", 33);
|
|
302
294
|
i0.ɵɵelementEnd();
|
|
303
295
|
} if (rf & 2) {
|
|
304
296
|
const config_r15 = i0.ɵɵnextContext(2).$implicit;
|
|
305
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7,
|
|
297
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2$1, config_r15.type === "button"));
|
|
306
298
|
i0.ɵɵadvance(1);
|
|
307
299
|
i0.ɵɵproperty("ngSwitchCase", "checkbox");
|
|
308
300
|
i0.ɵɵadvance(1);
|
|
@@ -338,11 +330,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) { if (r
|
|
|
338
330
|
i0.ɵɵadvance(1);
|
|
339
331
|
i0.ɵɵproperty("ngIf", !config_r15.hidden);
|
|
340
332
|
} }
|
|
341
|
-
const
|
|
333
|
+
const _c3$1 = function (a0) { return { "top.px": a0 }; };
|
|
342
334
|
function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
343
|
-
const
|
|
335
|
+
const _r61 = i0.ɵɵgetCurrentView();
|
|
344
336
|
i0.ɵɵelementStart(0, "div")(1, "button", 15);
|
|
345
|
-
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(
|
|
337
|
+
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); });
|
|
346
338
|
i0.ɵɵnamespaceSVG();
|
|
347
339
|
i0.ɵɵelementStart(2, "svg");
|
|
348
340
|
i0.ɵɵelement(3, "use", 16);
|
|
@@ -357,32 +349,32 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
357
349
|
i0.ɵɵadvance(4);
|
|
358
350
|
i0.ɵɵproperty("ngIf", ctx_r4.currentNode.configActive);
|
|
359
351
|
i0.ɵɵadvance(1);
|
|
360
|
-
i0.ɵɵproperty("hidden", !ctx_r4.currentNode.configActive)("ngStyle", i0.ɵɵpureFunction1(4,
|
|
352
|
+
i0.ɵɵproperty("hidden", !ctx_r4.currentNode.configActive)("ngStyle", i0.ɵɵpureFunction1(4, _c3$1, ctx_r4.configTop));
|
|
361
353
|
i0.ɵɵadvance(1);
|
|
362
354
|
i0.ɵɵproperty("ngForOf", ctx_r4.castConfigsToAny(ctx_r4.currentNode.configs));
|
|
363
355
|
} }
|
|
364
|
-
const
|
|
356
|
+
const _c4$1 = function (a0) { return { expanded: a0 }; };
|
|
365
357
|
function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
|
|
366
|
-
const
|
|
367
|
-
i0.ɵɵelementStart(0, "button",
|
|
368
|
-
i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
358
|
+
const _r63 = i0.ɵɵgetCurrentView();
|
|
359
|
+
i0.ɵɵelementStart(0, "button", 44);
|
|
360
|
+
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); });
|
|
369
361
|
i0.ɵɵnamespaceSVG();
|
|
370
362
|
i0.ɵɵelementStart(1, "svg");
|
|
371
|
-
i0.ɵɵelement(2, "use",
|
|
363
|
+
i0.ɵɵelement(2, "use", 45);
|
|
372
364
|
i0.ɵɵelementEnd()();
|
|
373
365
|
} if (rf & 2) {
|
|
374
366
|
const ctx_r5 = i0.ɵɵnextContext();
|
|
375
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1,
|
|
367
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c4$1, ctx_r5.currentNode.childrenActive));
|
|
376
368
|
} }
|
|
377
369
|
function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx) { if (rf & 1) {
|
|
378
|
-
i0.ɵɵelement(0, "app-phoenix-menu-item",
|
|
370
|
+
i0.ɵɵelement(0, "app-phoenix-menu-item", 48);
|
|
379
371
|
} if (rf & 2) {
|
|
380
|
-
const
|
|
381
|
-
i0.ɵɵproperty("currentNode",
|
|
372
|
+
const childNode_r65 = ctx.$implicit;
|
|
373
|
+
i0.ɵɵproperty("currentNode", childNode_r65);
|
|
382
374
|
} }
|
|
383
375
|
function PhoenixMenuItemComponent_div_9_Template(rf, ctx) { if (rf & 1) {
|
|
384
|
-
i0.ɵɵelementStart(0, "div",
|
|
385
|
-
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item",
|
|
376
|
+
i0.ɵɵelementStart(0, "div", 46);
|
|
377
|
+
i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item", 47);
|
|
386
378
|
i0.ɵɵelementEnd();
|
|
387
379
|
} if (rf & 2) {
|
|
388
380
|
const ctx_r6 = i0.ɵɵnextContext();
|
|
@@ -411,7 +403,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
|
|
|
411
403
|
} if (rf & 2) {
|
|
412
404
|
let _t;
|
|
413
405
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.phoenixMenuItem = _t.first);
|
|
414
|
-
} }, 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"], ["
|
|
406
|
+
} }, 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) { if (rf & 1) {
|
|
415
407
|
i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
|
|
416
408
|
i0.ɵɵtemplate(3, PhoenixMenuItemComponent_ng_container_3_Template, 3, 2, "ng-container", 3);
|
|
417
409
|
i0.ɵɵtemplate(4, PhoenixMenuItemComponent_ng_template_4_Template, 4, 3, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
|
|
@@ -431,10 +423,10 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
|
|
|
431
423
|
i0.ɵɵproperty("ngIf", ctx.currentNode.children.length > 0);
|
|
432
424
|
i0.ɵɵadvance(1);
|
|
433
425
|
i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
|
|
434
|
-
} }, 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,
|
|
426
|
+
} }, 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 });
|
|
435
427
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuItemComponent, [{
|
|
436
428
|
type: Component,
|
|
437
|
-
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"] }]
|
|
429
|
+
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"] }]
|
|
438
430
|
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { currentNode: [{
|
|
439
431
|
type: Input
|
|
440
432
|
}], phoenixMenuItem: [{
|
|
@@ -3401,7 +3393,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3401
3393
|
MatSlideToggleModule,
|
|
3402
3394
|
MatCheckboxModule,
|
|
3403
3395
|
MatIconModule,
|
|
3404
|
-
NgxSliderModule,
|
|
3405
3396
|
CdkTreeModule,
|
|
3406
3397
|
MatTabsModule] });
|
|
3407
3398
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixUIModule, [{
|
|
@@ -3423,7 +3414,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3423
3414
|
MatSlideToggleModule,
|
|
3424
3415
|
MatCheckboxModule,
|
|
3425
3416
|
MatIconModule,
|
|
3426
|
-
NgxSliderModule,
|
|
3427
3417
|
CdkTreeModule,
|
|
3428
3418
|
MatTabsModule,
|
|
3429
3419
|
],
|
|
@@ -3506,7 +3496,6 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
|
3506
3496
|
MatSlideToggleModule,
|
|
3507
3497
|
MatCheckboxModule,
|
|
3508
3498
|
MatIconModule,
|
|
3509
|
-
NgxSliderModule,
|
|
3510
3499
|
CdkTreeModule,
|
|
3511
3500
|
MatTabsModule], exports: [NavComponent,
|
|
3512
3501
|
UiMenuWrapperComponent,
|