From 21ac79411218b8db85e92be9232531fe5f38f022 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 23 Oct 2024 11:39:51 +0300
Subject: [PATCH] fix(ref: no-ref): fix view, remove extra divs

---
 src/app/options/options.component.html | 167 +++++++++++++------------
 src/app/options/options.component.scss |  41 ++++--
 src/assets/content/separators.ts       |  13 +-
 3 files changed, 122 insertions(+), 99 deletions(-)

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index fcca49ec..e99d8677 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -1,94 +1,97 @@
-<section class="content column bg-full-white">
-    @for (tile of cardDocs(); track tile.id; let i = $index) {
-        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
-            <div class="mr-title title row uppercase ls-25">
-                {{ tile.header }}
-            </div>
+<!--<section class="content column bg-full-white">-->
+@for (tile of cardDocs(); track tile.id; let i = $index) {
+    <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
+        <div class="mr-title title row uppercase ls-25">
+            {{ tile.header }}
+        </div>
 
-            <div class="cards-block row" [id]="tile.anchor">
-                <div class="light-card bg-full-white pd-15">
-                    <div class="light-title row ai-c">
-                        <img
-                            width="20"
-                            height="20"
-                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
-                            alt="Hand with box" />
-                        <span class="span">Usage</span>
-                    </div>
-                    <span class="source uppercase ls-25 full-white span">Source code</span>
-                    <div class="white-input">
-                        <pre class="row">
+        <div class="cards-block row" [id]="tile.anchor">
+            <div class="light-card bg-full-white pd-15">
+                <div class="light-title row ai-c">
+                    <img
+                        width="20"
+                        height="20"
+                        [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
+                        alt="Hand with box" />
+                    <span class="span">Usage</span>
+                </div>
+                <span class="source uppercase ls-25 full-white span">Source code</span>
+                <div class="white-input">
+                    <pre class="row">
                              <code [highlight]="tile.code" language="JavaScript" class="input-view bg-white"></code>
                              <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
                         </pre>
-                    </div>
                 </div>
-                <ng-container
-                    *ngTemplateOutlet="
-                        exampleTmpl;
-                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
-                    "></ng-container>
             </div>
+            <ng-container
+                *ngTemplateOutlet="
+                    exampleTmpl;
+                    context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
+                "></ng-container>
         </div>
-    }
-</section>
+    </div>
+}
+<!--</section>-->
 
 <ng-template #exampleTmpl let-ex let-placeholder="placeholder">
     <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"
-                    [outputTransformFn]="ex._outputTransformFn || outputTransformFn"
-                    [inputTransformFn]="ex._inputTransformFn || inputTransformFn"
-                    class="customDarkInput bg-black white span" />
-            </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" />
-            @if (ex._validation) {
-                <jsdaddy-open-source-card-content
-                    [value]="ex.control.form.errors | json"
-                    title="Mask error:"
-                    color="yellow-view" />
-            }
-        } @else {
-            <jsdaddy-open-source-card-content
-                [value]="phone | mask: '(000) 000-0000'"
-                title=""
-                color="" />
-            <jsdaddy-open-source-card-content
-                value="(000) 000-0000"
-                title="Mask:"
-                color="green-view" />
-            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
-        }
+        <ng-container
+            *ngTemplateOutlet="
+                !ex._pipe ? inputTemplate : pipeTemplate;
+                context: { $implicit: ex, placeholder: placeholder }
+            ">
+        </ng-container>
     </div>
 </ng-template>
+
+<ng-template #inputTemplate let-ex let-placeholder="placeholder">
+    <div class="dark-input pd-15">
+        <input
+            [placeholder]="placeholder || ''"
+            [placeHolderCharacter]="ex._placholderCharacter || '_'"
+            [prefix]="ex._prefix || ''"
+            [suffix]="ex._suffix || ''"
+            [dropSpecialCharacters]="ex._dropSpecialCharacters ?? true"
+            [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"
+            [outputTransformFn]="ex._outputTransformFn || outputTransformFn"
+            [inputTransformFn]="ex._inputTransformFn || inputTransformFn"
+            class="customDarkInput bg-black white span" />
+    </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" />
+    @if (ex._validation) {
+        <jsdaddy-open-source-card-content
+            [value]="ex.control.form.errors | json"
+            title="Mask error:"
+            color="yellow-view" />
+    }
+</ng-template>
+
+<ng-template #pipeTemplate>
+    <jsdaddy-open-source-card-content [value]="phone | mask: '(000) 000-0000'" title="" color="" />
+    <jsdaddy-open-source-card-content value="(000) 000-0000" title="Mask:" color="green-view" />
+    <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
+</ng-template>
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/assets/content/separators.ts b/src/assets/content/separators.ts
index 576b74d6..1ce75f60 100644
--- a/src/assets/content/separators.ts
+++ b/src/assets/content/separators.ts
@@ -19,14 +19,14 @@ export const SepDocs: IComDoc[] = [
     {
         header: 'Dot separator',
         text: 'For separate input with dots',
-        code: `<input type='text' mask="separator" thousandSeparator="." decimalMarker="," />`,
+        code: `<input type='text' mask="separator.2" thousandSeparator="." decimalMarker="," />`,
         id: 3,
         anchor: 'Dsep',
     },
     {
         header: 'Comma separator',
         text: `For separate input with commas`,
-        code: `<input type='text' mask="separator" thousandSeparator="," decimalMarker="." />`,
+        code: `<input type='text' mask="separator.2" thousandSeparator="," decimalMarker="." />`,
         id: 4,
         anchor: 'comma_sep',
     },
@@ -52,15 +52,14 @@ export const SepExamples: TExample<IMaskOptions>[] = [
         control: { form: new UntypedFormControl(''), model: '' },
     },
     {
-        _placeholder: 'separator',
-        _mask: 'separator',
+        _placeholder: 'separator.2',
+        _mask: 'separator.2',
         _thousandSeparator: '.',
-        _decimalMarker: ',',
         control: { form: new UntypedFormControl(''), model: '' },
     },
     {
-        _placeholder: 'separator',
-        _mask: 'separator',
+        _placeholder: 'separator.2',
+        _mask: 'separator.2',
         _thousandSeparator: ',',
         _decimalMarker: '.',
         control: { form: new UntypedFormControl(''), model: '' },