@natec/mef-dev-ui-kit 16.2.2 → 16.2.4
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 +1 -6
- package/esm2022/lib/markup-kit/card/card-long/card-long.component.mjs +16 -16
- package/esm2022/lib/markup-kit/card/card-simple/card-simple.component.mjs +7 -7
- package/esm2022/lib/markup-kit/collapse/collapse/collapse.component.mjs +3 -3
- package/esm2022/lib/markup-kit/executors/index.mjs +5 -0
- package/esm2022/lib/markup-kit/executors/mefdev-executor-page/mefdev-executor-page.component.mjs +44 -0
- package/esm2022/lib/markup-kit/executors/stage/stage.component.mjs +24 -0
- package/esm2022/lib/markup-kit/executors/step-executor/step-executor.component.mjs +110 -0
- package/esm2022/lib/markup-kit/executors/step-executor.module.mjs +38 -0
- package/esm2022/lib/markup-kit/modals/fill/fill.component.mjs +3 -3
- package/esm2022/lib/markup-kit/modals/slide-up/slide-up.component.mjs +3 -3
- package/esm2022/lib/markup-kit/slider/index.mjs +3 -0
- package/esm2022/lib/markup-kit/slider/slider/slider.component.mjs +120 -0
- package/esm2022/lib/markup-kit/slider/slider.module.mjs +28 -0
- package/esm2022/lib/markup-kit/utils/datepicker/datepicker/datepicker.component.mjs +18 -7
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/natec-mef-dev-ui-kit.mjs +384 -34
- package/fesm2022/natec-mef-dev-ui-kit.mjs.map +1 -1
- package/lib/markup-kit/card/card-long/card-long.component.d.ts +14 -14
- package/lib/markup-kit/card/card-simple/card-simple.component.d.ts +5 -5
- package/lib/markup-kit/card/card.module.d.ts +1 -1
- package/lib/markup-kit/executors/index.d.ts +4 -0
- package/lib/markup-kit/executors/mefdev-executor-page/mefdev-executor-page.component.d.ts +16 -0
- package/lib/markup-kit/executors/stage/stage.component.d.ts +9 -0
- package/lib/markup-kit/executors/step-executor/step-executor.component.d.ts +29 -0
- package/lib/markup-kit/executors/step-executor.module.d.ts +11 -0
- package/lib/markup-kit/slider/index.d.ts +2 -0
- package/lib/markup-kit/slider/slider/slider.component.d.ts +93 -0
- package/lib/markup-kit/slider/slider.module.d.ts +9 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/src/lib/styles/pg/vendor/ng-datatable.scss +5 -3
|
@@ -206,7 +206,7 @@ class CollapseComponent {
|
|
|
206
206
|
this._collapseSet.addTab(this);
|
|
207
207
|
}
|
|
208
208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\"
|
|
209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\"\r\n class=\"card-body mb-3\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
210
210
|
trigger('collapseState', [
|
|
211
211
|
state('inactive', style({
|
|
212
212
|
opacity: '0',
|
|
@@ -240,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
240
240
|
'[class.card]': 'true',
|
|
241
241
|
'[class.card-default]': 'true',
|
|
242
242
|
'[class.m-b-0]': 'true'
|
|
243
|
-
}, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\"
|
|
243
|
+
}, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\"\r\n class=\"card-body mb-3\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"] }]
|
|
244
244
|
}], ctorParameters: function () { return [{ type: CollapseSetComponent, decorators: [{
|
|
245
245
|
type: Host
|
|
246
246
|
}] }, { type: i0.ElementRef }]; }, propDecorators: { CardTitle: [{
|
|
@@ -1639,10 +1639,15 @@ class DatepickerComponent {
|
|
|
1639
1639
|
*/
|
|
1640
1640
|
onClick(event) {
|
|
1641
1641
|
const targetElement = event.target;
|
|
1642
|
-
const
|
|
1642
|
+
const calendar = this.elementRef.nativeElement.querySelector('.calendar');
|
|
1643
|
+
const monthDropdown = this.elementRef.nativeElement.querySelector('.monthDropdown');
|
|
1644
|
+
const yearDropdown = this.elementRef.nativeElement.querySelector('.yearDropdown');
|
|
1643
1645
|
const inputElement = this.elementRef.nativeElement.querySelector('input');
|
|
1644
|
-
if (
|
|
1645
|
-
|
|
1646
|
+
if (monthDropdown.contains(targetElement) && yearDropdown.contains(targetElement)) {
|
|
1647
|
+
this.toggleMonthDropdown(event);
|
|
1648
|
+
this.toggleYearDropdown(event);
|
|
1649
|
+
}
|
|
1650
|
+
if (calendar && calendar.contains(targetElement)) {
|
|
1646
1651
|
return;
|
|
1647
1652
|
}
|
|
1648
1653
|
if (inputElement && inputElement.contains(targetElement) && !this.isEditing) {
|
|
@@ -1652,6 +1657,7 @@ class DatepickerComponent {
|
|
|
1652
1657
|
else {
|
|
1653
1658
|
// Клік відбувся поза календарем та input, закриваємо календар
|
|
1654
1659
|
this.isCalendarOpen = false;
|
|
1660
|
+
this.isEditing = false;
|
|
1655
1661
|
}
|
|
1656
1662
|
}
|
|
1657
1663
|
/**
|
|
@@ -1711,8 +1717,9 @@ class DatepickerComponent {
|
|
|
1711
1717
|
* This method sets the 'isEditing' flag to true and stores the current formatted date for editing.
|
|
1712
1718
|
*/
|
|
1713
1719
|
toggleEdit() {
|
|
1714
|
-
this.isEditing =
|
|
1720
|
+
this.isEditing = !this.isEditing;
|
|
1715
1721
|
this.editedDate = this.formatSelectedDate(); // Store the current formatted date for editing
|
|
1722
|
+
this.isCalendarOpen = false;
|
|
1716
1723
|
}
|
|
1717
1724
|
/**
|
|
1718
1725
|
* Get a list of month names in the specified language and format.
|
|
@@ -1761,7 +1768,12 @@ class DatepickerComponent {
|
|
|
1761
1768
|
* ```
|
|
1762
1769
|
*/
|
|
1763
1770
|
toggleCalendar() {
|
|
1764
|
-
this.
|
|
1771
|
+
if (this.isEditing) {
|
|
1772
|
+
this.isCalendarOpen = false;
|
|
1773
|
+
}
|
|
1774
|
+
else {
|
|
1775
|
+
this.isCalendarOpen = !this.isCalendarOpen;
|
|
1776
|
+
}
|
|
1765
1777
|
}
|
|
1766
1778
|
/**
|
|
1767
1779
|
* Save the edited date input by the user, provided it matches the specified date format.
|
|
@@ -1778,7 +1790,6 @@ class DatepickerComponent {
|
|
|
1778
1790
|
const [day, month, year] = this.editedDate.split('/');
|
|
1779
1791
|
this.selectedDate = new Date(+year, +month - 1, +day);
|
|
1780
1792
|
this.formatDate();
|
|
1781
|
-
this.toggleCalendar();
|
|
1782
1793
|
}
|
|
1783
1794
|
}
|
|
1784
1795
|
/**
|
|
@@ -2730,7 +2741,7 @@ var CartTypeColors;
|
|
|
2730
2741
|
* Example of usage:
|
|
2731
2742
|
*
|
|
2732
2743
|
* ```
|
|
2733
|
-
* <
|
|
2744
|
+
* <mefdev-card-long
|
|
2734
2745
|
* [type_text]="'Type Text'"
|
|
2735
2746
|
* [type_color]="CartTypeColors.RED"
|
|
2736
2747
|
* [img]="'path/to/image.jpg'"
|
|
@@ -2752,7 +2763,7 @@ var CartTypeColors;
|
|
|
2752
2763
|
* <ng-template #third_col>
|
|
2753
2764
|
* <!-- Content for the third column -->
|
|
2754
2765
|
* </ng-template>
|
|
2755
|
-
* </
|
|
2766
|
+
* </mefdev-card-long>
|
|
2756
2767
|
* ```
|
|
2757
2768
|
*
|
|
2758
2769
|
* <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
|
|
@@ -2762,44 +2773,44 @@ class CardLongComponent {
|
|
|
2762
2773
|
/**
|
|
2763
2774
|
* Template for displaying the title of the card.
|
|
2764
2775
|
* ```
|
|
2765
|
-
* <
|
|
2776
|
+
* <mefdev-card-long>
|
|
2766
2777
|
* <ng-template #title>
|
|
2767
2778
|
* <!-- Content for the card title -->
|
|
2768
2779
|
* </ng-template>
|
|
2769
|
-
* </
|
|
2780
|
+
* </mefdev-card-long>
|
|
2770
2781
|
* ```
|
|
2771
2782
|
*/
|
|
2772
2783
|
title;
|
|
2773
2784
|
/**
|
|
2774
2785
|
* Template for displaying the parameters of the card.
|
|
2775
2786
|
* ```
|
|
2776
|
-
* <
|
|
2787
|
+
* <mefdev-card-long>
|
|
2777
2788
|
* <ng-template #params>
|
|
2778
2789
|
* <!-- Content for the card params -->
|
|
2779
2790
|
* </ng-template>
|
|
2780
|
-
* </
|
|
2791
|
+
* </mefdev-card-long>
|
|
2781
2792
|
* ```
|
|
2782
2793
|
*/
|
|
2783
2794
|
params;
|
|
2784
2795
|
/**
|
|
2785
2796
|
* Template for displaying the content of the second column.
|
|
2786
2797
|
* ```
|
|
2787
|
-
* <
|
|
2798
|
+
* <mefdev-card-long>
|
|
2788
2799
|
* <ng-template #second_col>
|
|
2789
2800
|
* <!-- Content for the card second column -->
|
|
2790
2801
|
* </ng-template>
|
|
2791
|
-
* </
|
|
2802
|
+
* </mefdev-card-long>
|
|
2792
2803
|
* ```
|
|
2793
2804
|
*/
|
|
2794
2805
|
second_col;
|
|
2795
2806
|
/**
|
|
2796
2807
|
* Template for displaying the content of the third column.
|
|
2797
2808
|
* ```
|
|
2798
|
-
* <
|
|
2809
|
+
* <mefdev-card-long>
|
|
2799
2810
|
* <ng-template #third_col>
|
|
2800
2811
|
* <!-- Content for the card third column -->
|
|
2801
2812
|
* </ng-template>
|
|
2802
|
-
* </
|
|
2813
|
+
* </mefdev-card-long>
|
|
2803
2814
|
* ```
|
|
2804
2815
|
*/
|
|
2805
2816
|
third_col;
|
|
@@ -2807,7 +2818,7 @@ class CardLongComponent {
|
|
|
2807
2818
|
* The text for the card type.
|
|
2808
2819
|
* @usageNotes
|
|
2809
2820
|
* ```
|
|
2810
|
-
* <
|
|
2821
|
+
* <mefdev-card-long type_text = "'Type'"></<mefdev-card-long>
|
|
2811
2822
|
* ```
|
|
2812
2823
|
*/
|
|
2813
2824
|
type_text;
|
|
@@ -2815,10 +2826,10 @@ class CardLongComponent {
|
|
|
2815
2826
|
* The color of the card type.
|
|
2816
2827
|
* @usageNotes
|
|
2817
2828
|
* ```
|
|
2818
|
-
* <
|
|
2829
|
+
* <mefdev-card-long type_color = "'RED'"></<mefdev-card-long>
|
|
2819
2830
|
* ```
|
|
2820
2831
|
* Colors: RED, UNSET, GREEN
|
|
2821
|
-
|
|
2832
|
+
|
|
2822
2833
|
*/
|
|
2823
2834
|
type_color = CartTypeColors.UNSET;
|
|
2824
2835
|
/**
|
|
@@ -2858,11 +2869,11 @@ class CardLongComponent {
|
|
|
2858
2869
|
this.router.navigate(['/', this.imgUrl.toString()]);
|
|
2859
2870
|
}
|
|
2860
2871
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardLongComponent, selector: "
|
|
2872
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardLongComponent, selector: "mefdev-card-long", inputs: { type_text: "type_text", type_color: "type_color", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "params", first: true, predicate: ["params"], descendants: true }, { propertyName: "second_col", first: true, predicate: ["second_col"], descendants: true }, { propertyName: "third_col", first: true, predicate: ["third_col"], descendants: true }], ngImport: i0, template: "\r\n <pgcard \r\n MinimalHeader=\"true\" \r\n TimeOut=\"2500\" \r\n [Refresh]=\"false\" \r\n [Close]=\"false\"\r\n >\r\n \r\n <ng-template #CardTitle>\r\n <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n </ng-template>\r\n\r\n <ng-template #CardExtraControls>\r\n <div class=\"plugin-type\" \r\n [ngClass] = \"{\r\n 'b-color-Light-Gray-1': type_color === 'UNSET',\r\n 'b-color-Red': type_color === 'RED',\r\n 'b-color-Green': type_color === 'GREEN'}\">\r\n {{type_text}}\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"row h-100 m-b-10\">\r\n <div class=\"col-lg-3 col-12 card-col\">\r\n <div class=\"row\">\r\n <div class=\"col-12 card-img m-b-10\">\r\n <div *ngIf=\"!img || img == ''\" >\r\n <img src=\"assets/images/md_icon.png\"\r\n style=\"max-width: 110px; max-height: 110px;\"/>\r\n </div>\r\n <div *ngIf=\"img\">\r\n <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n height=\"110px\" \r\n style=\"max-width: 110px; max-height: 110px;\"\r\n onclick=\"imgClick()\"\r\n />\r\n </div> \r\n </div>\r\n <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n <ng-template [ngTemplateOutlet]=\"params\"></ng-template> \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-5 col-12 card-col\">\r\n <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template> \r\n </div>\r\n \r\n <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template> \r\n </div> \r\n\r\n </div>\r\n </pgcard>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
|
|
2862
2873
|
}
|
|
2863
2874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, decorators: [{
|
|
2864
2875
|
type: Component,
|
|
2865
|
-
args: [{ selector: '
|
|
2876
|
+
args: [{ selector: 'mefdev-card-long', template: "\r\n <pgcard \r\n MinimalHeader=\"true\" \r\n TimeOut=\"2500\" \r\n [Refresh]=\"false\" \r\n [Close]=\"false\"\r\n >\r\n \r\n <ng-template #CardTitle>\r\n <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n </ng-template>\r\n\r\n <ng-template #CardExtraControls>\r\n <div class=\"plugin-type\" \r\n [ngClass] = \"{\r\n 'b-color-Light-Gray-1': type_color === 'UNSET',\r\n 'b-color-Red': type_color === 'RED',\r\n 'b-color-Green': type_color === 'GREEN'}\">\r\n {{type_text}}\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"row h-100 m-b-10\">\r\n <div class=\"col-lg-3 col-12 card-col\">\r\n <div class=\"row\">\r\n <div class=\"col-12 card-img m-b-10\">\r\n <div *ngIf=\"!img || img == ''\" >\r\n <img src=\"assets/images/md_icon.png\"\r\n style=\"max-width: 110px; max-height: 110px;\"/>\r\n </div>\r\n <div *ngIf=\"img\">\r\n <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n height=\"110px\" \r\n style=\"max-width: 110px; max-height: 110px;\"\r\n onclick=\"imgClick()\"\r\n />\r\n </div> \r\n </div>\r\n <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n <ng-template [ngTemplateOutlet]=\"params\"></ng-template> \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-5 col-12 card-col\">\r\n <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template> \r\n </div>\r\n \r\n <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template> \r\n </div> \r\n\r\n </div>\r\n </pgcard>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
|
|
2866
2877
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { title: [{
|
|
2867
2878
|
type: ContentChild,
|
|
2868
2879
|
args: ["title"]
|
|
@@ -2892,11 +2903,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
2892
2903
|
*
|
|
2893
2904
|
* Example of usage:
|
|
2894
2905
|
*```
|
|
2895
|
-
* <
|
|
2906
|
+
* <mefdev-card-simple [disabled]="true">
|
|
2896
2907
|
* <ng-template #card_title>
|
|
2897
2908
|
* <!-- Content for the card title -->
|
|
2898
2909
|
* </ng-template>
|
|
2899
|
-
* </
|
|
2910
|
+
* </mefdev-card-simple>
|
|
2900
2911
|
*```
|
|
2901
2912
|
*
|
|
2902
2913
|
* <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
|
|
@@ -2909,11 +2920,11 @@ class CardSimpleComponent {
|
|
|
2909
2920
|
/**
|
|
2910
2921
|
* Template for displaying the title of the card.
|
|
2911
2922
|
*```
|
|
2912
|
-
* <
|
|
2923
|
+
* <mefdev-card-simple>
|
|
2913
2924
|
* <ng-template #card_title>
|
|
2914
2925
|
* <h3>Card Title</h3>
|
|
2915
2926
|
* </ng-template>
|
|
2916
|
-
* </
|
|
2927
|
+
* </mefdev-card-simple>
|
|
2917
2928
|
*```
|
|
2918
2929
|
*/
|
|
2919
2930
|
card_title;
|
|
@@ -2921,11 +2932,11 @@ class CardSimpleComponent {
|
|
|
2921
2932
|
ngOnInit() {
|
|
2922
2933
|
}
|
|
2923
2934
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardSimpleComponent, selector: "
|
|
2935
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardSimpleComponent, selector: "mefdev-card-simple", inputs: { isDisabled: ["disabled", "isDisabled"] }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }], ngImport: i0, template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n <div class=\"col-12\">\r\n <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n </div>\r\n </div>\r\n <div class=\"row m-2\">\r\n <div class=\"col-12\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2925
2936
|
}
|
|
2926
2937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardSimpleComponent, decorators: [{
|
|
2927
2938
|
type: Component,
|
|
2928
|
-
args: [{ selector: '
|
|
2939
|
+
args: [{ selector: 'mefdev-card-simple', template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n <div class=\"col-12\">\r\n <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n </div>\r\n </div>\r\n <div class=\"row m-2\">\r\n <div class=\"col-12\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"] }]
|
|
2929
2940
|
}], ctorParameters: function () { return []; }, propDecorators: { isDisabled: [{
|
|
2930
2941
|
type: Input,
|
|
2931
2942
|
args: ["disabled"]
|
|
@@ -3099,7 +3110,7 @@ class FillComponent {
|
|
|
3099
3110
|
this.visibleChange.emit(this.visible);
|
|
3100
3111
|
}
|
|
3101
3112
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
3113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
3103
3114
|
trigger('dialog', [
|
|
3104
3115
|
transition('void => *', [
|
|
3105
3116
|
style({ transform: 'scale3d(.3, .3, .3)' }),
|
|
@@ -3123,7 +3134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
3123
3134
|
animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
|
|
3124
3135
|
])
|
|
3125
3136
|
])
|
|
3126
|
-
], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"] }]
|
|
3137
|
+
], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\n"] }]
|
|
3127
3138
|
}], ctorParameters: function () { return []; }, propDecorators: { dialog: [{
|
|
3128
3139
|
type: ViewChild,
|
|
3129
3140
|
args: ['dialog', { static: false }]
|
|
@@ -3216,7 +3227,7 @@ class SlideUpComponent {
|
|
|
3216
3227
|
this.visibleChange.emit(this.visible);
|
|
3217
3228
|
}
|
|
3218
3229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], ngImport: i0, template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;inset:50% 0;margin:auto;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;z-index:10002;top:8px;right:8px;font-size:1.2em}.modal-content .modal-
|
|
3230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], ngImport: i0, template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;inset:50% 0;margin:auto;min-height:200px;max-height:90%;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;overflow:auto;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;z-index:10002;top:8px;right:8px;font-size:1.2em}.modal-content .modal-body{min-height:120px;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
3220
3231
|
trigger('dialog', [
|
|
3221
3232
|
transition('void => *', [
|
|
3222
3233
|
style({ transform: 'scale3d(.3, .3, .3)' }),
|
|
@@ -3240,7 +3251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
3240
3251
|
animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
|
|
3241
3252
|
])
|
|
3242
3253
|
])
|
|
3243
|
-
], template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;inset:50% 0;margin:auto;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;z-index:10002;top:8px;right:8px;font-size:1.2em}.modal-content .modal-
|
|
3254
|
+
], template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n <div class=\"modal-header clearfix text-left\">\r\n <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;inset:50% 0;margin:auto;min-height:200px;max-height:90%;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;overflow:auto;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;z-index:10002;top:8px;right:8px;font-size:1.2em}.modal-content .modal-body{min-height:120px;padding-bottom:10px}\n"] }]
|
|
3244
3255
|
}], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
|
|
3245
3256
|
type: ContentChild,
|
|
3246
3257
|
args: ["modal_header"]
|
|
@@ -3810,6 +3821,345 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
3810
3821
|
}]
|
|
3811
3822
|
}] });
|
|
3812
3823
|
|
|
3824
|
+
class StageComponent {
|
|
3825
|
+
currentExecutorStep;
|
|
3826
|
+
isRightModal;
|
|
3827
|
+
isCompleted;
|
|
3828
|
+
title;
|
|
3829
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StageComponent, selector: "mefdev-stage", inputs: { currentExecutorStep: "currentExecutorStep", isRightModal: "isRightModal", isCompleted: "isCompleted", title: "title" }, ngImport: i0, template: "<div class=\"step\">\r\n <ng-container *ngIf=\"!isCompleted else done\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n {{ currentExecutorStep }}\r\n </text>\r\n </svg>\r\n <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n {{ title }}\r\n </div>\r\n </ng-container>\r\n</div>\r\n<ng-template #done>\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n fill=\"#28B446\"/>\r\n </svg>\r\n <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n {{ title }}\r\n </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3831
|
+
}
|
|
3832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, decorators: [{
|
|
3833
|
+
type: Component,
|
|
3834
|
+
args: [{ selector: 'mefdev-stage', template: "<div class=\"step\">\r\n <ng-container *ngIf=\"!isCompleted else done\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n {{ currentExecutorStep }}\r\n </text>\r\n </svg>\r\n <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n {{ title }}\r\n </div>\r\n </ng-container>\r\n</div>\r\n<ng-template #done>\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n fill=\"#28B446\"/>\r\n </svg>\r\n <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n {{ title }}\r\n </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"] }]
|
|
3835
|
+
}], propDecorators: { currentExecutorStep: [{
|
|
3836
|
+
type: Input
|
|
3837
|
+
}], isRightModal: [{
|
|
3838
|
+
type: Input
|
|
3839
|
+
}], isCompleted: [{
|
|
3840
|
+
type: Input
|
|
3841
|
+
}], title: [{
|
|
3842
|
+
type: Input
|
|
3843
|
+
}] } });
|
|
3844
|
+
|
|
3845
|
+
class StepExecutorComponent {
|
|
3846
|
+
renderer;
|
|
3847
|
+
view;
|
|
3848
|
+
container;
|
|
3849
|
+
title;
|
|
3850
|
+
description;
|
|
3851
|
+
footer;
|
|
3852
|
+
onActivePageChange = new EventEmitter();
|
|
3853
|
+
_activePageInd = 0;
|
|
3854
|
+
pages = [];
|
|
3855
|
+
constructor(renderer) {
|
|
3856
|
+
this.renderer = renderer;
|
|
3857
|
+
}
|
|
3858
|
+
set activePageInd(activePageNumber) {
|
|
3859
|
+
this._activePageInd = activePageNumber;
|
|
3860
|
+
if (activePageNumber >= 0 && this.container) {
|
|
3861
|
+
if (this.container.nativeElement.innerHTML != '') {
|
|
3862
|
+
this.container.nativeElement.innerHTML = '';
|
|
3863
|
+
}
|
|
3864
|
+
this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
|
|
3865
|
+
this.onActivePageChange.emit(this.pages.find((el) => el.isActive));
|
|
3866
|
+
}
|
|
3867
|
+
}
|
|
3868
|
+
get activePageInd() {
|
|
3869
|
+
return this._activePageInd;
|
|
3870
|
+
}
|
|
3871
|
+
get activePage() {
|
|
3872
|
+
return this.activePageInd == -1 ? null : this.pages[this.activePageInd];
|
|
3873
|
+
}
|
|
3874
|
+
ngAfterViewInit() {
|
|
3875
|
+
this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
|
|
3876
|
+
this.onActivePageChange.emit(this.pages.find((el) => el.isActive));
|
|
3877
|
+
}
|
|
3878
|
+
nextBtnIsDisabled() {
|
|
3879
|
+
return this._activePageInd === this.pages.length - 1;
|
|
3880
|
+
}
|
|
3881
|
+
prev() {
|
|
3882
|
+
const newPageInd = this.activePageInd - 1;
|
|
3883
|
+
if (newPageInd >= 0) {
|
|
3884
|
+
this.activePageInd = newPageInd;
|
|
3885
|
+
}
|
|
3886
|
+
}
|
|
3887
|
+
cancel() {
|
|
3888
|
+
this.activePageInd = 0;
|
|
3889
|
+
const newPageInd = this.activePageInd - 1;
|
|
3890
|
+
if (newPageInd >= 0) {
|
|
3891
|
+
this.activePageInd = newPageInd;
|
|
3892
|
+
}
|
|
3893
|
+
}
|
|
3894
|
+
next() {
|
|
3895
|
+
const newPageInd = this.activePageInd + 1;
|
|
3896
|
+
if (newPageInd < this.pages.length) {
|
|
3897
|
+
this.activePageInd = newPageInd;
|
|
3898
|
+
}
|
|
3899
|
+
}
|
|
3900
|
+
setActivePage(pageNumber) {
|
|
3901
|
+
pageNumber -= 1;
|
|
3902
|
+
if (pageNumber < this.pages.length && pageNumber >= 0) {
|
|
3903
|
+
this.activePageInd = pageNumber;
|
|
3904
|
+
}
|
|
3905
|
+
}
|
|
3906
|
+
addPage(page) {
|
|
3907
|
+
this.pages.push(page);
|
|
3908
|
+
}
|
|
3909
|
+
removeSpecificPage(page) {
|
|
3910
|
+
const index = this.pages.indexOf(page);
|
|
3911
|
+
if (index !== -1) {
|
|
3912
|
+
this.pages.splice(index, 1);
|
|
3913
|
+
if (index === this.activePageInd) {
|
|
3914
|
+
this.prev();
|
|
3915
|
+
}
|
|
3916
|
+
}
|
|
3917
|
+
}
|
|
3918
|
+
removePageByIndex(index) {
|
|
3919
|
+
if (index >= 0 && index < this.pages.length) {
|
|
3920
|
+
this.pages.splice(index, 1);
|
|
3921
|
+
if (index === this.activePageInd) {
|
|
3922
|
+
this.prev();
|
|
3923
|
+
}
|
|
3924
|
+
}
|
|
3925
|
+
}
|
|
3926
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
3927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StepExecutorComponent, selector: "mefdev-step-executor", inputs: { view: "view" }, outputs: { onActivePageChange: "onActivePageChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n <header class=\"stepExecutorHeader\">\r\n <div class=\"stepExecutorHeaderText\">\r\n <h1 class=\"title\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </h1>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <div class=\"steps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"false\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </header>\r\n\r\n <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n <div #container></div>\r\n </div>\r\n\r\n <div class=\"footerButtons\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n <header class=\"modalHeader\">\r\n <div class=\"headerModalText\">\r\n <div class=\"textAndCloseButton\">\r\n <h1 class=\"title\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </h1>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <article class=\"closeBtn\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n </svg>\r\n </article>\r\n </div>\r\n <div class=\"modalSteps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"false\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </header>\r\n\r\n <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n <div #container></div>\r\n </main>\r\n\r\n <footer class=\"modalFooter\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n <header class=\"rightExecutorHeader\">\r\n <div class=\"rightExecutorTextAndCloseButton\">\r\n <span class=\"body-1\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </span>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <div class=\"closeButton\">\r\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n </svg>\r\n </div>\r\n </header>\r\n\r\n <div class=\"line\">\r\n <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"contentExecutor\">\r\n <div class=\"rightChangeContent\">\r\n <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n <div #container></div>\r\n </div>\r\n <div class=\"rightSteps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"true\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </div>\r\n\r\n <footer class=\"rightFooter\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </footer>\r\n </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StageComponent, selector: "mefdev-stage", inputs: ["currentExecutorStep", "isRightModal", "isCompleted", "title"] }] });
|
|
3928
|
+
}
|
|
3929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, decorators: [{
|
|
3930
|
+
type: Component,
|
|
3931
|
+
args: [{ selector: 'mefdev-step-executor', template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n <header class=\"stepExecutorHeader\">\r\n <div class=\"stepExecutorHeaderText\">\r\n <h1 class=\"title\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </h1>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <div class=\"steps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"false\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </header>\r\n\r\n <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n <div #container></div>\r\n </div>\r\n\r\n <div class=\"footerButtons\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n <header class=\"modalHeader\">\r\n <div class=\"headerModalText\">\r\n <div class=\"textAndCloseButton\">\r\n <h1 class=\"title\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </h1>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <article class=\"closeBtn\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n </svg>\r\n </article>\r\n </div>\r\n <div class=\"modalSteps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"false\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </header>\r\n\r\n <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n <div #container></div>\r\n </main>\r\n\r\n <footer class=\"modalFooter\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n <header class=\"rightExecutorHeader\">\r\n <div class=\"rightExecutorTextAndCloseButton\">\r\n <span class=\"body-1\">\r\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n </span>\r\n <p class=\"body-5\">\r\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n </p>\r\n </div>\r\n <div class=\"closeButton\">\r\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n </svg>\r\n </div>\r\n </header>\r\n\r\n <div class=\"line\">\r\n <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"contentExecutor\">\r\n <div class=\"rightChangeContent\">\r\n <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n <div #container></div>\r\n </div>\r\n <div class=\"rightSteps\">\r\n <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n [isRightModal]=\"true\"\r\n [title]=\"page.title\"\r\n [currentExecutorStep]=\"pageIndex + 1\"\r\n [isCompleted]=\"page.isCompleted\">\r\n </mefdev-stage>\r\n </div>\r\n </div>\r\n\r\n <footer class=\"rightFooter\">\r\n <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n </footer>\r\n </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"] }]
|
|
3932
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { view: [{
|
|
3933
|
+
type: Input,
|
|
3934
|
+
args: [{ required: true }]
|
|
3935
|
+
}], container: [{
|
|
3936
|
+
type: ViewChild,
|
|
3937
|
+
args: ['container']
|
|
3938
|
+
}], title: [{
|
|
3939
|
+
type: ContentChild,
|
|
3940
|
+
args: ['title']
|
|
3941
|
+
}], description: [{
|
|
3942
|
+
type: ContentChild,
|
|
3943
|
+
args: ['description']
|
|
3944
|
+
}], footer: [{
|
|
3945
|
+
type: ContentChild,
|
|
3946
|
+
args: ['footer']
|
|
3947
|
+
}], onActivePageChange: [{
|
|
3948
|
+
type: Output
|
|
3949
|
+
}] } });
|
|
3950
|
+
|
|
3951
|
+
class MefdevExecutorPageComponent {
|
|
3952
|
+
_mainExecutor;
|
|
3953
|
+
_elementRef;
|
|
3954
|
+
title;
|
|
3955
|
+
isActive = false;
|
|
3956
|
+
isCompleted = false;
|
|
3957
|
+
isCompletedChange = new EventEmitter();
|
|
3958
|
+
elRef;
|
|
3959
|
+
constructor(_mainExecutor, _elementRef) {
|
|
3960
|
+
this._mainExecutor = _mainExecutor;
|
|
3961
|
+
this._elementRef = _elementRef;
|
|
3962
|
+
this.elRef = _elementRef;
|
|
3963
|
+
_mainExecutor.pages.push(this);
|
|
3964
|
+
if (_mainExecutor.activePageInd == -1) {
|
|
3965
|
+
_mainExecutor.activePageInd = 0;
|
|
3966
|
+
}
|
|
3967
|
+
}
|
|
3968
|
+
ngOnChanges(changes) {
|
|
3969
|
+
this.isCompletedChange.emit(changes['isCompleted']?.currentValue);
|
|
3970
|
+
}
|
|
3971
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, deps: [{ token: StepExecutorComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3972
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefdevExecutorPageComponent, selector: "mefdev-executor-page", inputs: { title: "title", isActive: "isActive", isCompleted: "isCompleted" }, outputs: { isCompletedChange: "isCompletedChange" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
3973
|
+
}
|
|
3974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, decorators: [{
|
|
3975
|
+
type: Component,
|
|
3976
|
+
args: [{
|
|
3977
|
+
selector: 'mefdev-executor-page',
|
|
3978
|
+
template: '<ng-content></ng-content>',
|
|
3979
|
+
}]
|
|
3980
|
+
}], ctorParameters: function () { return [{ type: StepExecutorComponent, decorators: [{
|
|
3981
|
+
type: Host
|
|
3982
|
+
}] }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
|
|
3983
|
+
type: Input
|
|
3984
|
+
}], isActive: [{
|
|
3985
|
+
type: Input
|
|
3986
|
+
}], isCompleted: [{
|
|
3987
|
+
type: Input
|
|
3988
|
+
}], isCompletedChange: [{
|
|
3989
|
+
type: Output
|
|
3990
|
+
}] } });
|
|
3991
|
+
|
|
3992
|
+
class MefDevStepExecutorModule {
|
|
3993
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3994
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, declarations: [StepExecutorComponent,
|
|
3995
|
+
MefdevExecutorPageComponent,
|
|
3996
|
+
StageComponent], imports: [CommonModule,
|
|
3997
|
+
FormsModule], exports: [StepExecutorComponent,
|
|
3998
|
+
MefdevExecutorPageComponent,
|
|
3999
|
+
StageComponent] });
|
|
4000
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, imports: [CommonModule,
|
|
4001
|
+
FormsModule] });
|
|
4002
|
+
}
|
|
4003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, decorators: [{
|
|
4004
|
+
type: NgModule,
|
|
4005
|
+
args: [{
|
|
4006
|
+
declarations: [
|
|
4007
|
+
StepExecutorComponent,
|
|
4008
|
+
MefdevExecutorPageComponent,
|
|
4009
|
+
StageComponent
|
|
4010
|
+
],
|
|
4011
|
+
exports: [
|
|
4012
|
+
StepExecutorComponent,
|
|
4013
|
+
MefdevExecutorPageComponent,
|
|
4014
|
+
StageComponent,
|
|
4015
|
+
],
|
|
4016
|
+
imports: [
|
|
4017
|
+
CommonModule,
|
|
4018
|
+
FormsModule,
|
|
4019
|
+
]
|
|
4020
|
+
}]
|
|
4021
|
+
}] });
|
|
4022
|
+
|
|
4023
|
+
/**
|
|
4024
|
+
* Component for a slider that allows selecting a range of values.
|
|
4025
|
+
* @example
|
|
4026
|
+
* <mefdev-slider
|
|
4027
|
+
* [disabled]="false"
|
|
4028
|
+
* [range] = "{min: 1, max: 10000}"
|
|
4029
|
+
* [id]= "'slider1'"
|
|
4030
|
+
* (valueChange)="onChildValueChange($event)"
|
|
4031
|
+
* ></mefdev-slider>
|
|
4032
|
+
*
|
|
4033
|
+
* <example-url>https://mef.dev/ui_kit_demo/view/typography/slider</example-url>
|
|
4034
|
+
*/
|
|
4035
|
+
class MefDevSliderComponent {
|
|
4036
|
+
_range = { min: 1, max: 1000 };
|
|
4037
|
+
/**
|
|
4038
|
+
* Unique id for each slider. Use it, if u need more than one slider independent from another on the same page.
|
|
4039
|
+
* @example
|
|
4040
|
+
* <mefdev-slider
|
|
4041
|
+
* [id]= "'slider1'"
|
|
4042
|
+
* ></mefdev-slider>
|
|
4043
|
+
*/
|
|
4044
|
+
id;
|
|
4045
|
+
/**
|
|
4046
|
+
* Input Object {min, max} container of the slider
|
|
4047
|
+
* @example
|
|
4048
|
+
* @interval
|
|
4049
|
+
* <mefdev-slider
|
|
4050
|
+
* [range] = "{min: 1, max: 10000}"
|
|
4051
|
+
* ></mefdev-slider>
|
|
4052
|
+
*/
|
|
4053
|
+
set range(range) {
|
|
4054
|
+
this._range = range;
|
|
4055
|
+
this.minValue = range.min;
|
|
4056
|
+
this.maxValue = range.max;
|
|
4057
|
+
}
|
|
4058
|
+
get range() {
|
|
4059
|
+
return this._range;
|
|
4060
|
+
}
|
|
4061
|
+
/**
|
|
4062
|
+
* The minimum value of the slider.
|
|
4063
|
+
*/
|
|
4064
|
+
minValue = this.range.min;
|
|
4065
|
+
/**
|
|
4066
|
+
* The maximum value of the slider.
|
|
4067
|
+
*/
|
|
4068
|
+
maxValue = this.range.max;
|
|
4069
|
+
/**
|
|
4070
|
+
* Property indicating whether the component is disabled.
|
|
4071
|
+
* @example
|
|
4072
|
+
* <mefdev-slider
|
|
4073
|
+
* [disabled]="true"
|
|
4074
|
+
* ></mefdev-slider>
|
|
4075
|
+
*/
|
|
4076
|
+
disabled = false;
|
|
4077
|
+
/**
|
|
4078
|
+
* Event emitted when the values of the slider change.
|
|
4079
|
+
* It passes an object with `minValue` and `maxValue` properties.
|
|
4080
|
+
* @event MefDevSliderComponent#valueChange
|
|
4081
|
+
* @type {EventEmitter<{ minValue: number; maxValue: number }>}
|
|
4082
|
+
* @example
|
|
4083
|
+
* <mefdev-slider
|
|
4084
|
+
* (valueChange)="onChildValueChange($event)"
|
|
4085
|
+
* ></mefdev-slider>
|
|
4086
|
+
*/
|
|
4087
|
+
valueChange = new EventEmitter();
|
|
4088
|
+
/**
|
|
4089
|
+
* Method called when the values of the slider change.
|
|
4090
|
+
* Emits the `valueChange` event and calls methods to handle changes in the minimum and maximum values.
|
|
4091
|
+
* @fires MefDevSliderComponent#valueChange
|
|
4092
|
+
*/
|
|
4093
|
+
onValueChange() {
|
|
4094
|
+
this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
|
|
4095
|
+
this.minValue = this.minValue;
|
|
4096
|
+
this.onMinValueChange();
|
|
4097
|
+
this.onMaxValueChange();
|
|
4098
|
+
}
|
|
4099
|
+
/**
|
|
4100
|
+
* Method to handle changes in the minimum value.
|
|
4101
|
+
* Converts a string to a number and removes all non-numeric characters.
|
|
4102
|
+
* Then, emits the `valueChange` event and updates the value of the "fromSlider" slider.
|
|
4103
|
+
* @fires MefDevSliderComponent#valueChange
|
|
4104
|
+
*/
|
|
4105
|
+
onMinValueChange() {
|
|
4106
|
+
const numericValue = parseFloat(this.minValue.toString().replace(/[^\d.]/g, ''));
|
|
4107
|
+
this.minValue = isNaN(numericValue) ? 0 : numericValue;
|
|
4108
|
+
this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
|
|
4109
|
+
const fromSlider = document.getElementById(`fromSlider-${this.id}`);
|
|
4110
|
+
}
|
|
4111
|
+
/**
|
|
4112
|
+
* Method to handle changes in the maximum value.
|
|
4113
|
+
* Converts a string to a number and removes all non-numeric characters.
|
|
4114
|
+
* Then, emits the `valueChange` event and updates the value of the "toSlider" slider.
|
|
4115
|
+
* @fires MefDevSliderComponent#valueChange
|
|
4116
|
+
*/
|
|
4117
|
+
onMaxValueChange() {
|
|
4118
|
+
const numericValue = parseFloat(this.maxValue.toString().replace(/[^\d.]/g, ''));
|
|
4119
|
+
this.maxValue = isNaN(numericValue) ? 0 : numericValue; // Перевірка на NaN і присвоєння 0, якщо не вдалося конвертувати в число
|
|
4120
|
+
this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
|
|
4121
|
+
const toSlider = document.getElementById(`toSlider-${this.id}`);
|
|
4122
|
+
}
|
|
4123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSliderComponent, selector: "mefdev-slider", inputs: { id: "id", range: "range", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range_container row\">\r\n <div class=\"inputs_control \">\r\n <input class=\"form_control_container__time__input h3\" [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n <input class=\"form_control_container__time__input h3\" [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n </div>\r\n <div class=\"sliders_control\">\r\n <input id=\"fromSlider\" type=\"range\" [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n <input id=\"toSlider\" type=\"range\" [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n [style]=\"{'--minValue': minValue, '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
4125
|
+
}
|
|
4126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderComponent, decorators: [{
|
|
4127
|
+
type: Component,
|
|
4128
|
+
args: [{ selector: 'mefdev-slider', template: "<div class=\"range_container row\">\r\n <div class=\"inputs_control \">\r\n <input class=\"form_control_container__time__input h3\" [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n <input class=\"form_control_container__time__input h3\" [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n </div>\r\n <div class=\"sliders_control\">\r\n <input id=\"fromSlider\" type=\"range\" [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n <input id=\"toSlider\" type=\"range\" [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n [style]=\"{'--minValue': minValue, '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"] }]
|
|
4129
|
+
}], propDecorators: { id: [{
|
|
4130
|
+
type: Input
|
|
4131
|
+
}], range: [{
|
|
4132
|
+
type: Input,
|
|
4133
|
+
args: ['range']
|
|
4134
|
+
}], disabled: [{
|
|
4135
|
+
type: Input
|
|
4136
|
+
}], valueChange: [{
|
|
4137
|
+
type: Output
|
|
4138
|
+
}] } });
|
|
4139
|
+
|
|
4140
|
+
class MefDevSliderModule {
|
|
4141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4142
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, declarations: [MefDevSliderComponent], imports: [CommonModule,
|
|
4143
|
+
FormsModule], exports: [MefDevSliderComponent] });
|
|
4144
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, imports: [CommonModule,
|
|
4145
|
+
FormsModule] });
|
|
4146
|
+
}
|
|
4147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, decorators: [{
|
|
4148
|
+
type: NgModule,
|
|
4149
|
+
args: [{
|
|
4150
|
+
declarations: [
|
|
4151
|
+
MefDevSliderComponent
|
|
4152
|
+
],
|
|
4153
|
+
exports: [
|
|
4154
|
+
MefDevSliderComponent
|
|
4155
|
+
],
|
|
4156
|
+
imports: [
|
|
4157
|
+
CommonModule,
|
|
4158
|
+
FormsModule,
|
|
4159
|
+
]
|
|
4160
|
+
}]
|
|
4161
|
+
}] });
|
|
4162
|
+
|
|
3813
4163
|
class MefDevSpecFlowTestComponent {
|
|
3814
4164
|
/**
|
|
3815
4165
|
* UTC datetime
|
|
@@ -4980,5 +5330,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
4980
5330
|
* Generated bundle index. Do not edit.
|
|
4981
5331
|
*/
|
|
4982
5332
|
|
|
4983
|
-
export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DatepickerComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule };
|
|
5333
|
+
export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DatepickerComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSliderComponent, MefDevSliderModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevExecutorPageComponent, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule };
|
|
4984
5334
|
//# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map
|