@morozeckiy/dd-lib 0.7.111 → 0.7.112
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/assets/scss/common.scss +3 -1
- package/assets/scss/reset.scss +156 -154
- package/fesm2022/morozeckiy-dd-lib.mjs +39 -35
- package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
- package/lib/lib-file-loader/lib-file-loader.component.d.ts +5 -3
- package/morozeckiy-dd-lib-0.7.112.tgz +0 -0
- package/package.json +1 -1
- package/morozeckiy-dd-lib-0.7.111.tgz +0 -0
package/assets/scss/common.scss
CHANGED
package/assets/scss/reset.scss
CHANGED
|
@@ -1,154 +1,156 @@
|
|
|
1
|
-
html,
|
|
2
|
-
body,
|
|
3
|
-
div,
|
|
4
|
-
span,
|
|
5
|
-
applet,
|
|
6
|
-
object,
|
|
7
|
-
iframe,
|
|
8
|
-
h1,
|
|
9
|
-
h2,
|
|
10
|
-
h3,
|
|
11
|
-
h4,
|
|
12
|
-
h5,
|
|
13
|
-
h6,
|
|
14
|
-
p,
|
|
15
|
-
blockquote,
|
|
16
|
-
pre,
|
|
17
|
-
a,
|
|
18
|
-
abbr,
|
|
19
|
-
acronym,
|
|
20
|
-
address,
|
|
21
|
-
big,
|
|
22
|
-
cite,
|
|
23
|
-
code,
|
|
24
|
-
del,
|
|
25
|
-
dfn,
|
|
26
|
-
em,
|
|
27
|
-
img,
|
|
28
|
-
ins,
|
|
29
|
-
kbd,
|
|
30
|
-
q,
|
|
31
|
-
s,
|
|
32
|
-
samp,
|
|
33
|
-
small,
|
|
34
|
-
strike,
|
|
35
|
-
strong,
|
|
36
|
-
sub,
|
|
37
|
-
sup,
|
|
38
|
-
tt,
|
|
39
|
-
var,
|
|
40
|
-
b,
|
|
41
|
-
u,
|
|
42
|
-
i,
|
|
43
|
-
center,
|
|
44
|
-
dl,
|
|
45
|
-
dt,
|
|
46
|
-
dd,
|
|
47
|
-
ol,
|
|
48
|
-
ul,
|
|
49
|
-
li,
|
|
50
|
-
fieldset,
|
|
51
|
-
form,
|
|
52
|
-
label,
|
|
53
|
-
legend,
|
|
54
|
-
table,
|
|
55
|
-
caption,
|
|
56
|
-
tbody,
|
|
57
|
-
tfoot,
|
|
58
|
-
thead,
|
|
59
|
-
tr,
|
|
60
|
-
th,
|
|
61
|
-
td,
|
|
62
|
-
article,
|
|
63
|
-
aside,
|
|
64
|
-
canvas,
|
|
65
|
-
details,
|
|
66
|
-
embed,
|
|
67
|
-
figure,
|
|
68
|
-
figcaption,
|
|
69
|
-
footer,
|
|
70
|
-
header,
|
|
71
|
-
hgroup,
|
|
72
|
-
menu,
|
|
73
|
-
nav,
|
|
74
|
-
output,
|
|
75
|
-
ruby,
|
|
76
|
-
section,
|
|
77
|
-
summary,
|
|
78
|
-
time,
|
|
79
|
-
mark,
|
|
80
|
-
audio,
|
|
81
|
-
video {
|
|
82
|
-
margin: 0;
|
|
83
|
-
padding: 0;
|
|
84
|
-
border: 0;
|
|
85
|
-
font-size: 100%;
|
|
86
|
-
font: inherit;
|
|
87
|
-
vertical-align: baseline;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* HTML5 display-role reset for older browsers */
|
|
91
|
-
article,
|
|
92
|
-
aside,
|
|
93
|
-
details,
|
|
94
|
-
figcaption,
|
|
95
|
-
figure,
|
|
96
|
-
footer,
|
|
97
|
-
header,
|
|
98
|
-
hgroup,
|
|
99
|
-
menu,
|
|
100
|
-
nav,
|
|
101
|
-
section {
|
|
102
|
-
display: block;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
body {
|
|
106
|
-
line-height: 1;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
ol,
|
|
110
|
-
ul {
|
|
111
|
-
list-style: none;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
blockquote,
|
|
115
|
-
q {
|
|
116
|
-
quotes: none;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
blockquote:before,
|
|
120
|
-
blockquote:after,
|
|
121
|
-
q:before,
|
|
122
|
-
q:after {
|
|
123
|
-
content: '';
|
|
124
|
-
content: none;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
table {
|
|
128
|
-
border-collapse: collapse;
|
|
129
|
-
border-spacing: 0;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
a {
|
|
133
|
-
text-decoration: none;
|
|
134
|
-
color: inherit;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
span,
|
|
138
|
-
div,
|
|
139
|
-
input {
|
|
140
|
-
box-sizing: border-box;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
input:focus-visible {
|
|
144
|
-
outline: none;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
1
|
+
html,
|
|
2
|
+
body,
|
|
3
|
+
div,
|
|
4
|
+
span,
|
|
5
|
+
applet,
|
|
6
|
+
object,
|
|
7
|
+
iframe,
|
|
8
|
+
h1,
|
|
9
|
+
h2,
|
|
10
|
+
h3,
|
|
11
|
+
h4,
|
|
12
|
+
h5,
|
|
13
|
+
h6,
|
|
14
|
+
p,
|
|
15
|
+
blockquote,
|
|
16
|
+
pre,
|
|
17
|
+
a,
|
|
18
|
+
abbr,
|
|
19
|
+
acronym,
|
|
20
|
+
address,
|
|
21
|
+
big,
|
|
22
|
+
cite,
|
|
23
|
+
code,
|
|
24
|
+
del,
|
|
25
|
+
dfn,
|
|
26
|
+
em,
|
|
27
|
+
img,
|
|
28
|
+
ins,
|
|
29
|
+
kbd,
|
|
30
|
+
q,
|
|
31
|
+
s,
|
|
32
|
+
samp,
|
|
33
|
+
small,
|
|
34
|
+
strike,
|
|
35
|
+
strong,
|
|
36
|
+
sub,
|
|
37
|
+
sup,
|
|
38
|
+
tt,
|
|
39
|
+
var,
|
|
40
|
+
b,
|
|
41
|
+
u,
|
|
42
|
+
i,
|
|
43
|
+
center,
|
|
44
|
+
dl,
|
|
45
|
+
dt,
|
|
46
|
+
dd,
|
|
47
|
+
ol,
|
|
48
|
+
ul,
|
|
49
|
+
li,
|
|
50
|
+
fieldset,
|
|
51
|
+
form,
|
|
52
|
+
label,
|
|
53
|
+
legend,
|
|
54
|
+
table,
|
|
55
|
+
caption,
|
|
56
|
+
tbody,
|
|
57
|
+
tfoot,
|
|
58
|
+
thead,
|
|
59
|
+
tr,
|
|
60
|
+
th,
|
|
61
|
+
td,
|
|
62
|
+
article,
|
|
63
|
+
aside,
|
|
64
|
+
canvas,
|
|
65
|
+
details,
|
|
66
|
+
embed,
|
|
67
|
+
figure,
|
|
68
|
+
figcaption,
|
|
69
|
+
footer,
|
|
70
|
+
header,
|
|
71
|
+
hgroup,
|
|
72
|
+
menu,
|
|
73
|
+
nav,
|
|
74
|
+
output,
|
|
75
|
+
ruby,
|
|
76
|
+
section,
|
|
77
|
+
summary,
|
|
78
|
+
time,
|
|
79
|
+
mark,
|
|
80
|
+
audio,
|
|
81
|
+
video {
|
|
82
|
+
margin: 0;
|
|
83
|
+
padding: 0;
|
|
84
|
+
border: 0;
|
|
85
|
+
font-size: 100%;
|
|
86
|
+
font: inherit;
|
|
87
|
+
vertical-align: baseline;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* HTML5 display-role reset for older browsers */
|
|
91
|
+
article,
|
|
92
|
+
aside,
|
|
93
|
+
details,
|
|
94
|
+
figcaption,
|
|
95
|
+
figure,
|
|
96
|
+
footer,
|
|
97
|
+
header,
|
|
98
|
+
hgroup,
|
|
99
|
+
menu,
|
|
100
|
+
nav,
|
|
101
|
+
section {
|
|
102
|
+
display: block;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
body {
|
|
106
|
+
line-height: 1;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
ol,
|
|
110
|
+
ul {
|
|
111
|
+
list-style: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
blockquote,
|
|
115
|
+
q {
|
|
116
|
+
quotes: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
blockquote:before,
|
|
120
|
+
blockquote:after,
|
|
121
|
+
q:before,
|
|
122
|
+
q:after {
|
|
123
|
+
content: '';
|
|
124
|
+
content: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
table {
|
|
128
|
+
border-collapse: collapse;
|
|
129
|
+
border-spacing: 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
a {
|
|
133
|
+
text-decoration: none;
|
|
134
|
+
color: inherit;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
span,
|
|
138
|
+
div,
|
|
139
|
+
input {
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
input:focus-visible {
|
|
144
|
+
outline: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
input,
|
|
148
|
+
button,
|
|
149
|
+
textarea {
|
|
150
|
+
font-family: inherit;
|
|
151
|
+
color: inherit;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
textarea {
|
|
155
|
+
outline: none;
|
|
156
|
+
}
|
|
@@ -4559,17 +4559,33 @@ class LibFileLoaderComponent {
|
|
|
4559
4559
|
this.multiple = false;
|
|
4560
4560
|
this.maxFileSize = 50;
|
|
4561
4561
|
this.showLoader = false;
|
|
4562
|
+
this.externalFiles = []; // Новый входной параметр для синхронизации
|
|
4562
4563
|
this.inputFiles = new EventEmitter();
|
|
4563
4564
|
this.files = [];
|
|
4564
4565
|
}
|
|
4566
|
+
ngOnChanges(changes) {
|
|
4567
|
+
if (changes['externalFiles'] && !changes['externalFiles'].firstChange) {
|
|
4568
|
+
this.files = [...this.externalFiles];
|
|
4569
|
+
}
|
|
4570
|
+
}
|
|
4565
4571
|
openFileLoader() {
|
|
4566
4572
|
this.fileLoader.nativeElement.click();
|
|
4567
4573
|
}
|
|
4568
4574
|
loadFile($event) {
|
|
4569
4575
|
const input = $event.target;
|
|
4570
|
-
const files =
|
|
4576
|
+
const files = Array.from(input.files || []);
|
|
4577
|
+
if (!files.length)
|
|
4578
|
+
return;
|
|
4571
4579
|
let acceptedFiles = [];
|
|
4580
|
+
let currentFileCount = this.files.length;
|
|
4572
4581
|
for (let i = 0; i < files.length; i++) {
|
|
4582
|
+
if (this.maxFiles && currentFileCount >= this.maxFiles) {
|
|
4583
|
+
this.toast.show({
|
|
4584
|
+
type: 'warning',
|
|
4585
|
+
title: 'Превышено допустимое количество файлов'
|
|
4586
|
+
});
|
|
4587
|
+
break;
|
|
4588
|
+
}
|
|
4573
4589
|
let error = false;
|
|
4574
4590
|
if (!this.validateFileSize(files[i])) {
|
|
4575
4591
|
this.toast.show({
|
|
@@ -4585,59 +4601,45 @@ class LibFileLoaderComponent {
|
|
|
4585
4601
|
});
|
|
4586
4602
|
error = true;
|
|
4587
4603
|
}
|
|
4588
|
-
if (this.maxFiles && this.maxFiles === this.files.length) {
|
|
4589
|
-
this.toast.show({
|
|
4590
|
-
type: 'warning',
|
|
4591
|
-
title: 'Превышено допустимое колличество файлов'
|
|
4592
|
-
});
|
|
4593
|
-
error = true;
|
|
4594
|
-
return;
|
|
4595
|
-
}
|
|
4596
4604
|
if (!error) {
|
|
4597
|
-
|
|
4598
|
-
|
|
4605
|
+
const fileExists = this.files.some(f => f.name === files[i].name &&
|
|
4606
|
+
f.size === files[i].size &&
|
|
4607
|
+
f.lastModified === files[i].lastModified);
|
|
4608
|
+
if (!fileExists) {
|
|
4599
4609
|
acceptedFiles.push(files[i]);
|
|
4600
|
-
|
|
4601
|
-
else {
|
|
4602
|
-
this.files = [files[0]];
|
|
4603
|
-
acceptedFiles = [files[0]];
|
|
4610
|
+
currentFileCount++;
|
|
4604
4611
|
}
|
|
4605
4612
|
}
|
|
4606
|
-
this.files = this.files.reduce((acc, current) => {
|
|
4607
|
-
const existingItem = acc.find(item => item.name === current.name);
|
|
4608
|
-
if (!existingItem) {
|
|
4609
|
-
acc.push(current);
|
|
4610
|
-
}
|
|
4611
|
-
return acc;
|
|
4612
|
-
}, []);
|
|
4613
|
-
if (error) {
|
|
4614
|
-
this.files = [];
|
|
4615
|
-
}
|
|
4616
4613
|
}
|
|
4617
4614
|
if (acceptedFiles.length) {
|
|
4615
|
+
if (this.multiple) {
|
|
4616
|
+
this.files = [...this.files, ...acceptedFiles];
|
|
4617
|
+
}
|
|
4618
|
+
else {
|
|
4619
|
+
this.files = acceptedFiles.slice(0, 1); // Берем только первый файл
|
|
4620
|
+
acceptedFiles = this.files.slice();
|
|
4621
|
+
}
|
|
4618
4622
|
this.inputFiles.emit(acceptedFiles);
|
|
4619
4623
|
}
|
|
4620
4624
|
input.value = '';
|
|
4621
4625
|
}
|
|
4622
4626
|
clear() {
|
|
4623
4627
|
this.files = [];
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
else {
|
|
4627
|
-
this.fileLoader.nativeElement.value = '';
|
|
4628
|
-
this.fileLoader.nativeElement.files = null;
|
|
4629
|
-
}
|
|
4628
|
+
this.fileLoader.nativeElement.value = '';
|
|
4629
|
+
this.fileLoader.nativeElement.files = new DataTransfer().files;
|
|
4630
4630
|
}
|
|
4631
4631
|
validateExtension(file) {
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4632
|
+
if (!this.extensions || this.extensions.length === 0) {
|
|
4633
|
+
return true;
|
|
4634
|
+
}
|
|
4635
|
+
const fileName = file.name.toLowerCase();
|
|
4636
|
+
return this.extensions.some(ext => fileName.endsWith(ext.toLowerCase()));
|
|
4635
4637
|
}
|
|
4636
4638
|
validateFileSize(file) {
|
|
4637
4639
|
return file.size / 1048576 <= this.maxFileSize;
|
|
4638
4640
|
}
|
|
4639
4641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibFileLoaderComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4640
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibFileLoaderComponent, isStandalone: true, selector: "dd-lib-file-loader", inputs: { title: "title", description: "description", btnTitle: "btnTitle", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", style: "style", extensions: "extensions", disabled: "disabled", showLoader: "showLoader", template: "template" }, outputs: { inputFiles: "inputFiles" }, viewQueries: [{ propertyName: "fileLoader", first: true, predicate: ["fileLoader"], descendants: true }], ngImport: i0, template: "<div (click)=\"openFileLoader()\">\r\n @if (template) {\r\n <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n } @else {\r\n @if (title) {\r\n <div class=\"g-text mb-4\">{{ title }}</div>\r\n }\r\n @if (description) {\r\n <div class=\"g-text-sm gray mb-16\">{{ description }}</div>\r\n }\r\n <dd-lib-button [showLoader]=\"showLoader\" [btnColor]=\"'white'\" [ngStyle]=\"style\" >\r\n <div class=\"d-flex align-center\">\r\n <div class=\"mr-8\">\r\n <dd-lib-svg-icon icon=\"paperclip\"></dd-lib-svg-icon>\r\n </div>\r\n <div class=\"title-soc-btn\">{{ btnTitle }}</div>\r\n </div>\r\n </dd-lib-button>\r\n }\r\n</div>\r\n\r\n<input type=\"file\"\r\n [multiple]=\"multiple\"\r\n [hidden]=\"true\" #fileLoader\r\n (change)=\"loadFile($event)\">\r\n", styles: [""], dependencies: [{ kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibFileLoaderComponent, isStandalone: true, selector: "dd-lib-file-loader", inputs: { title: "title", description: "description", btnTitle: "btnTitle", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", style: "style", extensions: "extensions", disabled: "disabled", showLoader: "showLoader", template: "template", externalFiles: "externalFiles" }, outputs: { inputFiles: "inputFiles" }, viewQueries: [{ propertyName: "fileLoader", first: true, predicate: ["fileLoader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"openFileLoader()\">\r\n @if (template) {\r\n <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n } @else {\r\n @if (title) {\r\n <div class=\"g-text mb-4\">{{ title }}</div>\r\n }\r\n @if (description) {\r\n <div class=\"g-text-sm gray mb-16\">{{ description }}</div>\r\n }\r\n <dd-lib-button [showLoader]=\"showLoader\" [btnColor]=\"'white'\" [ngStyle]=\"style\" >\r\n <div class=\"d-flex align-center\">\r\n <div class=\"mr-8\">\r\n <dd-lib-svg-icon icon=\"paperclip\"></dd-lib-svg-icon>\r\n </div>\r\n <div class=\"title-soc-btn\">{{ btnTitle }}</div>\r\n </div>\r\n </dd-lib-button>\r\n }\r\n</div>\r\n\r\n<input type=\"file\"\r\n [multiple]=\"multiple\"\r\n [hidden]=\"true\" #fileLoader\r\n (change)=\"loadFile($event)\">\r\n", styles: [""], dependencies: [{ kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4641
4643
|
}
|
|
4642
4644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibFileLoaderComponent, decorators: [{
|
|
4643
4645
|
type: Component,
|
|
@@ -4667,6 +4669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
4667
4669
|
type: Input
|
|
4668
4670
|
}], template: [{
|
|
4669
4671
|
type: Input
|
|
4672
|
+
}], externalFiles: [{
|
|
4673
|
+
type: Input
|
|
4670
4674
|
}], inputFiles: [{
|
|
4671
4675
|
type: Output
|
|
4672
4676
|
}] } });
|