@starley/ion-directives 1.2.32 → 1.2.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,29 +1,25 @@
|
|
|
1
|
-
|
|
2
1
|
# Ion-directives
|
|
3
2
|
|
|
4
3
|
São directivas para uso em ionic, para mascramento de inputs, pressHold, tap, doubleTap, connector sqlite pwa, gerenciamento de datas e remover algo do input!
|
|
5
4
|
|
|
6
5
|
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
7
|
## Authors
|
|
11
8
|
|
|
12
9
|
- [@starleydev](https://www.github.com/starleyDev)
|
|
13
10
|
|
|
14
|
-
|
|
15
11
|
## Installation
|
|
16
12
|
|
|
17
|
-
|
|
18
13
|
```bash
|
|
19
14
|
npm i @starley/ion-directives
|
|
20
15
|
```
|
|
21
|
-
|
|
16
|
+
|
|
22
17
|
## Usage/Examples
|
|
23
18
|
|
|
24
|
-
Importe dentro do modulo que ira utilizar
|
|
19
|
+
Importe dentro do modulo que ira utilizar
|
|
25
20
|
|
|
26
21
|
my-component.module.ts
|
|
22
|
+
|
|
27
23
|
```typescript
|
|
28
24
|
import { DirectivesModule } from '@starley/ion-directives';
|
|
29
25
|
|
|
@@ -44,14 +40,22 @@ export class MyComponent {}
|
|
|
44
40
|
Adicione dentro do input a chamada passando após o simbolo de '=' a formatação desejada!
|
|
45
41
|
|
|
46
42
|
my-component.html
|
|
43
|
+
|
|
47
44
|
```html
|
|
48
45
|
<ion-content>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
...
|
|
47
|
+
<ion-item>
|
|
48
|
+
<ion-label>CPF</ion-label>
|
|
49
|
+
<ion-input
|
|
50
|
+
class="ion-text-right"
|
|
51
|
+
[(ngModel)]="cpf"
|
|
52
|
+
maxlength="14"
|
|
53
|
+
type="number"
|
|
54
|
+
placeholder="000.000.000-00"
|
|
55
|
+
appMask="***.***.***-**"
|
|
56
|
+
></ion-input>
|
|
57
|
+
</ion-item>
|
|
58
|
+
...
|
|
55
59
|
</ion-content>
|
|
56
60
|
```
|
|
57
61
|
|
|
@@ -61,11 +65,12 @@ Resultado --> 123.456.789-00
|
|
|
61
65
|
|
|
62
66
|
O tempo minimo e de 450 milisegundos!
|
|
63
67
|
|
|
64
|
-
Caso queria alterar o tempo minimo basta adicionar o tempo desejado
|
|
68
|
+
Caso queria alterar o tempo minimo basta adicionar o tempo desejado
|
|
65
69
|
|
|
66
70
|
Adicione a chamada de 'appPressHold' juntamente com o '(press)' pois ele será o responsavel pela ação!
|
|
67
71
|
|
|
68
72
|
my-component.html
|
|
73
|
+
|
|
69
74
|
```html
|
|
70
75
|
<ion-content>
|
|
71
76
|
...
|
|
@@ -86,22 +91,23 @@ my-component.html
|
|
|
86
91
|
|
|
87
92
|
Adicione dentro de um elemento qualquer! Ao adicionar você tera duas opções!
|
|
88
93
|
|
|
89
|
-
|
|
94
|
+
_O (tap) tera ação de intervalo de 250 milisegundos_
|
|
90
95
|
|
|
91
|
-
|
|
96
|
+
_O (doubleTap) terá ação de intervalo de 300 milisegundos_
|
|
92
97
|
|
|
93
98
|
my-component.html
|
|
99
|
+
|
|
94
100
|
```html
|
|
95
101
|
<ion-content>
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
...
|
|
103
|
+
<ion-content>
|
|
98
104
|
...
|
|
99
105
|
<ion-item appTap (tap)="doSomething()" (doubleTap)="doSomething()">
|
|
100
106
|
<ion-label>tap</ion-label>
|
|
101
107
|
</ion-item>
|
|
102
108
|
...
|
|
103
|
-
</ion-content>
|
|
104
|
-
|
|
109
|
+
</ion-content>
|
|
110
|
+
...
|
|
105
111
|
</ion-content>
|
|
106
112
|
```
|
|
107
113
|
|
|
@@ -109,22 +115,23 @@ my-component.html
|
|
|
109
115
|
|
|
110
116
|
Adicione dentro de um elemento qualquer! Ao adicionar você tera duas opções!
|
|
111
117
|
|
|
112
|
-
|
|
118
|
+
_O (tap) tera ação de intervalo de 250 milisegundos_
|
|
113
119
|
|
|
114
|
-
|
|
120
|
+
_O (doubleTap) terá ação de intervalo de 300 milisegundos_
|
|
115
121
|
|
|
116
122
|
my-component.html
|
|
123
|
+
|
|
117
124
|
```html
|
|
118
125
|
<ion-content>
|
|
119
|
-
|
|
120
|
-
|
|
126
|
+
...
|
|
127
|
+
<ion-content>
|
|
121
128
|
...
|
|
122
129
|
<ion-item appTap (tap)="doSomething()" (doubleTap)="doSomething()">
|
|
123
130
|
<ion-label>tap</ion-label>
|
|
124
131
|
</ion-item>
|
|
125
132
|
...
|
|
126
|
-
</ion-content>
|
|
127
|
-
|
|
133
|
+
</ion-content>
|
|
134
|
+
...
|
|
128
135
|
</ion-content>
|
|
129
136
|
```
|
|
130
137
|
|
|
@@ -132,28 +139,26 @@ my-component.html
|
|
|
132
139
|
|
|
133
140
|
Agora você poderá remover letras, numeros, caracteres especiais ou um texto qualquer de um input!
|
|
134
141
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
142
|
+
- -> "letter" : Remove qualquer caracteres que sejam do alfabeto;
|
|
143
|
+
- -> "number" Remove tudo que for digito;
|
|
144
|
+
- -> "special" : Remove tudo que for caractreres especiais;
|
|
145
|
+
- -> "punctuation" : Remove tudo que for pontuação (.,!?'"():;\_-)
|
|
146
|
+
- Caso queria remover uma determinada sequencia basta colocar o texto que quiser que ele ira remover o que foi definido!
|
|
140
147
|
|
|
141
148
|
my-component.html
|
|
149
|
+
|
|
142
150
|
```html
|
|
143
151
|
<ion-content>
|
|
152
|
+
...
|
|
153
|
+
<ion-content>
|
|
144
154
|
...
|
|
145
|
-
|
|
146
|
-
...
|
|
147
|
-
<ion-input appRemoveFromInput="abc">
|
|
148
|
-
</ion-input>
|
|
149
|
-
...
|
|
150
|
-
</ion-content>
|
|
155
|
+
<ion-input appRemoveFromInput="letter"> </ion-input>
|
|
151
156
|
...
|
|
157
|
+
</ion-content>
|
|
158
|
+
...
|
|
152
159
|
</ion-content>
|
|
153
160
|
```
|
|
154
161
|
|
|
155
162
|
## License
|
|
156
163
|
|
|
157
|
-
|
|
158
164
|
[](https://choosealicense.com/licenses/mit/)
|
|
159
|
-
|
|
@@ -15,10 +15,18 @@ export declare class IonInputRemoveDirective {
|
|
|
15
15
|
constructor(model: NgModel, pattern?: any);
|
|
16
16
|
/**
|
|
17
17
|
* Determines whether key down on
|
|
18
|
+
* @author Starley Cazorla
|
|
18
19
|
* @param event
|
|
19
20
|
* @returns
|
|
20
21
|
*/
|
|
21
22
|
onKeyDown(event: any): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Gets pattern to remove or set the text to remove
|
|
25
|
+
* @author Starley Cazorla
|
|
26
|
+
* @param typePatter - abc - number - special - punctuation
|
|
27
|
+
* @returns
|
|
28
|
+
*/
|
|
29
|
+
getPattern(typePatter: string): string | RegExp;
|
|
22
30
|
static ɵfac: i0.ɵɵFactoryDeclaration<IonInputRemoveDirective, [null, { attribute: "appRemoveFromInput"; }]>;
|
|
23
31
|
static ɵdir: i0.ɵɵDirectiveDeclaration<IonInputRemoveDirective, "[appRemoveFromInput]", never, {}, {}, never, never, false, never>;
|
|
24
32
|
}
|
|
@@ -20,27 +20,14 @@ export var IonInputRemoveDirective = /** @class */ (function () {
|
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* Determines whether key down on
|
|
23
|
+
* @author Starley Cazorla
|
|
23
24
|
* @param event
|
|
24
25
|
* @returns
|
|
25
26
|
*/
|
|
26
27
|
IonInputRemoveDirective.prototype.onKeyDown = function (event) {
|
|
27
|
-
var value = event.target.value;
|
|
28
|
-
var pattern = this.pattern;
|
|
28
|
+
var value = event.target.value, pattern = this.pattern;
|
|
29
29
|
if (pattern !== null) {
|
|
30
|
-
|
|
31
|
-
if (pattern === 'abc') {
|
|
32
|
-
// Se for "abc", não remova a pontuação
|
|
33
|
-
// Use uma expressão regular que remova apenas números e caracteres especiais
|
|
34
|
-
value = value.replace(/[0-9]|([\u0300-\u036f]|[^0-9a-zA-Z\s])/g, '');
|
|
35
|
-
}
|
|
36
|
-
else if (pattern === 'number') {
|
|
37
|
-
// Se for "number", remova todos os caracteres não numéricos
|
|
38
|
-
value = value.replace(/[^0-9]/g, '');
|
|
39
|
-
}
|
|
40
|
-
else if (pattern === 'special') {
|
|
41
|
-
// Se for "special", remova apenas caracteres especiais e acentos
|
|
42
|
-
value = value.replace(/([\u0300-\u036f]|[^0-9a-zA-Z\s])/g, '');
|
|
43
|
-
}
|
|
30
|
+
value = value.normalize('NFD').replace(this.getPattern(pattern), '');
|
|
44
31
|
}
|
|
45
32
|
event.target.value = value;
|
|
46
33
|
if (this.model) {
|
|
@@ -48,6 +35,23 @@ export var IonInputRemoveDirective = /** @class */ (function () {
|
|
|
48
35
|
}
|
|
49
36
|
return true;
|
|
50
37
|
};
|
|
38
|
+
/**
|
|
39
|
+
* Gets pattern to remove or set the text to remove
|
|
40
|
+
* @author Starley Cazorla
|
|
41
|
+
* @param typePatter - abc - number - special - punctuation
|
|
42
|
+
* @returns
|
|
43
|
+
*/
|
|
44
|
+
IonInputRemoveDirective.prototype.getPattern = function (typePatter) {
|
|
45
|
+
if (typePatter === 'letter')
|
|
46
|
+
return /[a-zA-Z]+/g;
|
|
47
|
+
if (typePatter === 'number')
|
|
48
|
+
return /[0-9]/;
|
|
49
|
+
if (typePatter === 'special')
|
|
50
|
+
return /[^a-zA-Z0-9\s.,!?'"():;]/g;
|
|
51
|
+
if (typePatter === 'punctuation')
|
|
52
|
+
return /[.,!?'"():;_-]/g;
|
|
53
|
+
return typePatter;
|
|
54
|
+
};
|
|
51
55
|
IonInputRemoveDirective.ɵfac = function IonInputRemoveDirective_Factory(t) { return new (t || IonInputRemoveDirective)(i0.ɵɵdirectiveInject(i1.NgModel), i0.ɵɵinjectAttribute('appRemoveFromInput')); };
|
|
52
56
|
IonInputRemoveDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: IonInputRemoveDirective, selectors: [["", "appRemoveFromInput", ""]], hostBindings: function IonInputRemoveDirective_HostBindings(rf, ctx) { if (rf & 1) {
|
|
53
57
|
i0.ɵɵlistener("keydown", function IonInputRemoveDirective_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-remove.directive.js","sourceRoot":"","sources":["../../src/input-remove/input-remove.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;;;AAEzC;;;GAGG;AAEH;
|
|
1
|
+
{"version":3,"file":"input-remove.directive.js","sourceRoot":"","sources":["../../src/input-remove/input-remove.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;;;AAEzC;;;GAGG;AAEH;IAWI;;;;OAIG;IACH,iCAAmB,KAAc,EACI,OAAmB;QAApD,wBAAA,EAAA,cAAoD;QADrC,UAAK,GAAL,KAAK,CAAS;QAPjC,YAAO,GAAQ,IAAI,CAAC;QAShB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACH,2CAAS,GAAT,UAAU,KAAU;QAChB,IAAI,KAAK,GAAQ,KAAK,CAAC,MAAM,CAAC,KAAK,EAC/B,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE3B,IAAI,OAAO,KAAK,IAAI,EAAE;YAClB,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;SACxE;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;OAKG;IACH,4CAAU,GAAV,UAAW,UAAkB;QACzB,IAAI,UAAU,KAAK,QAAQ;YAAE,OAAO,YAAY,CAAC;QACjD,IAAI,UAAU,KAAK,QAAQ;YAAE,OAAO,OAAO,CAAC;QAC5C,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO,2BAA2B,CAAC;QACjE,IAAI,UAAU,KAAK,aAAa;YAAE,OAAO,iBAAiB,CAAC;QAC3D,OAAO,UAAU,CAAC;IACtB,CAAC;kGA/CQ,uBAAuB,yDAUjB,oBAAoB;8EAV1B,uBAAuB;kHAAvB,qBAAiB;8CAFf,CAAC,OAAO,CAAC;kCAbxB;CAgEC,AAxDD,IAwDC;uFAjDY,uBAAuB;cAPnC,SAAS;eAAC;gBACP,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACF,WAAW,EAAE,mBAAmB;iBACnC;gBACD,SAAS,EAAE,CAAC,OAAO,CAAC;aACvB;;sBAWQ,SAAS;uBAAC,oBAAoB","sourcesContent":["import { Attribute, Directive } from '@angular/core';\nimport { NgModel } from \"@angular/forms\";\n\n/**\n * Remove any text from input\n * @author Starley Cazorla\n */\n\n@Directive({\n selector: '[appRemoveFromInput]',\n host: {\n '(keydown)': 'onKeyDown($event)'\n },\n providers: [NgModel]\n})\nexport class IonInputRemoveDirective {\n\n pattern: any = null;\n\n /**\n * Construtor\n * @param {NgModel} model\n * @param {string} pattern\n */\n constructor(public model: NgModel,\n @Attribute('appRemoveFromInput') pattern: any = null) {\n this.pattern = pattern;\n }\n\n /**\n * Determines whether key down on\n * @author Starley Cazorla\n * @param event\n * @returns\n */\n onKeyDown(event: any) {\n let value: any = event.target.value,\n pattern = this.pattern;\n\n if (pattern !== null) {\n value = value.normalize('NFD').replace(this.getPattern(pattern), '');\n }\n\n event.target.value = value;\n if (this.model) {\n this.model.update.emit(value);\n }\n return true;\n }\n\n /**\n * Gets pattern to remove or set the text to remove\n * @author Starley Cazorla\n * @param typePatter - abc - number - special - punctuation\n * @returns\n */\n getPattern(typePatter: string) {\n if (typePatter === 'letter') return /[a-zA-Z]+/g;\n if (typePatter === 'number') return /[0-9]/;\n if (typePatter === 'special') return /[^a-zA-Z0-9\\s.,!?'\"():;]/g;\n if (typePatter === 'punctuation') return /[.,!?'\"():;_-]/g;\n return typePatter;\n }\n\n}\n"]}
|