carriera-intern-components 1.1.190 → 1.1.191
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/app/components/avatar/avatar.component.d.ts +1 -1
- package/app/components/drop-zone/drop-zone.component.d.ts +2 -1
- package/app/components/input/directives/helpers/index.d.ts +1 -0
- package/app/components/input/directives/helpers/mask.helper.d.ts +15 -0
- package/app/components/input/directives/mask.directive.d.ts +2 -16
- package/app/components/input/directives/password.directive.d.ts +2 -1
- package/app/components/input/models/input.model.d.ts +3 -0
- package/app/utils/constants/index.d.ts +1 -0
- package/app/utils/constants/input-character-sets.constants.d.ts +17 -0
- package/app/utils/index.d.ts +1 -0
- package/fesm2022/carriera-intern-components.mjs +239 -71
- package/fesm2022/carriera-intern-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles.scss +1 -1
|
@@ -33,6 +33,87 @@ function ignoreWhenAutofilled(...validators) {
|
|
|
33
33
|
: null;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
const INPUT_CHARACTER_SETS = {
|
|
37
|
+
DIGITS: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
|
38
|
+
FRENCH_LETTERS: [
|
|
39
|
+
'ç',
|
|
40
|
+
'é',
|
|
41
|
+
'â',
|
|
42
|
+
'ê',
|
|
43
|
+
'î',
|
|
44
|
+
'ô',
|
|
45
|
+
'û',
|
|
46
|
+
'à',
|
|
47
|
+
'è',
|
|
48
|
+
'ì',
|
|
49
|
+
'ò',
|
|
50
|
+
'ù',
|
|
51
|
+
'ë',
|
|
52
|
+
'ï',
|
|
53
|
+
'ü',
|
|
54
|
+
],
|
|
55
|
+
LETTERS: [
|
|
56
|
+
'a',
|
|
57
|
+
'b',
|
|
58
|
+
'c',
|
|
59
|
+
'd',
|
|
60
|
+
'e',
|
|
61
|
+
'f',
|
|
62
|
+
'g',
|
|
63
|
+
'h',
|
|
64
|
+
'i',
|
|
65
|
+
'j',
|
|
66
|
+
'k',
|
|
67
|
+
'l',
|
|
68
|
+
'm',
|
|
69
|
+
'n',
|
|
70
|
+
'o',
|
|
71
|
+
'p',
|
|
72
|
+
'q',
|
|
73
|
+
'r',
|
|
74
|
+
's',
|
|
75
|
+
't',
|
|
76
|
+
'u',
|
|
77
|
+
'v',
|
|
78
|
+
'w',
|
|
79
|
+
'x',
|
|
80
|
+
'y',
|
|
81
|
+
'z',
|
|
82
|
+
],
|
|
83
|
+
// Special characters
|
|
84
|
+
BASIC_PUNCTUATION: ['.', ',', '!', '?', ';', ':'],
|
|
85
|
+
COMMON_SYMBOLS: ['@', '#', '$', '%', '&', '*', '+', '-', '=', '_'],
|
|
86
|
+
BRACKETS: ['(', ')', '[', ']', '{', '}'],
|
|
87
|
+
QUOTES: ['"', "'", '`'],
|
|
88
|
+
WHITESPACE: [' ', '\t'],
|
|
89
|
+
get ALPHANUMERIC() {
|
|
90
|
+
return [...this.LETTERS, ...this.DIGITS];
|
|
91
|
+
},
|
|
92
|
+
get ALPHANUMERIC_WITH_SPACES() {
|
|
93
|
+
return [...this.ALPHANUMERIC, ' '];
|
|
94
|
+
},
|
|
95
|
+
// Email specific
|
|
96
|
+
EMAIL_SPECIAL: ['@', '.', '-', '_', '+'],
|
|
97
|
+
get EMAIL_CHARACTERS() {
|
|
98
|
+
return [...this.ALPHANUMERIC, ...this.EMAIL_SPECIAL];
|
|
99
|
+
},
|
|
100
|
+
get SPECIAL_EXCEPT_NAME_FRIENDLY() {
|
|
101
|
+
const excludeChars = ['.', ',', '-', "'", ' '];
|
|
102
|
+
return this.SPECIAL.filter((char) => !excludeChars.includes(char));
|
|
103
|
+
},
|
|
104
|
+
get NAME_CHARACTER_EXCLUSIONS() {
|
|
105
|
+
return [...this.SPECIAL_EXCEPT_NAME_FRIENDLY, ...this.DIGITS];
|
|
106
|
+
},
|
|
107
|
+
get SPECIAL() {
|
|
108
|
+
return [
|
|
109
|
+
...this.BASIC_PUNCTUATION,
|
|
110
|
+
...this.COMMON_SYMBOLS,
|
|
111
|
+
...this.BRACKETS,
|
|
112
|
+
...this.QUOTES,
|
|
113
|
+
];
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
|
|
36
117
|
const DropdownTypes = [
|
|
37
118
|
'multiple',
|
|
38
119
|
'dispatch',
|
|
@@ -667,6 +748,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
667
748
|
}]
|
|
668
749
|
}] });
|
|
669
750
|
|
|
751
|
+
class MaskHelper {
|
|
752
|
+
static extractUserInput(value) {
|
|
753
|
+
return value.replace(/[^a-zA-Z0-9]/g, '');
|
|
754
|
+
}
|
|
755
|
+
static isPlaceholder(char) {
|
|
756
|
+
return char === '0' || char === 'a' || char === '*';
|
|
757
|
+
}
|
|
758
|
+
static charMatchesPlaceholder(char, placeholder) {
|
|
759
|
+
if (placeholder === '0')
|
|
760
|
+
return /^\d$/.test(char);
|
|
761
|
+
if (placeholder === 'a')
|
|
762
|
+
return /^[a-zA-Z]$/.test(char);
|
|
763
|
+
if (placeholder === '*')
|
|
764
|
+
return /^[a-zA-Z0-9]$/.test(char);
|
|
765
|
+
return false;
|
|
766
|
+
}
|
|
767
|
+
/**
|
|
768
|
+
* Applies the mask to a given string of user input.
|
|
769
|
+
* @param realValue The clean user input.
|
|
770
|
+
* @param mask The mask pattern.
|
|
771
|
+
* @returns An object with the formatted value and the final real value.
|
|
772
|
+
*/
|
|
773
|
+
static applyMask(realValue, mask) {
|
|
774
|
+
let formatted = '';
|
|
775
|
+
let realValueIndex = 0;
|
|
776
|
+
let maskIndex = 0;
|
|
777
|
+
let newRealValue = '';
|
|
778
|
+
while (realValueIndex < realValue.length && maskIndex < mask.length) {
|
|
779
|
+
const maskChar = mask[maskIndex];
|
|
780
|
+
const realChar = realValue[realValueIndex];
|
|
781
|
+
if (this.isPlaceholder(maskChar)) {
|
|
782
|
+
if (this.charMatchesPlaceholder(realChar, maskChar)) {
|
|
783
|
+
formatted += realChar;
|
|
784
|
+
newRealValue += realChar;
|
|
785
|
+
maskIndex++;
|
|
786
|
+
realValueIndex++;
|
|
787
|
+
}
|
|
788
|
+
else {
|
|
789
|
+
break;
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
else {
|
|
793
|
+
formatted += maskChar;
|
|
794
|
+
maskIndex++;
|
|
795
|
+
}
|
|
796
|
+
}
|
|
797
|
+
return { formattedValue: formatted, finalRealValue: newRealValue };
|
|
798
|
+
}
|
|
799
|
+
}
|
|
800
|
+
|
|
670
801
|
class PasswordDirective {
|
|
671
802
|
el;
|
|
672
803
|
/**
|
|
@@ -686,6 +817,7 @@ class PasswordDirective {
|
|
|
686
817
|
* password should be revealed. Defaults to 0 (fully masked).
|
|
687
818
|
*/
|
|
688
819
|
reveal = input(0);
|
|
820
|
+
appMask = input('');
|
|
689
821
|
/**
|
|
690
822
|
* Stores the actual, unmasked password value,
|
|
691
823
|
* while the input element displays a masked version.
|
|
@@ -725,7 +857,7 @@ class PasswordDirective {
|
|
|
725
857
|
if (!this.appPassword() || !this.reveal())
|
|
726
858
|
return;
|
|
727
859
|
const input = this.el.nativeElement;
|
|
728
|
-
|
|
860
|
+
let cursorPosition = input.selectionStart || 0;
|
|
729
861
|
const displayValue = input.value;
|
|
730
862
|
const lengthDiff = displayValue.length - this.realValue.length;
|
|
731
863
|
let newRealValue = this.realValue;
|
|
@@ -759,6 +891,12 @@ class PasswordDirective {
|
|
|
759
891
|
this.setCursorPosition(cursorPosition - 1); // Move cursor back
|
|
760
892
|
return;
|
|
761
893
|
}
|
|
894
|
+
if (this.appMask() && this.appMask() !== '') {
|
|
895
|
+
const { formattedValue } = MaskHelper.applyMask(MaskHelper.extractUserInput(newRealValue), this.appMask());
|
|
896
|
+
cursorPosition =
|
|
897
|
+
cursorPosition + formattedValue.length - newRealValue.length;
|
|
898
|
+
newRealValue = formattedValue;
|
|
899
|
+
}
|
|
762
900
|
this.realValue = newRealValue;
|
|
763
901
|
this.updateDisplayValue();
|
|
764
902
|
this.setCursorPosition(cursorPosition);
|
|
@@ -892,7 +1030,7 @@ class PasswordDirective {
|
|
|
892
1030
|
this.updateDisplayValue();
|
|
893
1031
|
}
|
|
894
1032
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
895
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: PasswordDirective, isStandalone: true, selector: "[appPassword]", inputs: { appPassword: { classPropertyName: "appPassword", publicName: "appPassword", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)" } }, ngImport: i0 });
|
|
1033
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: PasswordDirective, isStandalone: true, selector: "[appPassword]", inputs: { appPassword: { classPropertyName: "appPassword", publicName: "appPassword", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null }, appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)" } }, ngImport: i0 });
|
|
896
1034
|
}
|
|
897
1035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, decorators: [{
|
|
898
1036
|
type: Directive,
|
|
@@ -1221,6 +1359,7 @@ class MaskDirective {
|
|
|
1221
1359
|
* @example '(000) 000-0000' for a phone number.
|
|
1222
1360
|
*/
|
|
1223
1361
|
appMask = input('');
|
|
1362
|
+
reveal = input(0);
|
|
1224
1363
|
/**
|
|
1225
1364
|
* Stores the unmasked, "real" value of the input, containing only
|
|
1226
1365
|
* the characters entered by the user that fit the mask placeholders.
|
|
@@ -1239,7 +1378,7 @@ class MaskDirective {
|
|
|
1239
1378
|
* formatting the value as the user types or pastes.
|
|
1240
1379
|
*/
|
|
1241
1380
|
onInput(event) {
|
|
1242
|
-
if (!this.appMask())
|
|
1381
|
+
if (!this.appMask() || this.reveal() !== 0)
|
|
1243
1382
|
return;
|
|
1244
1383
|
this.formatValue(this.el.nativeElement.value);
|
|
1245
1384
|
//this.dispatchRealValueChange();
|
|
@@ -1252,8 +1391,8 @@ class MaskDirective {
|
|
|
1252
1391
|
if (!this.appMask())
|
|
1253
1392
|
return;
|
|
1254
1393
|
//event.preventDefault();
|
|
1255
|
-
const pastedData = event.clipboardData?.getData('text') || '';
|
|
1256
|
-
this.formatValue(this.realValue + pastedData);
|
|
1394
|
+
//const pastedData = event.clipboardData?.getData('text') || '';
|
|
1395
|
+
//this.formatValue(this.realValue + pastedData);
|
|
1257
1396
|
//this.dispatchRealValueChange();
|
|
1258
1397
|
}
|
|
1259
1398
|
/**
|
|
@@ -1266,7 +1405,7 @@ class MaskDirective {
|
|
|
1266
1405
|
const selection = this.el.nativeElement.value.substring(this.el.nativeElement.selectionStart || 0, this.el.nativeElement.selectionEnd || 0);
|
|
1267
1406
|
if (selection) {
|
|
1268
1407
|
event.preventDefault();
|
|
1269
|
-
const unmaskedSelection =
|
|
1408
|
+
const unmaskedSelection = MaskHelper.extractUserInput(selection);
|
|
1270
1409
|
//event.clipboardData?.setData('text/plain', unmaskedSelection);
|
|
1271
1410
|
event.clipboardData?.setData('text/plain', selection);
|
|
1272
1411
|
}
|
|
@@ -1283,11 +1422,11 @@ class MaskDirective {
|
|
|
1283
1422
|
if (start !== end) {
|
|
1284
1423
|
event.preventDefault();
|
|
1285
1424
|
const selection = this.el.nativeElement.value.substring(start, end);
|
|
1286
|
-
const unmaskedSelection =
|
|
1425
|
+
const unmaskedSelection = MaskHelper.extractUserInput(selection);
|
|
1287
1426
|
//event.clipboardData?.setData('text/plain', unmaskedSelection);
|
|
1288
1427
|
event.clipboardData?.setData('text/plain', selection);
|
|
1289
|
-
const valueBefore =
|
|
1290
|
-
const valueAfter =
|
|
1428
|
+
const valueBefore = MaskHelper.extractUserInput(this.el.nativeElement.value.substring(0, start));
|
|
1429
|
+
const valueAfter = MaskHelper.extractUserInput(this.el.nativeElement.value.substring(end));
|
|
1291
1430
|
this.formatValue(valueBefore + valueAfter);
|
|
1292
1431
|
//this.dispatchRealValueChange();
|
|
1293
1432
|
}
|
|
@@ -1320,7 +1459,7 @@ class MaskDirective {
|
|
|
1320
1459
|
return;
|
|
1321
1460
|
}
|
|
1322
1461
|
const nextPlaceholder = placeholders[this.realValue.length];
|
|
1323
|
-
if (!
|
|
1462
|
+
if (!MaskHelper.charMatchesPlaceholder(event.key, nextPlaceholder)) {
|
|
1324
1463
|
event.preventDefault();
|
|
1325
1464
|
}
|
|
1326
1465
|
}
|
|
@@ -1333,64 +1472,12 @@ class MaskDirective {
|
|
|
1333
1472
|
const mask = this.appMask();
|
|
1334
1473
|
if (!mask)
|
|
1335
1474
|
return;
|
|
1336
|
-
const extractedValue =
|
|
1337
|
-
const { formattedValue, finalRealValue } =
|
|
1475
|
+
const extractedValue = MaskHelper.extractUserInput(value);
|
|
1476
|
+
const { formattedValue, finalRealValue } = MaskHelper.applyMask(extractedValue, mask);
|
|
1338
1477
|
this.realValue = finalRealValue;
|
|
1339
1478
|
this.el.nativeElement.value = formattedValue;
|
|
1340
1479
|
this.setCursorToEnd();
|
|
1341
1480
|
}
|
|
1342
|
-
/**
|
|
1343
|
-
* Applies the mask to a given string of user input.
|
|
1344
|
-
* @param realValue The clean user input.
|
|
1345
|
-
* @param mask The mask pattern.
|
|
1346
|
-
* @returns An object with the formatted value and the final real value.
|
|
1347
|
-
*/
|
|
1348
|
-
applyMask(realValue, mask) {
|
|
1349
|
-
let formatted = '';
|
|
1350
|
-
let realValueIndex = 0;
|
|
1351
|
-
let maskIndex = 0;
|
|
1352
|
-
let newRealValue = '';
|
|
1353
|
-
while (realValueIndex < realValue.length && maskIndex < mask.length) {
|
|
1354
|
-
const maskChar = mask[maskIndex];
|
|
1355
|
-
const realChar = realValue[realValueIndex];
|
|
1356
|
-
if (this.isPlaceholder(maskChar)) {
|
|
1357
|
-
if (this.charMatchesPlaceholder(realChar, maskChar)) {
|
|
1358
|
-
formatted += realChar;
|
|
1359
|
-
newRealValue += realChar;
|
|
1360
|
-
maskIndex++;
|
|
1361
|
-
realValueIndex++;
|
|
1362
|
-
}
|
|
1363
|
-
else {
|
|
1364
|
-
break;
|
|
1365
|
-
}
|
|
1366
|
-
}
|
|
1367
|
-
else {
|
|
1368
|
-
formatted += maskChar;
|
|
1369
|
-
maskIndex++;
|
|
1370
|
-
}
|
|
1371
|
-
}
|
|
1372
|
-
return { formattedValue: formatted, finalRealValue: newRealValue };
|
|
1373
|
-
}
|
|
1374
|
-
/**
|
|
1375
|
-
* Extracts valid user input characters from a string.
|
|
1376
|
-
* @param value The string to clean.
|
|
1377
|
-
* @returns A string containing only valid mask characters (digits/letters).
|
|
1378
|
-
*/
|
|
1379
|
-
extractUserInput(value) {
|
|
1380
|
-
return value.replace(/[^a-zA-Z0-9]/g, '');
|
|
1381
|
-
}
|
|
1382
|
-
isPlaceholder(char) {
|
|
1383
|
-
return char === '0' || char === 'a' || char === '*';
|
|
1384
|
-
}
|
|
1385
|
-
charMatchesPlaceholder(char, placeholder) {
|
|
1386
|
-
if (placeholder === '0')
|
|
1387
|
-
return /^\d$/.test(char);
|
|
1388
|
-
if (placeholder === 'a')
|
|
1389
|
-
return /^[a-zA-Z]$/.test(char);
|
|
1390
|
-
if (placeholder === '*')
|
|
1391
|
-
return /^[a-zA-Z0-9]$/.test(char);
|
|
1392
|
-
return false;
|
|
1393
|
-
}
|
|
1394
1481
|
setCursorToEnd() {
|
|
1395
1482
|
setTimeout(() => {
|
|
1396
1483
|
const len = this.el.nativeElement.value.length;
|
|
@@ -1425,7 +1512,7 @@ class MaskDirective {
|
|
|
1425
1512
|
}
|
|
1426
1513
|
}
|
|
1427
1514
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1428
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: MaskDirective, isStandalone: true, selector: "[appMask]", inputs: { appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "paste": "onPaste($event)", "copy": "onCopy($event)", "cut": "onCut($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 });
|
|
1515
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: MaskDirective, isStandalone: true, selector: "[appMask]", inputs: { appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "paste": "onPaste($event)", "copy": "onCopy($event)", "cut": "onCut($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 });
|
|
1429
1516
|
}
|
|
1430
1517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, decorators: [{
|
|
1431
1518
|
type: Directive,
|
|
@@ -1885,6 +1972,8 @@ class InputComponent {
|
|
|
1885
1972
|
// Clear autofill flag when user manually types
|
|
1886
1973
|
this.clearAutofillFlag();
|
|
1887
1974
|
const inputElement = event.target;
|
|
1975
|
+
const inputEvent = event;
|
|
1976
|
+
const inputData = inputEvent.data;
|
|
1888
1977
|
const max = this.config().max;
|
|
1889
1978
|
// Handle inputs normally for all inputs other than password and number
|
|
1890
1979
|
if (((this.config().type === 'password' ||
|
|
@@ -1895,6 +1984,76 @@ class InputComponent {
|
|
|
1895
1984
|
) {
|
|
1896
1985
|
return;
|
|
1897
1986
|
}
|
|
1987
|
+
if (inputData &&
|
|
1988
|
+
(this.config().disabledCharacters?.length ||
|
|
1989
|
+
this.config().enabledCharacters?.length ||
|
|
1990
|
+
this.config().spacesAllowed !== undefined)) {
|
|
1991
|
+
let filteredData = inputData;
|
|
1992
|
+
if (this.config().disabledCharacters?.length) {
|
|
1993
|
+
filteredData = Array.from(filteredData)
|
|
1994
|
+
.filter((char) => !this.config().disabledCharacters?.includes(char?.toLowerCase()))
|
|
1995
|
+
.join('');
|
|
1996
|
+
}
|
|
1997
|
+
if (this.config().enabledCharacters?.length) {
|
|
1998
|
+
filteredData = Array.from(filteredData)
|
|
1999
|
+
.filter((char) => this.config().enabledCharacters?.includes(char?.toLowerCase()))
|
|
2000
|
+
.join('');
|
|
2001
|
+
}
|
|
2002
|
+
if (this.config().spacesAllowed !== undefined) {
|
|
2003
|
+
const cursorPosition = inputElement.selectionStart || 0;
|
|
2004
|
+
const beforeCursor = inputElement.value.substring(0, cursorPosition - inputData.length);
|
|
2005
|
+
const afterCursor = inputElement.value.substring(cursorPosition);
|
|
2006
|
+
// First, handle space validation (leading spaces and double spaces)
|
|
2007
|
+
let processedData = '';
|
|
2008
|
+
for (let i = 0; i < filteredData.length; i++) {
|
|
2009
|
+
const char = filteredData[i];
|
|
2010
|
+
const fullValueSoFar = beforeCursor + processedData;
|
|
2011
|
+
if (char === ' ') {
|
|
2012
|
+
if (fullValueSoFar.length === 0) {
|
|
2013
|
+
continue;
|
|
2014
|
+
}
|
|
2015
|
+
if (fullValueSoFar.endsWith(' ')) {
|
|
2016
|
+
continue;
|
|
2017
|
+
}
|
|
2018
|
+
}
|
|
2019
|
+
processedData += char;
|
|
2020
|
+
}
|
|
2021
|
+
const fullValue = beforeCursor + processedData + afterCursor;
|
|
2022
|
+
const currentSpaceCount = (fullValue.match(/ /g) || []).length;
|
|
2023
|
+
// Then apply space count limit
|
|
2024
|
+
if (currentSpaceCount > this.config().spacesAllowed) {
|
|
2025
|
+
const spacesInProcessedData = (processedData.match(/ /g) || [])
|
|
2026
|
+
.length;
|
|
2027
|
+
const currentSpacesWithoutProcessed = currentSpaceCount - spacesInProcessedData;
|
|
2028
|
+
const allowedSpacesInProcessed = Math.max(0, this.config().spacesAllowed - currentSpacesWithoutProcessed);
|
|
2029
|
+
if (allowedSpacesInProcessed === 0) {
|
|
2030
|
+
processedData = processedData.replace(/ /g, '');
|
|
2031
|
+
}
|
|
2032
|
+
else if (spacesInProcessedData > allowedSpacesInProcessed) {
|
|
2033
|
+
const spacesToRemove = spacesInProcessedData - allowedSpacesInProcessed;
|
|
2034
|
+
let removedCount = 0;
|
|
2035
|
+
processedData = Array.from(processedData)
|
|
2036
|
+
.filter((char) => {
|
|
2037
|
+
if (char === ' ' && removedCount < spacesToRemove) {
|
|
2038
|
+
removedCount++;
|
|
2039
|
+
return false;
|
|
2040
|
+
}
|
|
2041
|
+
return true;
|
|
2042
|
+
})
|
|
2043
|
+
.join('');
|
|
2044
|
+
}
|
|
2045
|
+
}
|
|
2046
|
+
filteredData = processedData;
|
|
2047
|
+
}
|
|
2048
|
+
if (filteredData !== inputData) {
|
|
2049
|
+
const cursorPosition = inputElement.selectionStart || 0;
|
|
2050
|
+
const beforeCursor = inputElement.value.substring(0, cursorPosition - inputData.length);
|
|
2051
|
+
const afterCursor = inputElement.value.substring(cursorPosition);
|
|
2052
|
+
inputElement.value = beforeCursor + filteredData + afterCursor;
|
|
2053
|
+
const newCursorPosition = beforeCursor.length + filteredData.length;
|
|
2054
|
+
inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
|
|
2055
|
+
}
|
|
2056
|
+
}
|
|
1898
2057
|
if (max && inputElement.value.length > max) {
|
|
1899
2058
|
inputElement.value = inputElement.value.slice(0, max);
|
|
1900
2059
|
return;
|
|
@@ -2439,7 +2598,9 @@ class InputComponent {
|
|
|
2439
2598
|
if (!this.inputRef || !this.inputRef.nativeElement) {
|
|
2440
2599
|
return;
|
|
2441
2600
|
}
|
|
2442
|
-
let type = !!this.config().mask
|
|
2601
|
+
let type = !!this.config().mask && !this.config().reveal
|
|
2602
|
+
? 'masked'
|
|
2603
|
+
: this.config().type;
|
|
2443
2604
|
if ((type === 'password' || type === 'account') && !this.config().reveal) {
|
|
2444
2605
|
type = 'text';
|
|
2445
2606
|
}
|
|
@@ -2954,7 +3115,7 @@ class InputComponent {
|
|
|
2954
3115
|
// Pipes
|
|
2955
3116
|
ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: HighlightSearchPipe, name: "highlightSearch" }, { kind: "pipe", type: FilterBySearchPipe, name: "filterBySearch" }, { kind: "pipe", type: RemapPmIconsPipe, name: "remapPmIcons" }, { kind: "directive", type:
|
|
2956
3117
|
// Directives
|
|
2957
|
-
PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask"] }, { kind: "ngmodule", type:
|
|
3118
|
+
PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "ngmodule", type:
|
|
2958
3119
|
// Bootstrap
|
|
2959
3120
|
NgbDropdownModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownAnchor, selector: "[ngbDropdownAnchor]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
2960
3121
|
// Components
|
|
@@ -3508,6 +3669,7 @@ class DropZoneComponent {
|
|
|
3508
3669
|
rounded = input(false);
|
|
3509
3670
|
files = input([]);
|
|
3510
3671
|
deletedFileIds = input([]);
|
|
3672
|
+
maxCountFiles = input(1);
|
|
3511
3673
|
/**
|
|
3512
3674
|
* A input that holds an FormGroup object that is used to update the form validity when the crop mode is closed.
|
|
3513
3675
|
*/
|
|
@@ -3813,7 +3975,7 @@ class DropZoneComponent {
|
|
|
3813
3975
|
else {
|
|
3814
3976
|
this.docs.update((docs) => [...docs, filePreview]);
|
|
3815
3977
|
}
|
|
3816
|
-
if (!this.crop)
|
|
3978
|
+
if (!this.crop())
|
|
3817
3979
|
this.emitDocs();
|
|
3818
3980
|
const visibleCount = this.size() === '480px' ? 2 : 3;
|
|
3819
3981
|
const total = this.docs().length;
|
|
@@ -3823,6 +3985,9 @@ class DropZoneComponent {
|
|
|
3823
3985
|
else {
|
|
3824
3986
|
this.carouselIndex.set(0);
|
|
3825
3987
|
}
|
|
3988
|
+
if (total === this.maxCountFiles()) {
|
|
3989
|
+
this.inputRef.nativeElement.disabled = true;
|
|
3990
|
+
}
|
|
3826
3991
|
}
|
|
3827
3992
|
}
|
|
3828
3993
|
/**
|
|
@@ -3885,6 +4050,9 @@ class DropZoneComponent {
|
|
|
3885
4050
|
if (this.docs().length === 0) {
|
|
3886
4051
|
this.unsupported.set(false);
|
|
3887
4052
|
}
|
|
4053
|
+
if (this.docs().length < this.maxCountFiles()) {
|
|
4054
|
+
this.inputRef.nativeElement.disabled = false;
|
|
4055
|
+
}
|
|
3888
4056
|
this.coverUrl = '';
|
|
3889
4057
|
}
|
|
3890
4058
|
// Carousel logic
|
|
@@ -3939,7 +4107,7 @@ class DropZoneComponent {
|
|
|
3939
4107
|
}
|
|
3940
4108
|
}
|
|
3941
4109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeletedFileIds: "onDeletedFileIds", docsChange: "docsChange" }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div class=\"container\" [class]=\"{\n smallContainer: smallSize,\n largeContainer: !smallSize,\n logoVar: logoVariant\n }\">\n @if(coverVariant && coverPreview){\n <cai-document-preview class=\"cover-container\" [file]=\"{\n fileName: 'cover.png',\n imagePreviewUrl: coverUrl,\n type: 'png',\n size: 0,\n file: null,\n baseName: 'cover',\n pageCount: undefined,\n tag: ''\n }\" viewMode=\"small\" [coverMinimalMode]=\"true\" (onDelete)=\"handleDelete('cover.png')\"></cai-document-preview>\n }\n @if (profileVariant) { @if(!profilePreview) {\n <div>\n <cai-avatar [driver]=\"driver()\" [size]=\"160\" [rounded]=\"rounded()\"></cai-avatar>\n </div>\n } @else if(profilePreview) {\n <div class=\"profile-container\">\n <img [class]=\"{\n 'profile-rounded-image': rounded(),\n 'profile-square-image': !rounded()\n }\" [src]=\"profileUrl\" />\n </div>\n } }\n <!--Image Cropper-->\n @if(cropFile && showCrop){ @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper #cropper class=\"img-cropper\" [output]=\"'base64'\" [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\" [hideResizeSquares]=\"true\" [allowMoveImage]=\"true\"\n [transform]=\"transform\" (transformChange)=\"onTransformChange($event)\" format=\"png\" [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\" [resizeToHeight]=\"cropHeight()\" [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\" (imageCropped)=\"imageCropped($event)\" (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\" (loadImageFailed)=\"loadImageFailed()\"></image-cropper>\n @if(isCropperReady()){\n <div class=\"lower-part\">\n <div class=\"range\">\n <input #inputRange type=\"range\" class=\"custom-range\" min=\"1\" max=\"10\" step=\"0.1\" [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\" />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Carousel -->\n @if(docCount > 0 && (documentVariant || videoVariant)) {\n <div class=\"docs\">\n <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview class=\"doc\" [file]=\"doc\" (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\" (onTagChange)=\"handleTagChange($event)\"\n viewMode=\"small\"></cai-document-preview>\n }\n </div>\n @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div class=\"drop-zone-container\" (drop)=\"onDrop($event)\" (dragover)=\"$event.preventDefault()\" [class]=\"{\n 'more-docs': docCount >= 3,\n 'small-more-docs': docCount >= 2 && smallSize,\n unsupported: unsupported(),\n smallView: smallView()\n }\">\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if(logoVariant && logoPreview){\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n } @if(coverVariant || logoVariant){\n <svg-icon name=\"cai-illustration-drop-zone-cover\" class=\"illustration\"></svg-icon>\n } @if(profileVariant){\n <svg-icon name=\"cai-illustration-drop-zone-profile\" class=\"illustration\"></svg-icon>\n } @if(documentVariant){\n <svg-icon name=\"cai-illustration-drop-zone\" class=\"illustration\"></svg-icon>\n } @if(videoVariant){\n <svg-icon name=\"cai-illustration-drop-zone-video\" class=\"illustration\"></svg-icon>\n }\n\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES @if (docCount < 1) { <span>HERE</span>\n }\n </p>\n @if(!coverPreview && !profilePreview){\n <p class=\"subtext\">OR CLICK TO ADD</p>\n } @if(coverPreview || profilePreview){\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n </div>\n\n <input type=\"file\" aria-hidden=\"true\" multiple class=\"drop-zone-input\" #inputRef (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\" />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p class=\"badge\" [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n }\">\n {{ type }}\n </p>\n }\n </div>\n <button class=\"cancel-button\">\n <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n </button>\n </div>\n </div>\n</div>", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: DocumentPreviewComponent, selector: "cai-document-preview", inputs: ["coverMinimalMode", "noTagOption", "file", "viewMode"], outputs: ["onDelete", "onDownload", "onTagChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }] });
|
|
4110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeletedFileIds: "onDeletedFileIds", docsChange: "docsChange" }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: !smallSize,\n logoVar: logoVariant\n }\"\n>\n @if(coverVariant && coverPreview){\n <cai-document-preview\n class=\"cover-container\"\n [file]=\"{\n fileName: 'cover.png',\n imagePreviewUrl: coverUrl,\n type: 'png',\n size: 0,\n file: null,\n baseName: 'cover',\n pageCount: undefined,\n tag: ''\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n } @if (profileVariant) { @if(!profilePreview) {\n <div>\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else if(profilePreview) {\n <div class=\"profile-container\">\n <img\n [class]=\"{\n 'profile-rounded-image': rounded(),\n 'profile-square-image': !rounded()\n }\"\n [src]=\"profileUrl\"\n />\n </div>\n } }\n <!--Image Cropper-->\n @if(cropFile && showCrop){ @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if(isCropperReady()){\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Carousel -->\n @if(docCount > 0 && (documentVariant || videoVariant)) {\n <div class=\"docs\">\n <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview\n class=\"doc\"\n [file]=\"doc\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n viewMode=\"small\"\n ></cai-document-preview>\n }\n </div>\n @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"$event.preventDefault()\"\n [class]=\"{\n 'more-docs': docCount >= 3,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'maxReached': countFiles === this.docs().length,\n unsupported: unsupported(),\n smallView: smallView()\n }\"\n >\n <!-- Drop Zone -->\n <div\n class=\"drop-zone\"\n (click)=\"handleClickToAdd()\"\n >\n @if(logoVariant && logoPreview){\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n } @if(coverVariant || logoVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n } @if(profileVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n } @if(documentVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n } @if(videoVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n } @if(countFiles === this.docs().length) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span></p>\n </div>\n\n } @else{\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES @if (docCount < 1) { <span>HERE</span>\n }\n </p>\n @if(!coverPreview && !profilePreview){\n <p class=\"subtext\">OR CLICK TO ADD</p>\n } @if(coverPreview || profilePreview){\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n </div>\n }\n\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n <button class=\"cancel-button\">\n <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [".container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:80px;height:80px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.maxReached{opacity:.4;pointer-events:none;cursor:none}.maxReached .drop-zone{padding:0!important}.maxReached.drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important;padding:4px 6px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.profile-container{width:160px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: DocumentPreviewComponent, selector: "cai-document-preview", inputs: ["coverMinimalMode", "noTagOption", "file", "viewMode"], outputs: ["onDelete", "onDownload", "onTagChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }] });
|
|
3943
4111
|
}
|
|
3944
4112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
|
|
3945
4113
|
type: Component,
|
|
@@ -3948,7 +4116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3948
4116
|
DocumentPreviewComponent,
|
|
3949
4117
|
ImageCropperComponent,
|
|
3950
4118
|
AvatarComponent,
|
|
3951
|
-
], template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div class=\"container\" [class]=\"{\n smallContainer: smallSize,\n largeContainer: !smallSize,\n logoVar: logoVariant\n }\">\n @if(coverVariant && coverPreview){\n <cai-document-preview class=\"cover-container\" [file]=\"{\n fileName: 'cover.png',\n imagePreviewUrl: coverUrl,\n type: 'png',\n size: 0,\n file: null,\n baseName: 'cover',\n pageCount: undefined,\n tag: ''\n }\" viewMode=\"small\" [coverMinimalMode]=\"true\" (onDelete)=\"handleDelete('cover.png')\"></cai-document-preview>\n }\n @if (profileVariant) { @if(!profilePreview) {\n <div>\n <cai-avatar [driver]=\"driver()\" [size]=\"160\" [rounded]=\"rounded()\"></cai-avatar>\n </div>\n } @else if(profilePreview) {\n <div class=\"profile-container\">\n <img [class]=\"{\n 'profile-rounded-image': rounded(),\n 'profile-square-image': !rounded()\n }\" [src]=\"profileUrl\" />\n </div>\n } }\n <!--Image Cropper-->\n @if(cropFile && showCrop){ @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper #cropper class=\"img-cropper\" [output]=\"'base64'\" [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\" [hideResizeSquares]=\"true\" [allowMoveImage]=\"true\"\n [transform]=\"transform\" (transformChange)=\"onTransformChange($event)\" format=\"png\" [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\" [resizeToHeight]=\"cropHeight()\" [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\" (imageCropped)=\"imageCropped($event)\" (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\" (loadImageFailed)=\"loadImageFailed()\"></image-cropper>\n @if(isCropperReady()){\n <div class=\"lower-part\">\n <div class=\"range\">\n <input #inputRange type=\"range\" class=\"custom-range\" min=\"1\" max=\"10\" step=\"0.1\" [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\" />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Carousel -->\n @if(docCount > 0 && (documentVariant || videoVariant)) {\n <div class=\"docs\">\n <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview class=\"doc\" [file]=\"doc\" (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\" (onTagChange)=\"handleTagChange($event)\"\n viewMode=\"small\"></cai-document-preview>\n }\n </div>\n @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div class=\"drop-zone-container\" (drop)=\"onDrop($event)\" (dragover)=\"$event.preventDefault()\" [class]=\"{\n 'more-docs': docCount >= 3,\n 'small-more-docs': docCount >= 2 && smallSize,\n unsupported: unsupported(),\n smallView: smallView()\n }\">\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if(logoVariant && logoPreview){\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n } @if(coverVariant || logoVariant){\n <svg-icon name=\"cai-illustration-drop-zone-cover\" class=\"illustration\"></svg-icon>\n } @if(profileVariant){\n <svg-icon name=\"cai-illustration-drop-zone-profile\" class=\"illustration\"></svg-icon>\n } @if(documentVariant){\n <svg-icon name=\"cai-illustration-drop-zone\" class=\"illustration\"></svg-icon>\n } @if(videoVariant){\n <svg-icon name=\"cai-illustration-drop-zone-video\" class=\"illustration\"></svg-icon>\n }\n\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES @if (docCount < 1) { <span>HERE</span>\n }\n </p>\n @if(!coverPreview && !profilePreview){\n <p class=\"subtext\">OR CLICK TO ADD</p>\n } @if(coverPreview || profilePreview){\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n </div>\n\n <input type=\"file\" aria-hidden=\"true\" multiple class=\"drop-zone-input\" #inputRef (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\" />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p class=\"badge\" [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n }\">\n {{ type }}\n </p>\n }\n </div>\n <button class=\"cancel-button\">\n <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n </button>\n </div>\n </div>\n</div>", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"] }]
|
|
4119
|
+
], template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: !smallSize,\n logoVar: logoVariant\n }\"\n>\n @if(coverVariant && coverPreview){\n <cai-document-preview\n class=\"cover-container\"\n [file]=\"{\n fileName: 'cover.png',\n imagePreviewUrl: coverUrl,\n type: 'png',\n size: 0,\n file: null,\n baseName: 'cover',\n pageCount: undefined,\n tag: ''\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n } @if (profileVariant) { @if(!profilePreview) {\n <div>\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else if(profilePreview) {\n <div class=\"profile-container\">\n <img\n [class]=\"{\n 'profile-rounded-image': rounded(),\n 'profile-square-image': !rounded()\n }\"\n [src]=\"profileUrl\"\n />\n </div>\n } }\n <!--Image Cropper-->\n @if(cropFile && showCrop){ @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if(isCropperReady()){\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Carousel -->\n @if(docCount > 0 && (documentVariant || videoVariant)) {\n <div class=\"docs\">\n <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview\n class=\"doc\"\n [file]=\"doc\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n viewMode=\"small\"\n ></cai-document-preview>\n }\n </div>\n @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"$event.preventDefault()\"\n [class]=\"{\n 'more-docs': docCount >= 3,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'maxReached': countFiles === this.docs().length,\n unsupported: unsupported(),\n smallView: smallView()\n }\"\n >\n <!-- Drop Zone -->\n <div\n class=\"drop-zone\"\n (click)=\"handleClickToAdd()\"\n >\n @if(logoVariant && logoPreview){\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n } @if(coverVariant || logoVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n } @if(profileVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n } @if(documentVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n } @if(videoVariant){\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n } @if(countFiles === this.docs().length) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span></p>\n </div>\n\n } @else{\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES @if (docCount < 1) { <span>HERE</span>\n }\n </p>\n @if(!coverPreview && !profilePreview){\n <p class=\"subtext\">OR CLICK TO ADD</p>\n } @if(coverPreview || profilePreview){\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n </div>\n }\n\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n <button class=\"cancel-button\">\n <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [".container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:80px;height:80px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.maxReached{opacity:.4;pointer-events:none;cursor:none}.maxReached .drop-zone{padding:0!important}.maxReached.drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important;padding:4px 6px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.profile-container{width:160px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"] }]
|
|
3952
4120
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { onDeletedFileIds: [{
|
|
3953
4121
|
type: Output
|
|
3954
4122
|
}], docsChange: [{
|
|
@@ -6780,5 +6948,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6780
6948
|
* Generated bundle index. Do not edit.
|
|
6781
6949
|
*/
|
|
6782
6950
|
|
|
6783
|
-
export { AvatarComponent, CaiInputDatetimePickerComponent, CopyComponent, DropZoneComponent, DropdownTypes, InputAddressComponent, InputComponent, PmComponent, ignoreWhenAutofilled };
|
|
6951
|
+
export { AvatarComponent, CaiInputDatetimePickerComponent, CopyComponent, DropZoneComponent, DropdownTypes, INPUT_CHARACTER_SETS, InputAddressComponent, InputComponent, PmComponent, ignoreWhenAutofilled };
|
|
6784
6952
|
//# sourceMappingURL=carriera-intern-components.mjs.map
|