-
-
-
-
Usage
-
-
Source code
-
- }
-
+
+}
- @if (!ex._pipe) {
-
- } @else {
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (ex._validation) {
+
}
+
+
+
+
+
+
diff --git a/src/app/options/options.component.scss b/src/app/options/options.component.scss
index 2aeab01e..54a52a1e 100644
--- a/src/app/options/options.component.scss
+++ b/src/app/options/options.component.scss
@@ -1,45 +1,58 @@
@import '../../libraries/styles/border-mixin';
@import '../../libraries/styles/media-breakpoints';
-.content {
+:host {
gap: 16px;
padding: 16px;
border-top: 1px solid rgba(25, 25, 25, 0.05);
box-sizing: border-box;
+ background-color: var(--full-white);
+ display: flex;
+ flex-direction: column;
+
.yellow {
&.card {
background: rgba(255, 214, 77, 0.05);
border: 1px solid var(--yellow);
}
}
+
.card {
padding: 10px;
gap: 10px;
background: rgba(25, 25, 25, 0.02);
border-radius: 15px;
+
.mr-title {
margin: 10px 0 10px 26px;
}
+
.cards-block {
scroll-margin-top: 185px;
+
.light-card {
flex: 55%;
border-radius: 10px;
+
.light-title {
margin-bottom: 20px;
+
span {
margin-left: 10px;
font-size: 16px;
color: rgba(25, 25, 25, 0.25);
}
}
+
.source {
font-size: 10px;
color: rgba(25, 25, 25, 0.45);
margin-bottom: 10px;
}
+
.white-input {
display: block;
+
.input-view {
width: 100%;
height: fit-content;
@@ -50,16 +63,19 @@
overflow: hidden;
white-space: pre-line;
}
+
.input-img {
position: relative;
right: 20px;
}
}
}
+
.dark-card {
flex: 45%;
border-radius: 10px;
margin-left: 30px;
+
.dark-input {
.customDarkInput {
@include border-bottom-grey;
@@ -72,14 +88,17 @@
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
+
&:hover {
@include border-bottom-yellow;
background: var(--ligth-grey);
}
+
&[type='text']:focus {
@include border-bottom-yellow;
background: var(--ligth-grey);
}
+
&[type='number']:focus {
@include border-bottom-yellow;
background: var(--ligth-grey);
@@ -89,23 +108,25 @@
}
}
}
-}
-.pd-15 {
- padding: 15px;
-}
-.mrl-50 {
- margin-left: 50px;
-}
-@media screen and (max-width: $mobileWidth) {
- .content {
+ .pd-15 {
+ padding: 15px;
+ }
+
+ .mrl-50 {
+ margin-left: 50px;
+ }
+
+ @media screen and (max-width: $mobileWidth) {
.card {
.cards-block {
flex-direction: column;
+
.dark-card {
flex: 100%;
margin-left: 0;
}
+
.light-card {
flex: 100%;
margin-bottom: 10px;
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 27827dc0..efb90475 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -1,7 +1,7 @@
import { Component, effect, ElementRef, inject, input, viewChildren } from '@angular/core';
import { JsonPipe, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
+import { initialConfig, NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
import { HighlightModule } from 'ngx-highlightjs';
import { IComDoc, IMaskOptions, TExample } from '@open-source/accordion/content.interfaces';
import { AssetPipe } from '@libraries/asset/asset.pipe';
@@ -44,6 +44,9 @@ export class OptionsComponent {
public readonly phone = '123456789';
public readonly openSourceOptionsPath = OpenSourcePath.OPTIONS;
+ public readonly specialCharacters = initialConfig.specialCharacters;
+ public readonly outputTransformFn = initialConfig.outputTransformFn;
+ public readonly inputTransformFn = initialConfig.inputTransformFn;
private readonly scrollService = inject(ScrollService);
private readonly accordionService = inject(AccordionService);
diff --git a/src/app/shared/card-content/card-content.component.html b/src/app/shared/card-content/card-content.component.html
index 36affbb3..9f051f72 100644
--- a/src/app/shared/card-content/card-content.component.html
+++ b/src/app/shared/card-content/card-content.component.html
@@ -1,6 +1,4 @@
-
- {{ title() }}
- {{
- value()
- }}
-
+
{{ title() }}
+
{{
+ value()
+}}
diff --git a/src/app/shared/card-content/card-content.component.scss b/src/app/shared/card-content/card-content.component.scss
index 97b9e342..bffd69f1 100644
--- a/src/app/shared/card-content/card-content.component.scss
+++ b/src/app/shared/card-content/card-content.component.scss
@@ -1,4 +1,7 @@
-.card-text {
+:host {
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
.sub-text {
margin-bottom: 5px;
}
@@ -18,9 +21,3 @@
background: rgba(248, 248, 248, 0.05);
}
}
-.pd-15 {
- padding: 15px;
-}
-.mrl-50 {
- margin-left: 50px;
-}
diff --git a/src/assets/content/common-cases.ts b/src/assets/content/common-cases.ts
index 4da23af6..35944de0 100644
--- a/src/assets/content/common-cases.ts
+++ b/src/assets/content/common-cases.ts
@@ -20,21 +20,21 @@ export const ComDocs: IComDoc[] = [
header: 'Valid 24 hour format',
text: '',
code: `
`,
- id: 4,
+ id: 3,
anchor: 'valid24',
},
{
header: 'Mixed types',
text: '',
code: `
`,
- id: 5,
+ id: 4,
anchor: 'mixed',
},
{
header: 'Valid date start with years',
text: '',
code: `
`,
- id: 9,
+ id: 5,
anchor: 'startWithYears',
},
{
@@ -46,56 +46,56 @@ export const ComDocs: IComDoc[] = [
shownMaskExpression="'(___) ___-____ ext. ______'"
mask="(000) 000-0000 ext. 000000"
>`,
- id: 7,
+ id: 6,
anchor: 'mask-specialCharacters',
},
{
header: 'Optional mask',
text: '',
code: `
`,
- id: 12,
+ id: 7,
anchor: 'optional-mask',
},
{
header: 'Email mask with validation',
text: '',
code: `
`,
- id: 13,
+ id: 8,
anchor: 'email-mask',
},
{
header: 'Allow negative numbers to mask',
text: 'You can allow negative numbers',
code: `
`,
- id: 11,
+ id: 9,
anchor: 'allowMask',
},
{
header: 'Allow negative numbers to separator',
text: 'You can allow negative numbers to',
code: `
`,
- id: 11,
+ id: 9,
anchor: 'allowSeparator',
},
{
header: 'Allow negative numbers to percent',
text: 'You can allow negative numbers',
code: `
`,
- id: 11,
+ id: 9,
anchor: 'allowPercent',
},
{
header: 'Allow few mask in one expression',
text: '',
code: `
`,
- id: 8,
+ id: 10,
anchor: 'allow-few-mask',
},
{
header: 'Allow few mask in one expression number or letter',
text: '',
code: `
`,
- id: 8,
+ id: 10,
anchor: 'allow-few-mask',
},
];
@@ -147,21 +147,18 @@ export const ComExamples: TExample
[] = [
{
_placeholder: 'allowNegativeNumbers mask',
_allowNegativeNumbers: true,
- _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
_mask: '0000',
control: { form: new UntypedFormControl(''), model: '' },
},
{
_placeholder: 'allowNegativeNumbers separator',
_allowNegativeNumbers: true,
- _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
_decimalMarker: '.',
_mask: 'separator',
control: { form: new UntypedFormControl(''), model: '' },
},
{
_placeholder: 'allowNegativeNumbers percent',
- _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
_decimalMarker: '.',
_allowNegativeNumbers: true,
_mask: 'percent.2',
diff --git a/src/assets/content/lists.ts b/src/assets/content/lists.ts
index 5e05c8a7..ebd643f6 100644
--- a/src/assets/content/lists.ts
+++ b/src/assets/content/lists.ts
@@ -21,42 +21,42 @@ export const lists: IListItem[] = [
},
{
content: 'Valid 24 hour format',
- id: 4,
+ id: 3,
scrollTo: 'valid24',
},
{
content: 'Mixed types',
- id: 5,
+ id: 4,
scrollTo: 'mixed',
},
{
content: 'Valid date start with years',
- id: 9,
+ id: 5,
scrollTo: 'startWithYears',
},
{
content: 'SpecialCharacters Mask',
- id: 7,
+ id: 6,
scrollTo: 'mask-specialCharacters',
},
{
content: 'Optional mask',
- id: 12,
+ id: 7,
scrollTo: 'optional-mask',
},
{
content: 'Validation email mask',
- id: 13,
+ id: 8,
scrollTo: 'email-mask',
},
{
content: 'allowNegativeNumber',
- id: 11,
+ id: 9,
scrollTo: 'allowMask',
},
{
content: 'Allow few mask in one expression',
- id: 8,
+ id: 10,
scrollTo: 'allow-few-mask',
},
],
@@ -151,19 +151,24 @@ export const lists: IListItem[] = [
},
{
content: 'Separator leadZero',
- id: 4,
+ id: 2,
scrollTo: 'lead-zero',
},
{
content: 'Dot separator',
- id: 2,
+ id: 3,
scrollTo: 'Dsep',
},
{
content: 'Comma separator',
- id: 3,
+ id: 4,
scrollTo: 'comma_sep',
},
+ {
+ content: 'Zero separator',
+ id: 5,
+ scrollTo: 'sep0',
+ },
],
},
{
diff --git a/src/assets/content/optional.ts b/src/assets/content/optional.ts
index fac64adc..529fcc46 100644
--- a/src/assets/content/optional.ts
+++ b/src/assets/content/optional.ts
@@ -55,28 +55,28 @@ export const OptDocs: IComDoc[] = [
header: 'Keep Character Positions',
text: 'You can validate your formControl, default value is true',
code: ` `,
- id: 8,
+ id: 7,
anchor: 'keep000',
},
{
header: 'Keep Character Positions',
text: 'You can validate your formControl, default value is true',
code: ` `,
- id: 8,
+ id: 7,
anchor: 'keep000',
},
{
header: 'Keep Character Positions',
text: 'You can validate your formControl, default value is true',
code: ` `,
- id: 8,
+ id: 7,
anchor: 'keep000',
},
{
header: 'Keep Character Positions',
text: 'You can validate your formControl, default value is true',
code: ` `,
- id: 8,
+ id: 7,
anchor: 'keep000',
},
];
@@ -97,7 +97,6 @@ export const OptExamples: TExample[] = [
{
_placeholder: 'dropSpecialCharacters',
_dropSpecialCharacters: false,
- _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
_mask: '000-000.00',
control: { form: new UntypedFormControl(''), model: '' },
},
@@ -121,28 +120,24 @@ export const OptExamples: TExample[] = [
control: { form: new UntypedFormControl(''), model: '' },
},
{
- _placeholder: '000-000-000',
_showMaskTyped: true,
_keepCharacterPositions: true,
_mask: '000-000-000',
control: { form: new UntypedFormControl(''), model: '' },
},
{
- _placeholder: '00/00/0000',
_showMaskTyped: true,
_keepCharacterPositions: true,
_mask: '00/00/0000',
control: { form: new UntypedFormControl(''), model: '' },
},
{
- _placeholder: '0000 0000 0000 0000',
_showMaskTyped: true,
_keepCharacterPositions: true,
_mask: '0000 0000 0000 0000',
control: { form: new UntypedFormControl(''), model: '' },
},
{
- _placeholder: '0 000',
_showMaskTyped: true,
_keepCharacterPositions: true,
_suffix: '$',
@@ -150,7 +145,6 @@ export const OptExamples: TExample[] = [
control: { form: new UntypedFormControl(''), model: '' },
},
{
- _placeholder: '0000.00',
_showMaskTyped: true,
_keepCharacterPositions: true,
_prefix: '$',
diff --git a/src/assets/content/separators.ts b/src/assets/content/separators.ts
index c707c6cc..1ce75f60 100644
--- a/src/assets/content/separators.ts
+++ b/src/assets/content/separators.ts
@@ -13,46 +13,29 @@ export const SepDocs: IComDoc[] = [
header: 'Lead zero at model',
text: 'You can divide your input by thousands',
code: ``,
- id: 4,
+ id: 2,
anchor: 'lead-zero',
},
{
header: 'Dot separator',
text: 'For separate input with dots',
- code: ``,
- id: 2,
+ code: ``,
+ id: 3,
anchor: 'Dsep',
},
- {
- header: 'Dot separator',
- text: `For limiting decimal precision add ',' and the precision you want to limit too on the input. 2 is useful for currency. 0 will prevent decimals completely.`,
- code: ``,
- id: 2,
- },
- {
- header: 'Dot separator',
- text: 'without decimal part',
- code: ``,
- id: 2,
- },
{
header: 'Comma separator',
text: `For separate input with commas`,
- code: ``,
- id: 3,
+ code: ``,
+ id: 4,
anchor: 'comma_sep',
},
{
- header: 'Comma separator',
- text: `For limiting decimal precision add '.' and the precision you want to limit too on the input. 2 is useful for currency. 0 will prevent decimals completely.`,
- code: ``,
- id: 3,
- },
- {
- header: 'Comma separator',
- text: 'without decimal part',
- code: ``,
- id: 3,
+ header: 'Zero separator',
+ text: 'You can divide your input by thousands',
+ code: ``,
+ id: 5,
+ anchor: 'sep0',
},
];
@@ -68,32 +51,10 @@ export const SepExamples: TExample[] = [
_mask: 'separator.2',
control: { form: new UntypedFormControl(''), model: '' },
},
- {
- _placeholder: 'separator',
- _mask: 'separator',
- _thousandSeparator: '.',
- _decimalMarker: ',',
- control: { form: new UntypedFormControl(''), model: '' },
- },
{
_placeholder: 'separator.2',
_mask: 'separator.2',
_thousandSeparator: '.',
- _decimalMarker: ',',
- control: { form: new UntypedFormControl(''), model: '' },
- },
- {
- _placeholder: 'separator.0',
- _mask: 'separator.0',
- _thousandSeparator: '.',
- _decimalMarker: ',',
- control: { form: new UntypedFormControl(''), model: '' },
- },
- {
- _placeholder: 'separator',
- _mask: 'separator',
- _thousandSeparator: ',',
- _decimalMarker: '.',
control: { form: new UntypedFormControl(''), model: '' },
},
{
@@ -106,8 +67,6 @@ export const SepExamples: TExample[] = [
{
_placeholder: 'separator.0',
_mask: 'separator.0',
- _thousandSeparator: ',',
- _decimalMarker: '.',
control: { form: new UntypedFormControl(''), model: '' },
},
];
diff --git a/src/libraries b/src/libraries
index 164bd498..1092682f 160000
--- a/src/libraries
+++ b/src/libraries
@@ -1 +1 @@
-Subproject commit 164bd49818696a208d305598ab69f6a1f7f5e54c
+Subproject commit 1092682f6ef7550040231e3c9460bdf48277b84b
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 68e9552e..d6e66825 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,8 +1,8 @@
{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/app"
- },
- "files": ["src/main.ts"],
- "include": ["src/**/*.d.ts"]
-}
\ No newline at end of file
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/app"
+ },
+ "files": ["src/main.ts"],
+ "include": ["src/**/*.d.ts"]
+}