diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 51915647..351c327a 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,9 +2,9 @@ Please check if your PR fulfills the following requirements: -- [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-mask/blob/develop/CONTRIBUTING.md#commit -- [ ] Tests for the changes have been added (for bug fixes / features) -- [ ] Docs have been added / updated (for bug fixes / features) +- [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-mask/blob/develop/CONTRIBUTING.md#commit +- [ ] Tests for the changes have been added (for bug fixes / features) +- [ ] Docs have been added / updated (for bug fixes / features) ## PR Type @@ -12,14 +12,14 @@ What kind of change does this PR introduce? -- [ ] Bugfix -- [ ] Feature -- [ ] Code style update (formatting, local variables) -- [ ] Refactoring (no functional changes, no api changes) -- [ ] Build related changes -- [ ] CI related changes -- [ ] Documentation content changes -- [ ] Other... Please describe: +- [ ] Bugfix +- [ ] Feature +- [ ] Code style update (formatting, local variables) +- [ ] Refactoring (no functional changes, no api changes) +- [ ] Build related changes +- [ ] CI related changes +- [ ] Documentation content changes +- [ ] Other... Please describe: ## What is the current behavior? @@ -31,8 +31,8 @@ Issue Number: N/A ## Does this PR introduce a breaking change? -- [ ] Yes -- [ ] No +- [ ] Yes +- [ ] No diff --git a/.lintstagedrc b/.lintstagedrc index ecfb0fd6..118fbe6c 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,7 +1,7 @@ { "*.{ts,js,json}": [ "eslint --report-unused-disable-directives --max-warnings 0 --fix", - "prettier --write" + "prettier . --write" ], "*.scss": "stylelint --fix" } diff --git a/.markdownlint.json b/.markdownlint.json index 19580391..bec5a76a 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -1,8 +1,8 @@ { - "default": true, - "MD013": false, - "MD033": false, - "MD041": false, - "MD014": false, - "MD024": false + "default": true, + "MD013": false, + "MD033": false, + "MD041": false, + "MD014": false, + "MD024": false } diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs index 0e5c8c44..3d7c47b4 100644 --- a/.puppeteerrc.cjs +++ b/.puppeteerrc.cjs @@ -1,4 +1,4 @@ -const {join} = require('path'); +const { join } = require('path'); /** * @type {import("puppeteer").Configuration} diff --git a/.releaserc.yaml b/.releaserc.yaml index f46f35db..be4ca6c9 100644 --- a/.releaserc.yaml +++ b/.releaserc.yaml @@ -1,7 +1,7 @@ branches: - - develop + - develop plugins: - - '@semantic-release/commit-analyzer' - - '@semantic-release/github' - - 'semantic-release-export-data' \ No newline at end of file + - '@semantic-release/commit-analyzer' + - '@semantic-release/github' + - 'semantic-release-export-data' diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 04c013de..00000000 --- a/.travis.yml +++ /dev/null @@ -1,24 +0,0 @@ -sudo: false -language: node_js -node_js: - - '18' - -cache: - directories: - - node_modules - -addons: - chrome: stable - -notifications: - email: false - -git: - depth: 3 - -before_install: - - npm install -g npm@^8.19.2 - -script: - - export CHROME_BIN=chromium-browser - - npm run ci diff --git a/CHANGELOG.md b/CHANGELOG.md index dbceda1c..55662a37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,14 +46,12 @@ - Fix ([#1378](https://github.com/JsDaddy/ngx-mask/issues/1378)) - Fix ([#1390](https://github.com/JsDaddy/ngx-mask/issues/1390)) - # 17.1.1(2024-07-05) ### Fix - Fix ([#1383](https://github.com/JsDaddy/ngx-mask/issues/1383)) - # 17.1.0(2024-07-05) ### Fix @@ -62,8 +60,6 @@ - Fix ([#1344](https://github.com/JsDaddy/ngx-mask/issues/1344)) - Fix ([#1365](https://github.com/JsDaddy/ngx-mask/issues/1365)) - - # 17.0.9(2024-07-02) ### Fix @@ -74,8 +70,6 @@ - Fix ([#1378](https://github.com/JsDaddy/ngx-mask/issues/1378)) - Fix ([#1377](https://github.com/JsDaddy/ngx-mask/issues/1377)) - - # 17.0.8(2024-04-30) ### Fix @@ -87,8 +81,8 @@ ### Fix - Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298)) -- Fix ([#1307](https://github.com/JsDaddy/ngx-mask/issues/1307)) -- Fix ([#1306](https://github.com/JsDaddy/ngx-mask/issues/1306)) +- Fix ([#1307](https://github.com/JsDaddy/ngx-mask/issues/1307)) +- Fix ([#1306](https://github.com/JsDaddy/ngx-mask/issues/1306)) # 17.0.6(2024-03-27) @@ -110,27 +104,26 @@ - Fix ([#1308](https://github.com/JsDaddy/ngx-mask/issues/1308)) - Fix ([#1299](https://github.com/JsDaddy/ngx-mask/issues/1299)) - # 17.0.4(2023-12-01) ### Feat -- update v16.4.2 -- update v15.2.3 -- update v14.3.3 -- update v13.2.2 +- update v16.4.2 +- update v15.2.3 +- update v14.3.3 +- update v13.2.2 # 17.0.3(2023-11-30) ### Feat -- update dependencies +- update dependencies # 17.0.2(2023-11-29) ### Feat -- update dependencies +- update dependencies # 17.0.2(2023-11-29) @@ -158,10 +151,11 @@ ### Feature - update ng 17.x -- +- + ### Feature 16.4.2 -- Upgrade version 16.4.2 with more fixes since version 17.x.x +- Upgrade version 16.4.2 with more fixes since version 17.x.x # 16.4.1(2023-11-08) @@ -194,7 +188,6 @@ - Change README.md - Fix ([#1242](https://github.com/JsDaddy/ngx-mask/issues/1242)) - # 16.3.7(2023-09-18) ### Fix @@ -207,7 +200,6 @@ - Fix ([#1232](https://github.com/JsDaddy/ngx-mask/issues/1232)) - # 16.3.5(2023-09-14) ### Fix @@ -232,8 +224,6 @@ - Fix ([#658](https://github.com/JsDaddy/ngx-mask/issues/658)) - - # 16.3.1(2023-09-01) ### Fix @@ -255,7 +245,6 @@ - Fix ([#1206](https://github.com/JsDaddy/ngx-mask/issues/1206)) - Fix ([#1211](https://github.com/JsDaddy/ngx-mask/issues/1211)) - # 16.2.9(2023-08-08) ### Fix @@ -264,7 +253,7 @@ - Fix ([#890](https://github.com/JsDaddy/ngx-mask/issues/890)) - Fix ([#841](https://github.com/JsDaddy/ngx-mask/issues/841)) - Fix ([#1162](https://github.com/JsDaddy/ngx-mask/issues/1162)) - + # 16.2.7(2023-08-08) ### Fix @@ -480,11 +469,11 @@ ### Feature 15.2.3 -- Upgrade version 15.2.3 with more fixes since version 17.x.x +- Upgrade version 15.2.3 with more fixes since version 17.x.x ### Feature 15.2.1 -- Upgrade version 15.2.1 with more fixes since version 16.x.x +- Upgrade version 15.2.1 with more fixes since version 16.x.x # 15.1.5(2023-05-12) @@ -573,16 +562,15 @@ ### Feature 14.3.3 -- Upgrade version 15.2.2 with more fixes since version 17.x.x - +- Upgrade version 15.2.2 with more fixes since version 17.x.x ### Feature 14.3.2 -- Upgrade version 14.3.2 with more fixes since version 16.x.x -- Change MaskPipe => NgxMaskPipe -- Change MaskService => NgxMaskService -- Change MaskApplierService => NgxMaskApplierService -- Change MaskDirective => NgxMaskMaskDirective +- Upgrade version 14.3.2 with more fixes since version 16.x.x +- Change MaskPipe => NgxMaskPipe +- Change MaskService => NgxMaskService +- Change MaskApplierService => NgxMaskApplierService +- Change MaskDirective => NgxMaskMaskDirective # 14.2.4(2022-10-27) @@ -657,16 +645,15 @@ ### Feature 13.3.2 -- Upgrade version 13.2.2 with more fixes since version 17.x.x - +- Upgrade version 13.2.2 with more fixes since version 17.x.x ### Feature 13.2.1 -- Upgrade version 13.2.1 with more fixes since version 16.x.x -- Change MaskPipe => NgxMaskPipe -- Change MaskService => NgxMaskService -- Change MaskApplierService => NgxMaskApplierService -- Change MaskDirective => NgxMaskMaskDirective +- Upgrade version 13.2.1 with more fixes since version 16.x.x +- Change MaskPipe => NgxMaskPipe +- Change MaskService => NgxMaskService +- Change MaskApplierService => NgxMaskApplierService +- Change MaskDirective => NgxMaskMaskDirective diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 18c91471..0bdf1c94 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,24 +17,24 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, - and learning from the experience -* Focusing on what is best not just for us as individuals, but for the - overall community +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +- Focusing on what is best not just for us as individuals, but for the + overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or - advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email - address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery, and sexual attention or + advances of any kind +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email + address, without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 120ff15b..21e9ff38 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,16 +8,16 @@ Please format code and markup in your issue using [github markdown](https://help ## Contributing to Source Code (Pull Requests) -- If your PR changes any behavior or fixes an issue, it should have an associated test. -- New features should be general and as simple as possible. -- Breaking changes should be avoided if possible. -- All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me). +- If your PR changes any behavior or fixes an issue, it should have an associated test. +- New features should be general and as simple as possible. +- Breaking changes should be avoided if possible. +- All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me). ## Protractor specific rules -- JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml). -- Document public methods with jsdoc. -- Be consistent with the code around you! +- JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml). +- Document public methods with jsdoc. +- Be consistent with the code around you! ## Commit Messages @@ -34,5 +34,4 @@ Where `` is one of [feat, fix, docs, refactor, test, chore, deps] and ## Testing your changes -When you submit a PR, tests will also be run on the Continuous Integration environment -through Travis. If your tests fail on Travis, take a look at the logs. +When you submit a PR, tests will be automatically run on the Continuous Integration environment. If any of your tests fail, review the logs and address the issues before requesting a review. diff --git a/README.md b/README.md index 650dab38..156cd1de 100644 --- a/README.md +++ b/README.md @@ -21,25 +21,34 @@ You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-cop ### You can try live [documentation](https://jsdaddy.github.io/ngx-mask/) with examples - ## Installing + Angular version 17.x.x + ```bash $ npm install --save ngx-mask ``` + Angular version 16.x.x + ```bash $ npm install --save ngx-mask@16.4.2 ``` + Angular version 15.x.x + ```bash $ npm install --save ngx-mask@15.2.3 ``` + Angular version 14.x.x + ```bash $ npm install --save ngx-mask@14.3.3 ``` + Angular version 13.x.x or 12.x.x + ```bash $ npm install --save ngx-mask@13.2.2 ``` @@ -185,9 +194,11 @@ Then, just define masks in inputs. Text [documentation](https://github.com/JsDaddy/ngx-mask/blob/develop/USAGE.md) ## Setup hooks + ```bash $ npm run init:hooks ``` ## Contributing + We would love some contributions! Check out this [document](https://github.com/JsDaddy/ngx-mask/blob/develop/CONTRIBUTING.md) to get started. diff --git a/USAGE.md b/USAGE.md index be840c2a..8e60b629 100644 --- a/USAGE.md +++ b/USAGE.md @@ -285,10 +285,12 @@ Masked value: 1.234 Input value: 1234.56 Masked value: 1,234 ``` + ```html ``` -To add zeros to the model at the end + +To add zeros to the model at the end ```text Input value: 12 diff --git a/eslint.config.js b/eslint.config.js index dd48137e..29499b84 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -24,7 +24,7 @@ const ignores = [ 'coverage-ts/', 'cypress/', 'package-lock.json', - '.cache' + '.cache', ]; // Export our config array, which is composed together thanks to the typed utility function from typescript-eslint diff --git a/projects/ngx-mask-lib/ng-package.json b/projects/ngx-mask-lib/ng-package.json index 65ddb822..a5fc4449 100644 --- a/projects/ngx-mask-lib/ng-package.json +++ b/projects/ngx-mask-lib/ng-package.json @@ -1,9 +1,9 @@ { - "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/ngx-mask-lib", - "deleteDestPath": false, - "lib": { - "entryFile": "src/index.ts" - }, - "allowedNonPeerDependencies": [] + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ngx-mask-lib", + "deleteDestPath": false, + "lib": { + "entryFile": "src/index.ts" + }, + "allowedNonPeerDependencies": [] } diff --git a/projects/ngx-mask-lib/ng-package.prod.json b/projects/ngx-mask-lib/ng-package.prod.json index 728b04ad..64385911 100644 --- a/projects/ngx-mask-lib/ng-package.prod.json +++ b/projects/ngx-mask-lib/ng-package.prod.json @@ -1,8 +1,8 @@ { - "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/ngx-mask-lib", - "lib": { - "entryFile": "src/index.ts" - }, - "allowedNonPeerDependencies": [] + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ngx-mask-lib", + "lib": { + "entryFile": "src/index.ts" + }, + "allowedNonPeerDependencies": [] } diff --git a/projects/ngx-mask-lib/tsconfig.cypress.json b/projects/ngx-mask-lib/tsconfig.cypress.json index e0e11a72..a371b9eb 100644 --- a/projects/ngx-mask-lib/tsconfig.cypress.json +++ b/projects/ngx-mask-lib/tsconfig.cypress.json @@ -1,9 +1,9 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "allowJs": true, - "types": ["cypress", "node"] - }, - "include": ["src/test/test/*.cy-spec.ts", "cypress/support/**/*.ts", "**/*.cy-spec.ts"] + "extends": "../../tsconfig.json", + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "allowJs": true, + "types": ["cypress", "node"] + }, + "include": ["src/test/test/*.cy-spec.ts", "cypress/support/**/*.ts", "**/*.cy-spec.ts"] } diff --git a/projects/ngx-mask-lib/tsconfig.lib.prod.json b/projects/ngx-mask-lib/tsconfig.lib.prod.json index 2a2faa88..c21ffefb 100644 --- a/projects/ngx-mask-lib/tsconfig.lib.prod.json +++ b/projects/ngx-mask-lib/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/projects/ngx-mask-lib/tsconfig.spec.json b/projects/ngx-mask-lib/tsconfig.spec.json index 30ed93b9..d4834cd4 100644 --- a/projects/ngx-mask-lib/tsconfig.spec.json +++ b/projects/ngx-mask-lib/tsconfig.spec.json @@ -1,8 +1,8 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../../out-tsc/spec", - "types": ["jasmine", "node"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": ["jasmine", "node"] + }, + "include": ["**/*.spec.ts", "**/*.d.ts"] } diff --git a/src/app/app.component.html b/src/app/app.component.html index be7bd59a..e40422d1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,7 +6,7 @@
- +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a7e812dc..5c3ec560 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { OptDocs, OptExamples } from 'src/assets/content/optional'; import { lists } from 'src/assets/content/lists'; import { SepDocs, SepExamples } from 'src/assets/content/separators'; @@ -23,6 +23,7 @@ import { import { VersionToken } from '@libraries/version/version.token'; declare const VERSION: string; + @Component({ selector: 'jsdaddy-open-source-root', templateUrl: './app.component.html', @@ -38,42 +39,43 @@ declare const VERSION: string; providers: [{ provide: VersionToken, useValue: VERSION }], }) export class AppComponent { - public card: { - docs: IComDoc[]; - examples: (TExample | { _pipe: string })[]; - } = { - docs: ComDocs, - examples: ComExamples, - }; + public docs = signal(ComDocs); + public examples = signal<(TExample | { _pipe: string })[]>(ComExamples); + + public readonly lists: IListItem[] = lists; + public readonly githubMaskLink = LinkPath.NGX_MASK; + public readonly title = 'Ngx-Mask'; + public readonly subtitle = 'Angular plugin to make masks on form fields and html elements'; + public readonly chips = ['Angular', 'TypeScript', 'Web', 'Input', 'Pipe', 'Show-Masks']; + + private readonly selectedCardId = signal(1); - public lists: IListItem[] = lists; - public githubMaskLink = LinkPath.NGX_MASK; - public title = 'Ngx-Mask'; - public subtitle = 'Angular plugin to make masks on form fields and html elements'; - public chips = ['Angular', 'TypeScript', 'Web', 'Input', 'Pipe', 'Show-Masks']; public switchCard(cardId: number): void { + if (this.selectedCardId() === cardId) { + return; + } + this.selectedCardId.set(cardId); + switch (cardId) { - case 1: - this.card.docs = ComDocs; - this.card.examples = ComExamples; - break; case 2: - this.card.docs = OptDocs; - this.card.examples = OptExamples; + this.docs.set(OptDocs); + this.examples.set(OptExamples); break; case 3: - this.card.docs = SepDocs; - this.card.examples = SepExamples; + this.docs.set(SepDocs); + this.examples.set(SepExamples); break; case 4: - this.card.docs = OthDocs; - this.card.examples = OthExamples; + this.docs.set(OthDocs); + this.examples.set(OthExamples); break; case 5: - this.card.docs = ParserAndFormatterDocs; - this.card.examples = FormatAndParserExamples; + this.docs.set(ParserAndFormatterDocs); + this.examples.set(FormatAndParserExamples); break; default: + this.docs.set(ComDocs); + this.examples.set(ComExamples); break; } } diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html index 5f524731..793f67c7 100644 --- a/src/app/options/options.component.html +++ b/src/app/options/options.component.html @@ -1,165 +1,95 @@ -
- @for (tile of cardDocs(); track tile.id; let i = $index) { -
-
- {{ tile.header }} -
+@for (tile of cardDocs(); track tile.id; let i = $index) { +
+
+ {{ tile.header }} +
-
-
-
- Hand with box - Usage -
- Source code -
- 
+        

+            

+                

+                    Hand with box
+                    Usage
+                

+                Source code
+                

+                    
                              
                              Input vector
                         

-                    

                 

-                
             

+
- } -
+ +} - @if (!ex._pipe) { -
- @if ( - !ex._thousandSeparator && - !ex._dropSpecialCharacters && - !ex._inputTransformFn && - !ex.outputTransformFn && - !ex._keepCharacterPositions - ) { -
- -
- } - @if (ex._dropSpecialCharacters) { -
- -
- } - @if (ex._keepCharacterPositions) { -
- -
- } - @if (ex._thousandSeparator) { -
- -
- } - @if (ex._inputTransformFn || ex._outputTransformFn) { -
- -
- } - @if (!ex._validation) { -
-
- - -
- -
- } @else { - - - } -
- } @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"] +}