fix(ref: no-ref): fix view, remove extra divs

JsDaddy · Oct 22, 2024 · 059b279 · 059b279
1 parent 5acb93b
commit 059b279
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 162 deletions.
diff --git 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/src/app/app.component.html b/src/app/app.component.html
@@ -6,7 +6,7 @@
         </div>
         <div class="right-section column">
             <jsdaddy-open-source-sub-header [title]="title" [subtitle]="subtitle" [chips]="chips" />
-            <jsdaddy-open-source-options [cardDocs]="card.docs" [cardExamples]="card.examples" />
+            <jsdaddy-open-source-options [cardDocs]="docs()" [cardExamples]="examples()" />
             <jsdaddy-open-source-footer />
         </div>
     </section>

diff --git 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,40 +39,43 @@ declare const VERSION: string;
     providers: [{ provide: VersionToken, useValue: VERSION }],
 })
 export class AppComponent {
-    public card: {
-        docs: IComDoc[];
-        examples: (TExample<IMaskOptions> | { _pipe: string })[];
-    } = {
-        docs: ComDocs,
-        examples: ComExamples,
-    };
+    public docs = signal<IComDoc[]>(ComDocs);
+    public examples = signal<(TExample<IMaskOptions> | { _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<number>(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;
+                this.docs.set(ComDocs);
+                this.examples.set(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:
                 break;

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
@@ -34,123 +34,50 @@
 </section>
 
 <ng-template #exampleTmpl let-ex let-placeholder="placeholder">
-    @if (!ex._pipe) {
-        <div class="dark-card bg-black">
-            @if (
-                !ex._thousandSeparator &&
-                !ex._dropSpecialCharacters &&
-                !ex._inputTransformFn &&
-                !ex.outputTransformFn &&
-                !ex._keepCharacterPositions
-            ) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        prefix="{{ ex._prefix }}"
-                        suffix="{{ ex._suffix }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
-                        [specialCharacters]="ex._specialCharacters || null"
-                        [shownMaskExpression]="ex._shownMaskExpression || null"
-                        [(ngModel)]="ex.control.model"
-                        [apm]="ex._apm || false"
-                        [decimalMarker]="ex._decimalMarker"
-                        [leadZero]="ex._leadZero || null"
-                        [validation]="ex._validation || null"
-                        [showMaskTyped]="ex._showMaskTyped || null"
-                        [clearIfNotMatch]="ex._clearIfNotMatch || null"
-                        [hiddenInput]="ex._hiddenInput"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._dropSpecialCharacters) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [prefix]="ex._prefix"
-                        [suffix]="ex._suffix"
-                        mask="{{ ex._mask || '' }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._keepCharacterPositions) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [showMaskTyped]="ex._showMaskTyped"
-                        [prefix]="ex._prefix || ''"
-                        [suffix]="ex._suffix || ''"
-                        mask="{{ ex._mask || '' }}"
-                        [(ngModel)]="ex.control.model"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._thousandSeparator) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [(ngModel)]="ex.control.model"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        [leadZero]="ex._leadZero || null"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._inputTransformFn || ex._outputTransformFn) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [inputTransformFn]="ex._inputTransformFn"
-                        [outputTransformFn]="ex._outputTransformFn || ''"
-                        [(ngModel)]="ex.control.model"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (!ex._validation) {
-                <div>
-                    <div class="card-content row">
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.form.value | isEmpty }}"
-                            title="Form Control:"
-                            color="yellow-view" />
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.model | isEmpty }}"
-                            title="Ng Model:"
-                            color="yellow-view" />
-                    </div>
-                    <jsdaddy-open-source-card-content
-                        value="{{ ex._mask }}"
-                        title="Mask:"
-                        color="green-view" />
-                </div>
-            } @else {
+    <div class="dark-card bg-black">
+        @if (!ex._pipe) {
+            <div class="dark-input pd-15">
+                <input
+                    [placeholder]="placeholder || ''"
+                    [placeHolderCharacter]="ex._placholderCharacter || '_'"
+                    [prefix]="ex._prefix || ''"
+                    [suffix]="ex._suffix || ''"
+                    [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                    [mask]="ex._mask || ''"
+                    [thousandSeparator]="ex._thousandSeparator || ' '"
+                    [formControl]="ex.control.form"
+                    [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
+                    [specialCharacters]="ex._specialCharacters || specialCharacters"
+                    [shownMaskExpression]="ex._shownMaskExpression"
+                    [(ngModel)]="ex.control.model"
+                    [apm]="ex._apm || false"
+                    [decimalMarker]="ex._decimalMarker || '.'"
+                    [leadZero]="ex._leadZero || false"
+                    [keepCharacterPositions]="ex._keepCharacterPositions || false"
+                    [validation]="ex._validation || false"
+                    [showMaskTyped]="ex._showMaskTyped || false"
+                    [clearIfNotMatch]="ex._clearIfNotMatch"
+                    [hiddenInput]="ex._hiddenInput || undefined"
+                    class="customDarkInput bg-black white span" />
+            </div>
+            <div class="card-content row">
                 <jsdaddy-open-source-card-content
-                    value="{{ ex.control.form.errors | json }}"
+                    [value]="ex.control.form.value | isEmpty"
                     title="Form Control:"
                     color="yellow-view" />
+                <jsdaddy-open-source-card-content
+                    [value]="ex.control.model | isEmpty"
+                    title="Ng Model:"
+                    color="yellow-view" />
+            </div>
+            <jsdaddy-open-source-card-content [value]="ex._mask" title="Mask:" color="green-view" />
+            @if (ex._validation) {
                 <jsdaddy-open-source-card-content
                     value="{{ ex.control.form.errors | json }}"
-                    title="Mask:"
-                    color="green-view" />
+                    title="Mask error:"
+                    color="yellow-view" />
             }
-        </div>
-    } @else {
-        <div class="dark-card bg-black">
+        } @else {
             <jsdaddy-open-source-card-content
                 value="{{ phone | mask: '(000) 000-0000' }}"
                 title=""
@@ -160,6 +87,6 @@
                 title="Mask:"
                 color="green-view" />
             <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
-        </div>
-    }
+        }
+    </div>
 </ng-template>
diff --git 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,7 @@ export class OptionsComponent {
 
     public readonly phone = '123456789';
     public readonly openSourceOptionsPath = OpenSourcePath.OPTIONS;
+    public readonly specialCharacters = initialConfig.specialCharacters;
 
     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
@@ -1,6 +1,4 @@
-<div class="card-text column pd-15">
-    <span class="sub-text full-white title ls-25">{{ title() }}</span>
-    <span class="height ai-start span yellow" [class]="[color()]" [style.height]="'auto'">{{
-        value()
-    }}</span>
-</div>
+<span class="sub-text full-white title ls-25">{{ title() }}</span>
+<span class="height ai-start span yellow" [class]="[color()]" [style.height]="'auto'">{{
+    value()
+}}</span>
diff --git 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
@@ -147,21 +147,18 @@ export const ComExamples: TExample<IMaskOptions>[] = [
     {
         _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/optional.ts b/src/assets/content/optional.ts
@@ -97,7 +97,6 @@ export const OptExamples: TExample<IMaskOptions>[] = [
     {
         _placeholder: 'dropSpecialCharacters',
         _dropSpecialCharacters: false,
-        _specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
         _mask: '000-000.00',
         control: { form: new UntypedFormControl(''), model: '' },
     },
@@ -121,36 +120,31 @@ export const OptExamples: TExample<IMaskOptions>[] = [
         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: '$',
         _mask: '0 000',
         control: { form: new UntypedFormControl(''), model: '' },
     },
     {
-        _placeholder: '0000.00',
         _showMaskTyped: true,
         _keepCharacterPositions: true,
         _prefix: '$',

diff --git a/src/libraries b/src/libraries
+ −		.DS_Store
+1 −1		README.md
+0 −1		input/input.component.ts