matcha-components 20.90.0 → 20.93.0
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/fesm2022/matcha-components.mjs +361 -67
- package/fesm2022/matcha-components.mjs.map +1 -1
- package/index.d.ts +48 -17
- package/package.json +1 -1
|
@@ -2277,13 +2277,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
2277
2277
|
}] } });
|
|
2278
2278
|
|
|
2279
2279
|
class MatchaLabelComponent {
|
|
2280
|
-
constructor(elementRef) {
|
|
2280
|
+
constructor(elementRef, cdr) {
|
|
2281
2281
|
this.elementRef = elementRef;
|
|
2282
|
+
this.cdr = cdr;
|
|
2282
2283
|
this.color = 'blue-grey';
|
|
2283
2284
|
this.isRequired = false;
|
|
2284
2285
|
}
|
|
2285
2286
|
ngAfterViewInit() {
|
|
2286
|
-
|
|
2287
|
+
// Usar setTimeout para evitar ExpressionChangedAfterItHasBeenCheckedError
|
|
2288
|
+
setTimeout(() => {
|
|
2289
|
+
this.checkIfRequired();
|
|
2290
|
+
this.cdr.detectChanges();
|
|
2291
|
+
});
|
|
2287
2292
|
}
|
|
2288
2293
|
checkIfRequired() {
|
|
2289
2294
|
// Busca o form-field pai
|
|
@@ -2295,13 +2300,13 @@ class MatchaLabelComponent {
|
|
|
2295
2300
|
this.isRequired = !!inputElement;
|
|
2296
2301
|
}
|
|
2297
2302
|
}
|
|
2298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2303
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2299
2304
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n style=\"transform: translateY(-8px);\">\n <ng-content></ng-content>\n <span *ngIf=\"isRequired\"> *</span>\n <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2300
2305
|
}
|
|
2301
2306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, decorators: [{
|
|
2302
2307
|
type: Component,
|
|
2303
2308
|
args: [{ selector: 'matcha-label', standalone: false, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n style=\"transform: translateY(-8px);\">\n <ng-content></ng-content>\n <span *ngIf=\"isRequired\"> *</span>\n <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\n" }]
|
|
2304
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
|
|
2309
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
|
|
2305
2310
|
type: Input
|
|
2306
2311
|
}] } });
|
|
2307
2312
|
|
|
@@ -4822,6 +4827,7 @@ const initialConfig = {
|
|
|
4822
4827
|
leadZero: false,
|
|
4823
4828
|
keepCharacterPositions: false,
|
|
4824
4829
|
triggerOnMaskChange: false,
|
|
4830
|
+
currencyMode: false,
|
|
4825
4831
|
inputTransformFn: (value) => value,
|
|
4826
4832
|
outputTransformFn: (value) => value,
|
|
4827
4833
|
maskFilled: new EventEmitter(),
|
|
@@ -4911,6 +4917,7 @@ class MatchaMaskApplierService {
|
|
|
4911
4917
|
this.keepCharacterPositions = this._config.keepCharacterPositions;
|
|
4912
4918
|
this.instantPrefix = this._config.instantPrefix;
|
|
4913
4919
|
this.triggerOnMaskChange = this._config.triggerOnMaskChange;
|
|
4920
|
+
this.currencyMode = this._config.currencyMode;
|
|
4914
4921
|
this._shift = new Set();
|
|
4915
4922
|
this.plusOnePosition = false;
|
|
4916
4923
|
this.maskExpression = '';
|
|
@@ -5108,6 +5115,49 @@ class MatchaMaskApplierService {
|
|
|
5108
5115
|
decimalMarker = this.decimalMarker.find((dm) => dm !== this.thousandSeparator);
|
|
5109
5116
|
}
|
|
5110
5117
|
}
|
|
5118
|
+
// Modo moeda: dígitos entram pela direita (ex: 1 → 0,01, 12 → 0,12, 123 → 1,23)
|
|
5119
|
+
if (this.currencyMode && precision > 0) {
|
|
5120
|
+
// Extrair apenas dígitos e sinal negativo
|
|
5121
|
+
const hasMinus = processedValue.startsWith("-" /* MaskExpression.MINUS */) ||
|
|
5122
|
+
(this.allowNegativeNumbers && processedValue.includes("-" /* MaskExpression.MINUS */));
|
|
5123
|
+
const digitsOnly = processedValue.replace(/[^\d]/g, '');
|
|
5124
|
+
if (digitsOnly.length === 0) {
|
|
5125
|
+
result = "" /* MaskExpression.EMPTY_STRING */;
|
|
5126
|
+
}
|
|
5127
|
+
else {
|
|
5128
|
+
// Remover zeros à esquerda desnecessários
|
|
5129
|
+
const cleanDigits = digitsOnly.replace(/^0+/, '') || '0';
|
|
5130
|
+
let formattedValue;
|
|
5131
|
+
if (cleanDigits.length <= precision) {
|
|
5132
|
+
// Menos ou igual dígitos que a precisão: 0,XX
|
|
5133
|
+
const paddedDecimal = cleanDigits.padStart(precision, '0');
|
|
5134
|
+
formattedValue = '0' + decimalMarker + paddedDecimal;
|
|
5135
|
+
}
|
|
5136
|
+
else {
|
|
5137
|
+
// Mais dígitos que a precisão: separar inteiro e decimal
|
|
5138
|
+
const integerPart = cleanDigits.slice(0, -precision);
|
|
5139
|
+
const decimalPart = cleanDigits.slice(-precision);
|
|
5140
|
+
// Aplicar separador de milhares na parte inteira
|
|
5141
|
+
let formattedInteger = integerPart;
|
|
5142
|
+
const rgx = /(\d+)(\d{3})/;
|
|
5143
|
+
while (this.thousandSeparator && rgx.test(formattedInteger)) {
|
|
5144
|
+
formattedInteger = formattedInteger.replace(rgx, '$1' + this.thousandSeparator + '$2');
|
|
5145
|
+
}
|
|
5146
|
+
formattedValue = formattedInteger + decimalMarker + decimalPart;
|
|
5147
|
+
}
|
|
5148
|
+
result = (hasMinus ? "-" /* MaskExpression.MINUS */ : '') + formattedValue;
|
|
5149
|
+
}
|
|
5150
|
+
// Mover o cursor para o final
|
|
5151
|
+
cb(result.length, result.length);
|
|
5152
|
+
// Pular toda a lógica de formatação normal e ir direto para o retorno
|
|
5153
|
+
// O result já está formatado corretamente para exibição
|
|
5154
|
+
// O formControlResult (no service) vai processar e remover prefixo/sufixo
|
|
5155
|
+
let res = `${this.prefix}${result}${this.suffix}`;
|
|
5156
|
+
if (result.length === 0) {
|
|
5157
|
+
res = this.instantPrefix ? `${this.prefix}${result}` : `${result}`;
|
|
5158
|
+
}
|
|
5159
|
+
return res;
|
|
5160
|
+
}
|
|
5111
5161
|
if (backspaced) {
|
|
5112
5162
|
const { decimalMarkerIndex, nonZeroIndex } = this._findFirstNonZeroAndDecimalIndex(processedValue, decimalMarker);
|
|
5113
5163
|
const zeroIndexMinus = processedValue[0] === "-" /* MaskExpression.MINUS */;
|
|
@@ -5694,9 +5744,33 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5694
5744
|
applyMask(inputValue, maskExpression, position = 0, justPasted = false, backspaced = false,
|
|
5695
5745
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5696
5746
|
cb = () => { }) {
|
|
5747
|
+
// Converter automaticamente número, boolean ou object para string (retrocompatível)
|
|
5748
|
+
// Isso previne o erro "indexOf is not a function" quando números são passados
|
|
5749
|
+
let processedInputValue;
|
|
5750
|
+
if (inputValue === null || inputValue === undefined) {
|
|
5751
|
+
processedInputValue = '';
|
|
5752
|
+
}
|
|
5753
|
+
else if (typeof inputValue === 'number') {
|
|
5754
|
+
processedInputValue = String(inputValue);
|
|
5755
|
+
}
|
|
5756
|
+
else if (typeof inputValue === 'boolean') {
|
|
5757
|
+
processedInputValue = inputValue ? 'true' : 'false';
|
|
5758
|
+
}
|
|
5759
|
+
else if (typeof inputValue === 'object') {
|
|
5760
|
+
// Para objetos, tentar converter para string (JSON.stringify ou toString)
|
|
5761
|
+
try {
|
|
5762
|
+
processedInputValue = JSON.stringify(inputValue);
|
|
5763
|
+
}
|
|
5764
|
+
catch {
|
|
5765
|
+
processedInputValue = String(inputValue);
|
|
5766
|
+
}
|
|
5767
|
+
}
|
|
5768
|
+
else {
|
|
5769
|
+
processedInputValue = String(inputValue);
|
|
5770
|
+
}
|
|
5697
5771
|
// If no mask expression, return the input value or the actual value
|
|
5698
5772
|
if (!maskExpression) {
|
|
5699
|
-
return
|
|
5773
|
+
return processedInputValue !== this.actualValue ? this.actualValue : processedInputValue;
|
|
5700
5774
|
}
|
|
5701
5775
|
// Show mask in input if required
|
|
5702
5776
|
this.maskIsShown = this.showMaskTyped
|
|
@@ -5704,27 +5778,27 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5704
5778
|
: "" /* MaskExpression.EMPTY_STRING */;
|
|
5705
5779
|
// Handle specific mask expressions
|
|
5706
5780
|
if (this.maskExpression === "IP" /* MaskExpression.IP */ && this.showMaskTyped) {
|
|
5707
|
-
this.maskIsShown = this.showMaskInInput(
|
|
5781
|
+
this.maskIsShown = this.showMaskInInput(processedInputValue || "#" /* MaskExpression.HASH */);
|
|
5708
5782
|
}
|
|
5709
5783
|
if (this.maskExpression === "CPF_CNPJ" /* MaskExpression.CPF_CNPJ */ && this.showMaskTyped) {
|
|
5710
|
-
this.maskIsShown = this.showMaskInInput(
|
|
5784
|
+
this.maskIsShown = this.showMaskInInput(processedInputValue || "#" /* MaskExpression.HASH */);
|
|
5711
5785
|
}
|
|
5712
5786
|
// Handle empty input value with mask typed
|
|
5713
|
-
if (!
|
|
5787
|
+
if (!processedInputValue && this.showMaskTyped) {
|
|
5714
5788
|
this.formControlResult(this.prefix);
|
|
5715
5789
|
return `${this.prefix}${this.maskIsShown}${this.suffix}`;
|
|
5716
5790
|
}
|
|
5717
|
-
const getSymbol = !!
|
|
5718
|
-
? (
|
|
5791
|
+
const getSymbol = !!processedInputValue && typeof this.selStart === 'number'
|
|
5792
|
+
? (processedInputValue[this.selStart] ?? "" /* MaskExpression.EMPTY_STRING */)
|
|
5719
5793
|
: "" /* MaskExpression.EMPTY_STRING */;
|
|
5720
5794
|
let newInputValue = '';
|
|
5721
5795
|
let newPosition = position;
|
|
5722
5796
|
// Handle hidden input or input with asterisk symbol
|
|
5723
5797
|
if ((this.hiddenInput ||
|
|
5724
|
-
(
|
|
5798
|
+
(processedInputValue && processedInputValue.indexOf("*" /* MaskExpression.SYMBOL_STAR */) >= 0)) &&
|
|
5725
5799
|
!this.writingValue) {
|
|
5726
|
-
let actualResult =
|
|
5727
|
-
?
|
|
5800
|
+
let actualResult = processedInputValue && processedInputValue.length === 1
|
|
5801
|
+
? processedInputValue.split("" /* MaskExpression.EMPTY_STRING */)
|
|
5728
5802
|
: this.actualValue.split("" /* MaskExpression.EMPTY_STRING */);
|
|
5729
5803
|
// Handle backspace
|
|
5730
5804
|
if (backspaced) {
|
|
@@ -5735,7 +5809,7 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5735
5809
|
// Remove mask if showMaskTyped is true
|
|
5736
5810
|
if (this.showMaskTyped) {
|
|
5737
5811
|
// eslint-disable-next-line no-param-reassign
|
|
5738
|
-
|
|
5812
|
+
processedInputValue = this.removeMask(processedInputValue);
|
|
5739
5813
|
actualResult = this.removeMask(actualResult.join('')).split("" /* MaskExpression.EMPTY_STRING */);
|
|
5740
5814
|
}
|
|
5741
5815
|
// Handle selection start and end
|
|
@@ -5744,18 +5818,18 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5744
5818
|
this.selEnd = Number(this.selEnd);
|
|
5745
5819
|
}
|
|
5746
5820
|
else {
|
|
5747
|
-
if (
|
|
5821
|
+
if (processedInputValue !== "" /* MaskExpression.EMPTY_STRING */ && actualResult.length) {
|
|
5748
5822
|
if (typeof this.selStart === 'number' && typeof this.selEnd === 'number') {
|
|
5749
|
-
if (
|
|
5823
|
+
if (processedInputValue.length > actualResult.length) {
|
|
5750
5824
|
actualResult.splice(this.selStart, 0, getSymbol);
|
|
5751
5825
|
}
|
|
5752
|
-
else if (
|
|
5753
|
-
if (actualResult.length -
|
|
5826
|
+
else if (processedInputValue.length < actualResult.length) {
|
|
5827
|
+
if (actualResult.length - processedInputValue.length === 1) {
|
|
5754
5828
|
if (backspaced) {
|
|
5755
5829
|
actualResult.splice(this.selStart - 1, 1);
|
|
5756
5830
|
}
|
|
5757
5831
|
else {
|
|
5758
|
-
actualResult.splice(
|
|
5832
|
+
actualResult.splice(processedInputValue.length - 1, 1);
|
|
5759
5833
|
}
|
|
5760
5834
|
}
|
|
5761
5835
|
else {
|
|
@@ -5770,27 +5844,27 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5770
5844
|
}
|
|
5771
5845
|
// Remove mask if showMaskTyped is true and hiddenInput is false
|
|
5772
5846
|
if (this.showMaskTyped && !this.hiddenInput) {
|
|
5773
|
-
newInputValue = this.removeMask(
|
|
5847
|
+
newInputValue = this.removeMask(processedInputValue);
|
|
5774
5848
|
}
|
|
5775
5849
|
// Handle actual value length
|
|
5776
5850
|
if (this.actualValue.length) {
|
|
5777
|
-
if (actualResult.length <
|
|
5851
|
+
if (actualResult.length < processedInputValue.length) {
|
|
5778
5852
|
newInputValue = this.shiftTypedSymbols(actualResult.join("" /* MaskExpression.EMPTY_STRING */));
|
|
5779
5853
|
}
|
|
5780
|
-
else if (actualResult.length ===
|
|
5854
|
+
else if (actualResult.length === processedInputValue.length) {
|
|
5781
5855
|
newInputValue = actualResult.join("" /* MaskExpression.EMPTY_STRING */);
|
|
5782
5856
|
}
|
|
5783
5857
|
else {
|
|
5784
|
-
newInputValue =
|
|
5858
|
+
newInputValue = processedInputValue;
|
|
5785
5859
|
}
|
|
5786
5860
|
}
|
|
5787
5861
|
else {
|
|
5788
|
-
newInputValue =
|
|
5862
|
+
newInputValue = processedInputValue;
|
|
5789
5863
|
}
|
|
5790
5864
|
}
|
|
5791
5865
|
// Handle just pasted input
|
|
5792
5866
|
if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
|
|
5793
|
-
newInputValue =
|
|
5867
|
+
newInputValue = processedInputValue;
|
|
5794
5868
|
}
|
|
5795
5869
|
// Handle backspace with special characters
|
|
5796
5870
|
if (backspaced &&
|
|
@@ -5817,11 +5891,11 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5817
5891
|
}
|
|
5818
5892
|
// Handle mask changed
|
|
5819
5893
|
if (this.maskChanged) {
|
|
5820
|
-
newInputValue =
|
|
5894
|
+
newInputValue = processedInputValue;
|
|
5821
5895
|
}
|
|
5822
5896
|
else {
|
|
5823
5897
|
newInputValue =
|
|
5824
|
-
Boolean(newInputValue) && newInputValue.length ? newInputValue :
|
|
5898
|
+
Boolean(newInputValue) && newInputValue.length ? newInputValue : processedInputValue;
|
|
5825
5899
|
}
|
|
5826
5900
|
// Handle showMaskTyped and keepCharacterPositions
|
|
5827
5901
|
if (this.showMaskTyped &&
|
|
@@ -5846,12 +5920,17 @@ class MatchaMaskService extends MatchaMaskApplierService {
|
|
|
5846
5920
|
this.decimalMarker === "." /* MaskExpression.DOT */) {
|
|
5847
5921
|
this.decimalMarker = "," /* MaskExpression.COMMA */;
|
|
5848
5922
|
}
|
|
5849
|
-
// b) remove decimal marker from list of special characters to mask
|
|
5923
|
+
// b) remove ONLY decimal marker from list of special characters to mask
|
|
5924
|
+
// The thousandSeparator should REMAIN in the list to be removed from the final value
|
|
5850
5925
|
if (this.maskExpression.startsWith("separator" /* MaskExpression.SEPARATOR */) &&
|
|
5851
5926
|
this.dropSpecialCharacters === true) {
|
|
5852
|
-
this.specialCharacters = this.specialCharacters.filter((item) => !this._compareOrIncludes(item, this.decimalMarker,
|
|
5927
|
+
this.specialCharacters = this.specialCharacters.filter((item) => !this._compareOrIncludes(item, this.decimalMarker, null) // Only remove decimalMarker, keep thousandSeparator
|
|
5853
5928
|
);
|
|
5854
5929
|
}
|
|
5930
|
+
// c) set isNumberValue to true for separator masks to ensure proper number conversion
|
|
5931
|
+
if (this.maskExpression.startsWith("separator" /* MaskExpression.SEPARATOR */)) {
|
|
5932
|
+
this.isNumberValue = true;
|
|
5933
|
+
}
|
|
5855
5934
|
// Update previous and current values
|
|
5856
5935
|
if (result || result === '') {
|
|
5857
5936
|
this.previousValue = this.currentValue;
|
|
@@ -6316,23 +6395,24 @@ class MatchaMaskCompatibleDirective {
|
|
|
6316
6395
|
this._suffix = '';
|
|
6317
6396
|
this.thousandSeparator = ' ';
|
|
6318
6397
|
this.decimalMarker = '.';
|
|
6319
|
-
this.
|
|
6320
|
-
this.
|
|
6321
|
-
this.
|
|
6398
|
+
this._dropSpecialCharacters = null;
|
|
6399
|
+
this._hiddenInput = null;
|
|
6400
|
+
this._showMaskTyped = null;
|
|
6322
6401
|
this.placeHolderCharacter = null;
|
|
6323
6402
|
this.shownMaskExpression = null;
|
|
6324
|
-
this.
|
|
6325
|
-
this.
|
|
6403
|
+
this._clearIfNotMatch = null;
|
|
6404
|
+
this._validation = null;
|
|
6326
6405
|
this.separatorLimit = '';
|
|
6327
|
-
this.
|
|
6328
|
-
this.
|
|
6329
|
-
this.
|
|
6330
|
-
this.
|
|
6331
|
-
this.
|
|
6406
|
+
this._allowNegativeNumbers = null;
|
|
6407
|
+
this._leadZeroDateTime = null;
|
|
6408
|
+
this._leadZero = null;
|
|
6409
|
+
this._triggerOnMaskChange = null;
|
|
6410
|
+
this._apm = null;
|
|
6332
6411
|
this.inputTransformFn = null;
|
|
6333
6412
|
this.outputTransformFn = null;
|
|
6334
|
-
this.
|
|
6335
|
-
this.
|
|
6413
|
+
this._keepCharacterPositions = null;
|
|
6414
|
+
this._instantPrefix = null;
|
|
6415
|
+
this._currencyMode = null;
|
|
6336
6416
|
this.maskFilled = new EventEmitter();
|
|
6337
6417
|
this._maskValue = '';
|
|
6338
6418
|
this._inputValue = '';
|
|
@@ -6366,8 +6446,112 @@ class MatchaMaskCompatibleDirective {
|
|
|
6366
6446
|
get suffixAttr() {
|
|
6367
6447
|
return this._suffix || null;
|
|
6368
6448
|
}
|
|
6449
|
+
set dropSpecialCharacters(value) {
|
|
6450
|
+
// Converter string "true" ou "false" para boolean (retrocompatível)
|
|
6451
|
+
if (value === 'true' || value === true) {
|
|
6452
|
+
this._dropSpecialCharacters = true;
|
|
6453
|
+
}
|
|
6454
|
+
else if (value === 'false' || value === false) {
|
|
6455
|
+
this._dropSpecialCharacters = false;
|
|
6456
|
+
}
|
|
6457
|
+
else if (Array.isArray(value) || value === null) {
|
|
6458
|
+
this._dropSpecialCharacters = value;
|
|
6459
|
+
}
|
|
6460
|
+
else {
|
|
6461
|
+
// Para qualquer outro valor string, tratar como false
|
|
6462
|
+
this._dropSpecialCharacters = false;
|
|
6463
|
+
}
|
|
6464
|
+
}
|
|
6465
|
+
get dropSpecialCharacters() {
|
|
6466
|
+
return this._dropSpecialCharacters;
|
|
6467
|
+
}
|
|
6468
|
+
// Helper function para converter string para boolean (retrocompatível)
|
|
6469
|
+
convertToBoolean(value) {
|
|
6470
|
+
if (value === null || value === undefined) {
|
|
6471
|
+
return null;
|
|
6472
|
+
}
|
|
6473
|
+
if (typeof value === 'boolean') {
|
|
6474
|
+
return value;
|
|
6475
|
+
}
|
|
6476
|
+
if (typeof value === 'string') {
|
|
6477
|
+
return value.toLowerCase() === 'true';
|
|
6478
|
+
}
|
|
6479
|
+
return false;
|
|
6480
|
+
}
|
|
6481
|
+
set hiddenInput(value) {
|
|
6482
|
+
this._hiddenInput = this.convertToBoolean(value);
|
|
6483
|
+
}
|
|
6484
|
+
get hiddenInput() {
|
|
6485
|
+
return this._hiddenInput;
|
|
6486
|
+
}
|
|
6487
|
+
set showMaskTyped(value) {
|
|
6488
|
+
this._showMaskTyped = this.convertToBoolean(value);
|
|
6489
|
+
}
|
|
6490
|
+
get showMaskTyped() {
|
|
6491
|
+
return this._showMaskTyped;
|
|
6492
|
+
}
|
|
6493
|
+
set clearIfNotMatch(value) {
|
|
6494
|
+
this._clearIfNotMatch = this.convertToBoolean(value);
|
|
6495
|
+
}
|
|
6496
|
+
get clearIfNotMatch() {
|
|
6497
|
+
return this._clearIfNotMatch;
|
|
6498
|
+
}
|
|
6499
|
+
set validation(value) {
|
|
6500
|
+
this._validation = this.convertToBoolean(value);
|
|
6501
|
+
}
|
|
6502
|
+
get validation() {
|
|
6503
|
+
return this._validation;
|
|
6504
|
+
}
|
|
6505
|
+
set allowNegativeNumbers(value) {
|
|
6506
|
+
this._allowNegativeNumbers = this.convertToBoolean(value);
|
|
6507
|
+
}
|
|
6508
|
+
get allowNegativeNumbers() {
|
|
6509
|
+
return this._allowNegativeNumbers;
|
|
6510
|
+
}
|
|
6511
|
+
set leadZeroDateTime(value) {
|
|
6512
|
+
this._leadZeroDateTime = this.convertToBoolean(value);
|
|
6513
|
+
}
|
|
6514
|
+
get leadZeroDateTime() {
|
|
6515
|
+
return this._leadZeroDateTime;
|
|
6516
|
+
}
|
|
6517
|
+
set leadZero(value) {
|
|
6518
|
+
this._leadZero = this.convertToBoolean(value);
|
|
6519
|
+
}
|
|
6520
|
+
get leadZero() {
|
|
6521
|
+
return this._leadZero;
|
|
6522
|
+
}
|
|
6523
|
+
set triggerOnMaskChange(value) {
|
|
6524
|
+
this._triggerOnMaskChange = this.convertToBoolean(value);
|
|
6525
|
+
}
|
|
6526
|
+
get triggerOnMaskChange() {
|
|
6527
|
+
return this._triggerOnMaskChange;
|
|
6528
|
+
}
|
|
6529
|
+
set apm(value) {
|
|
6530
|
+
this._apm = this.convertToBoolean(value);
|
|
6531
|
+
}
|
|
6532
|
+
get apm() {
|
|
6533
|
+
return this._apm;
|
|
6534
|
+
}
|
|
6535
|
+
set keepCharacterPositions(value) {
|
|
6536
|
+
this._keepCharacterPositions = this.convertToBoolean(value);
|
|
6537
|
+
}
|
|
6538
|
+
get keepCharacterPositions() {
|
|
6539
|
+
return this._keepCharacterPositions;
|
|
6540
|
+
}
|
|
6541
|
+
set instantPrefix(value) {
|
|
6542
|
+
this._instantPrefix = this.convertToBoolean(value);
|
|
6543
|
+
}
|
|
6544
|
+
get instantPrefix() {
|
|
6545
|
+
return this._instantPrefix;
|
|
6546
|
+
}
|
|
6547
|
+
set currencyMode(value) {
|
|
6548
|
+
this._currencyMode = this.convertToBoolean(value);
|
|
6549
|
+
}
|
|
6550
|
+
get currencyMode() {
|
|
6551
|
+
return this._currencyMode;
|
|
6552
|
+
}
|
|
6369
6553
|
ngOnChanges(changes) {
|
|
6370
|
-
const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, instantPrefix, } = changes;
|
|
6554
|
+
const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, instantPrefix, currencyMode, } = changes;
|
|
6371
6555
|
if (mask) {
|
|
6372
6556
|
this._mask = mask.currentValue ?? '';
|
|
6373
6557
|
this._maskValue = this._mask ?? '';
|
|
@@ -6394,13 +6578,25 @@ class MatchaMaskCompatibleDirective {
|
|
|
6394
6578
|
this._maskService.decimalMarker = decimalMarker.currentValue ?? '.';
|
|
6395
6579
|
}
|
|
6396
6580
|
if (dropSpecialCharacters) {
|
|
6397
|
-
|
|
6581
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6582
|
+
const value = this.dropSpecialCharacters;
|
|
6583
|
+
if (value !== null) {
|
|
6584
|
+
this._maskService.dropSpecialCharacters = value;
|
|
6585
|
+
}
|
|
6398
6586
|
}
|
|
6399
6587
|
if (hiddenInput) {
|
|
6400
|
-
|
|
6588
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6589
|
+
const value = this.hiddenInput;
|
|
6590
|
+
if (value !== null) {
|
|
6591
|
+
this._maskService.hiddenInput = value;
|
|
6592
|
+
}
|
|
6401
6593
|
}
|
|
6402
6594
|
if (showMaskTyped) {
|
|
6403
|
-
|
|
6595
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6596
|
+
const value = this.showMaskTyped;
|
|
6597
|
+
if (value !== null) {
|
|
6598
|
+
this._maskService.showMaskTyped = value;
|
|
6599
|
+
}
|
|
6404
6600
|
}
|
|
6405
6601
|
if (placeHolderCharacter) {
|
|
6406
6602
|
this._maskService.placeHolderCharacter = placeHolderCharacter.currentValue;
|
|
@@ -6409,28 +6605,56 @@ class MatchaMaskCompatibleDirective {
|
|
|
6409
6605
|
this._maskService.shownMaskExpression = shownMaskExpression.currentValue;
|
|
6410
6606
|
}
|
|
6411
6607
|
if (clearIfNotMatch) {
|
|
6412
|
-
|
|
6608
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6609
|
+
const value = this.clearIfNotMatch;
|
|
6610
|
+
if (value !== null) {
|
|
6611
|
+
this._maskService.clearIfNotMatch = value;
|
|
6612
|
+
}
|
|
6413
6613
|
}
|
|
6414
6614
|
if (validation) {
|
|
6415
|
-
|
|
6615
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6616
|
+
const value = this.validation;
|
|
6617
|
+
if (value !== null) {
|
|
6618
|
+
this._maskService.validation = value;
|
|
6619
|
+
}
|
|
6416
6620
|
}
|
|
6417
6621
|
if (separatorLimit) {
|
|
6418
6622
|
this._maskService.separatorLimit = separatorLimit.currentValue ?? '';
|
|
6419
6623
|
}
|
|
6420
6624
|
if (allowNegativeNumbers) {
|
|
6421
|
-
|
|
6625
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6626
|
+
const value = this.allowNegativeNumbers;
|
|
6627
|
+
if (value !== null) {
|
|
6628
|
+
this._maskService.allowNegativeNumbers = value;
|
|
6629
|
+
}
|
|
6422
6630
|
}
|
|
6423
6631
|
if (leadZeroDateTime) {
|
|
6424
|
-
|
|
6632
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6633
|
+
const value = this.leadZeroDateTime;
|
|
6634
|
+
if (value !== null) {
|
|
6635
|
+
this._maskService.leadZeroDateTime = value;
|
|
6636
|
+
}
|
|
6425
6637
|
}
|
|
6426
6638
|
if (leadZero) {
|
|
6427
|
-
|
|
6639
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6640
|
+
const value = this.leadZero;
|
|
6641
|
+
if (value !== null) {
|
|
6642
|
+
this._maskService.leadZero = value;
|
|
6643
|
+
}
|
|
6428
6644
|
}
|
|
6429
6645
|
if (triggerOnMaskChange) {
|
|
6430
|
-
|
|
6646
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6647
|
+
const value = this.triggerOnMaskChange;
|
|
6648
|
+
if (value !== null) {
|
|
6649
|
+
this._maskService.triggerOnMaskChange = value;
|
|
6650
|
+
}
|
|
6431
6651
|
}
|
|
6432
6652
|
if (apm) {
|
|
6433
|
-
|
|
6653
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6654
|
+
const value = this.apm;
|
|
6655
|
+
if (value !== null) {
|
|
6656
|
+
this._maskService.apm = value;
|
|
6657
|
+
}
|
|
6434
6658
|
}
|
|
6435
6659
|
if (inputTransformFn) {
|
|
6436
6660
|
this._maskService.inputTransformFn = inputTransformFn.currentValue;
|
|
@@ -6439,10 +6663,25 @@ class MatchaMaskCompatibleDirective {
|
|
|
6439
6663
|
this._maskService.outputTransformFn = outputTransformFn.currentValue;
|
|
6440
6664
|
}
|
|
6441
6665
|
if (keepCharacterPositions) {
|
|
6442
|
-
|
|
6666
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6667
|
+
const value = this.keepCharacterPositions;
|
|
6668
|
+
if (value !== null) {
|
|
6669
|
+
this._maskService.keepCharacterPositions = value;
|
|
6670
|
+
}
|
|
6443
6671
|
}
|
|
6444
6672
|
if (instantPrefix) {
|
|
6445
|
-
|
|
6673
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6674
|
+
const value = this.instantPrefix;
|
|
6675
|
+
if (value !== null) {
|
|
6676
|
+
this._maskService.instantPrefix = value;
|
|
6677
|
+
}
|
|
6678
|
+
}
|
|
6679
|
+
if (currencyMode) {
|
|
6680
|
+
// O setter já faz a conversão automática de string para boolean
|
|
6681
|
+
const value = this.currencyMode;
|
|
6682
|
+
if (value !== null) {
|
|
6683
|
+
this._maskService.currencyMode = value;
|
|
6684
|
+
}
|
|
6446
6685
|
}
|
|
6447
6686
|
}
|
|
6448
6687
|
onPaste() {
|
|
@@ -6456,21 +6695,26 @@ class MatchaMaskCompatibleDirective {
|
|
|
6456
6695
|
if (this._maskService.writingValue) {
|
|
6457
6696
|
return;
|
|
6458
6697
|
}
|
|
6459
|
-
|
|
6698
|
+
// Converter automaticamente número para string (retrocompatível)
|
|
6699
|
+
const stringValue = typeof value === 'number' ? value.toString() : (value || '');
|
|
6700
|
+
this._inputValue = stringValue;
|
|
6460
6701
|
// Aplicar máscara se definida
|
|
6461
6702
|
if (this._mask && this._mask.trim() !== '') {
|
|
6462
|
-
const maskedValue = this._maskService.applyMask(
|
|
6463
|
-
if (maskedValue !==
|
|
6703
|
+
const maskedValue = this._maskService.applyMask(stringValue, this._mask);
|
|
6704
|
+
if (maskedValue !== stringValue) {
|
|
6464
6705
|
this._maskService.writingValue = true;
|
|
6465
6706
|
this._maskService.onChange(maskedValue);
|
|
6466
|
-
|
|
6707
|
+
// Usar setTimeout para garantir que writingValue permaneça true durante o ciclo
|
|
6708
|
+
setTimeout(() => {
|
|
6709
|
+
this._maskService.writingValue = false;
|
|
6710
|
+
}, 0);
|
|
6467
6711
|
}
|
|
6468
6712
|
else {
|
|
6469
|
-
this._maskService.onChange(
|
|
6713
|
+
this._maskService.onChange(stringValue);
|
|
6470
6714
|
}
|
|
6471
6715
|
}
|
|
6472
6716
|
else {
|
|
6473
|
-
this._maskService.onChange(
|
|
6717
|
+
this._maskService.onChange(stringValue);
|
|
6474
6718
|
}
|
|
6475
6719
|
}
|
|
6476
6720
|
onInput(event) {
|
|
@@ -6511,17 +6755,65 @@ class MatchaMaskCompatibleDirective {
|
|
|
6511
6755
|
// Implementar lógica de teclado se necessário
|
|
6512
6756
|
}
|
|
6513
6757
|
writeValue(value) {
|
|
6758
|
+
// Se já estamos escrevendo, não processar novamente (prevenir loop infinito)
|
|
6759
|
+
if (this._maskService.writingValue) {
|
|
6760
|
+
return;
|
|
6761
|
+
}
|
|
6514
6762
|
this._maskService.writingValue = true;
|
|
6515
|
-
|
|
6763
|
+
// Converter automaticamente número para string (retrocompatível)
|
|
6764
|
+
// Isso previne o erro "indexOf is not a function" quando números são passados
|
|
6765
|
+
let inputValue;
|
|
6766
|
+
if (value === null || value === undefined) {
|
|
6767
|
+
inputValue = '';
|
|
6768
|
+
}
|
|
6769
|
+
else if (typeof value === 'number') {
|
|
6770
|
+
inputValue = value.toString();
|
|
6771
|
+
}
|
|
6772
|
+
else {
|
|
6773
|
+
inputValue = String(value);
|
|
6774
|
+
}
|
|
6775
|
+
// Se a máscara usa separator e o valor tem ponto decimal, converter para vírgula
|
|
6776
|
+
// Isso é útil quando valores numéricos vêm do backend (ex: 10.5 -> 10,50)
|
|
6777
|
+
if (this._mask && this._mask.trim().startsWith('separator.') && inputValue.includes('.')) {
|
|
6778
|
+
// Converter ponto para vírgula se o decimalMarker é vírgula
|
|
6779
|
+
const decimalMarker = this._maskService.decimalMarker;
|
|
6780
|
+
if (decimalMarker === ',' || (Array.isArray(decimalMarker) && decimalMarker.includes(','))) {
|
|
6781
|
+
inputValue = inputValue.replace('.', ',');
|
|
6782
|
+
}
|
|
6783
|
+
}
|
|
6784
|
+
this._inputValue = inputValue;
|
|
6516
6785
|
// Aplicar máscara se definida
|
|
6517
6786
|
if (this._mask && this._mask.trim() !== '') {
|
|
6518
|
-
const maskedValue = this._maskService.applyMask(
|
|
6519
|
-
|
|
6787
|
+
const maskedValue = this._maskService.applyMask(inputValue, this._mask);
|
|
6788
|
+
// Só atualizar se o valor mascarado for diferente do valor atual
|
|
6789
|
+
// Isso previne loops quando o valor já está correto
|
|
6790
|
+
const currentValue = this._maskService.currentValue || '';
|
|
6791
|
+
if (maskedValue !== currentValue) {
|
|
6792
|
+
// Usar setTimeout para garantir que writingValue permaneça true durante o ciclo
|
|
6793
|
+
// Isso previne que onModelChange processe durante writeValue
|
|
6794
|
+
setTimeout(() => {
|
|
6795
|
+
this._maskService.onChange(maskedValue);
|
|
6796
|
+
this._maskService.writingValue = false;
|
|
6797
|
+
}, 0);
|
|
6798
|
+
}
|
|
6799
|
+
else {
|
|
6800
|
+
// Se o valor já está correto, não precisa atualizar
|
|
6801
|
+
this._maskService.writingValue = false;
|
|
6802
|
+
}
|
|
6520
6803
|
}
|
|
6521
6804
|
else {
|
|
6522
|
-
|
|
6805
|
+
// Sem máscara, apenas atualizar o valor
|
|
6806
|
+
const currentValue = this._maskService.currentValue || '';
|
|
6807
|
+
if (inputValue !== currentValue) {
|
|
6808
|
+
setTimeout(() => {
|
|
6809
|
+
this._maskService.onChange(inputValue);
|
|
6810
|
+
this._maskService.writingValue = false;
|
|
6811
|
+
}, 0);
|
|
6812
|
+
}
|
|
6813
|
+
else {
|
|
6814
|
+
this._maskService.writingValue = false;
|
|
6815
|
+
}
|
|
6523
6816
|
}
|
|
6524
|
-
this._maskService.writingValue = false;
|
|
6525
6817
|
}
|
|
6526
6818
|
registerOnChange(fn) {
|
|
6527
6819
|
this.onChange = fn;
|
|
@@ -6538,7 +6830,7 @@ class MatchaMaskCompatibleDirective {
|
|
|
6538
6830
|
return null;
|
|
6539
6831
|
}
|
|
6540
6832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskCompatibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6541
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[matchaMask], textarea[matchaMask]", inputs: { mask: ["matchaMask", "mask"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-matcha-mask": "this.maskAttr", "attr.data-prefix": "this.prefixAttr", "attr.data-suffix": "this.suffixAttr" } }, providers: [
|
|
6833
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[matchaMask], textarea[matchaMask]", inputs: { mask: ["matchaMask", "mask"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix", currencyMode: "currencyMode" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-matcha-mask": "this.maskAttr", "attr.data-prefix": "this.prefixAttr", "attr.data-suffix": "this.suffixAttr" } }, providers: [
|
|
6542
6834
|
{
|
|
6543
6835
|
provide: NG_VALUE_ACCESSOR,
|
|
6544
6836
|
useExisting: forwardRef(() => MatchaMaskCompatibleDirective),
|
|
@@ -6630,6 +6922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
6630
6922
|
type: Input
|
|
6631
6923
|
}], instantPrefix: [{
|
|
6632
6924
|
type: Input
|
|
6925
|
+
}], currencyMode: [{
|
|
6926
|
+
type: Input
|
|
6633
6927
|
}], maskFilled: [{
|
|
6634
6928
|
type: Output
|
|
6635
6929
|
}], onPaste: [{
|
|
@@ -6854,7 +7148,7 @@ class MatchaInputPhoneComponent {
|
|
|
6854
7148
|
this.removeClickListener();
|
|
6855
7149
|
}
|
|
6856
7150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n <div class=\"d-flex-row flex-align-center\">\n <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n height=\"16\">\n </div>\n <span class=\"w-16 fs-16\"\n [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n </div>\n <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n [(ngModel)]=\"inputValueModel\"\n pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [matchaMask]=\"typeMask\">\n\n <ng-container *ngIf=\"isOpen\">\n <div class=\"position-absolute z-index-10\">\n <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n <label *ngFor=\"let country of allCountries; let i = index\"\n class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n (click)=\"selectCountry(country)\">\n <img alt=\"\" class=\"mr-8\"\n [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n {{country.name}}\n </label>\n </div>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[matchaMask], textarea[matchaMask]", inputs: ["matchaMask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["matchaMask"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
7151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n <div class=\"d-flex-row flex-align-center\">\n <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n height=\"16\">\n </div>\n <span class=\"w-16 fs-16\"\n [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n </div>\n <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n [(ngModel)]=\"inputValueModel\"\n pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [matchaMask]=\"typeMask\">\n\n <ng-container *ngIf=\"isOpen\">\n <div class=\"position-absolute z-index-10\">\n <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n <label *ngFor=\"let country of allCountries; let i = index\"\n class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n (click)=\"selectCountry(country)\">\n <img alt=\"\" class=\"mr-8\"\n [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n {{country.name}}\n </label>\n </div>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[matchaMask], textarea[matchaMask]", inputs: ["matchaMask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "currencyMode"], outputs: ["maskFilled"], exportAs: ["matchaMask"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
6858
7152
|
}
|
|
6859
7153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, decorators: [{
|
|
6860
7154
|
type: Component,
|