diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a18fc93..6b531147 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 18.0.4(2024-11-11)
+
+### Fix
+
+-   Fix ([#1449](https://github.com/JsDaddy/ngx-mask/issues/1449))
+
+
 # 18.0.3(2024-11-05)
 
 ### Fix
diff --git a/package.json b/package.json
index 8a20bd64..ebfea910 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "18.0.3",
+    "version": "18.0.4",
     "description": "Awesome ngx mask",
     "license": "MIT",
     "engines": {
diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
index fcdab315..15381d26 100644
--- a/projects/ngx-mask-lib/package.json
+++ b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "18.0.3",
+    "version": "18.0.4",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",
diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index 8a920f66..3b2442bd 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -1,135 +1,103 @@
-<div class="flex flex-col bg-black gap-5">
-    <input
-        mask="separator.2"
-        [(ngModel)]="input"
-        [thousandSeparator]="thousand"
-        [decimalMarker]="'.'" />
-    <span> {{ input }}</span>
+@for (tile of cardDocs(); track tile.id; let i = $index) {
+    <div
+        class="flex flex-col p-2.5 gap-2.5 bg-dark/[.02] rounded-15px"
+        [class]="
+            activeCardId() === tile.id ? 'border border-solid border-yellow bg-yellow/[.05]' : ''
+        "
+        [id]="tile.id"
+        #cards>
+        <div class="ml-4 flex items-center text-title text-dark uppercase tracking-[.25em]">
+            {{ tile.header }}
+        </div>
 
-    <button (click)="fill()">change</button>
+        <div class="flex gap-30px mob:flex-col mob:gap-15px scroll-mt-[185px]" [id]="tile.anchor">
+            <div class="flex-[55%] rounded-10px bg-full-white p-15px">
+                <div class="flex items-start gap-2.5 mb-5">
+                    <img
+                        width="20"
+                        height="20"
+                        [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
+                        alt="Hand with box" />
+                    <span class="text-span text-dark/[.25]">Usage</span>
+                </div>
+                <span class="uppercase tracking-[.25em] text-span text-dark/[.45]"
+                    >Source code</span
+                >
+                <div class="block mt-2.5">
+                    <pre class="flex text-span">
+                        <code [highlight]="tile.code" language="html" class="bg-white w-full h-fit pl-15px rounded-10px border-none overflow-hidden whitespace-pre-line"></code>
+                        <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="relative right-5 self-center" alt="Input vector" />
+                    </pre>
+                </div>
+            </div>
+            <ng-container
+                *ngTemplateOutlet="
+                    exampleTmpl;
+                    context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
+                "></ng-container>
+        </div>
+    </div>
+}
 
-    <!--    <input type="text" mask="separator.2" [(ngModel)]="value1" separatorLimit="10" />-->
-    <!--    <input type="text" mask="separator.2" [(ngModel)]="value2" [allowNegativeNumbers]="true" />-->
+<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
+    <div class="flex-[45%] rounded-10px p-15px bg-black">
+        <ng-container
+            *ngTemplateOutlet="
+                !ex._pipe ? inputTemplate : pipeTemplate;
+                context: { $implicit: ex, placeholder: placeholder }
+            ">
+        </ng-container>
+    </div>
+</ng-template>
 
-    <!--    <input type="text" mask="d0.M0." [dropSpecialCharacters]="false" />-->
-    <!--    <span>Workaround</span>-->
-    <!--    <input type="text" mask="d0.M0." [dropSpecialCharacters]="false" [leadZeroDateTime]="true" />-->
+<ng-template #inputTemplate let-ex let-placeholder="placeholder">
+    <div class="flex">
+        <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 || null"
+            [outputTransformFn]="ex._outputTransformFn || outputTransformFn"
+            [inputTransformFn]="ex._inputTransformFn || inputTransformFn"
+            class="w-full h-[51px] placeholder:text-white/25 text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25" />
+    </div>
+    <div class="flex gap-50px">
+        <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>
 
-    <!--    <h3>Type any numeric value into the input. Then click to show values.</h3>-->
-    <!--    <p>-->
-    <!--        Typing any value while hiddenInput is 'true' then changing hiddenInput to 'false' will erase-->
-    <!--        all of the input but the last typed value.-->
-    <!--    </p>-->
-
-    <!--    <input [(ngModel)]="value" [hiddenInput]="hiddenInput" mask="XXX/XX/XXXX" />-->
-    <!--    <button (click)="changeHiddenInput()">{{ hiddenInput ? 'Show Value' : 'Hide Value' }}</button>-->
-
-    <!--    <p>-->
-    <!--        This doesn't happen when changing hiddenInput from 'false' to 'true'. And it only happens on-->
-    <!--        type (keydown). You can set the value programmaticly or via paste and it will work.-->
-    <!--    </p>-->
-</div>
-
-<!--@for (tile of cardDocs(); track tile.id; let i = $index) {-->
-<!--    <div-->
-<!--        class="flex flex-col p-2.5 gap-2.5 bg-dark/[.02] rounded-15px"-->
-<!--        [class]="-->
-<!--            activeCardId() === tile.id ? 'border border-solid border-yellow bg-yellow/[.05]' : ''-->
-<!--        "-->
-<!--        [id]="tile.id"-->
-<!--        #cards>-->
-<!--        <div class="ml-4 flex items-center text-title text-dark uppercase tracking-[.25em]">-->
-<!--            {{ tile.header }}-->
-<!--        </div>-->
-
-<!--        <div class="flex gap-30px mob:flex-col mob:gap-15px scroll-mt-[185px]" [id]="tile.anchor">-->
-<!--            <div class="flex-[55%] rounded-10px bg-full-white p-15px">-->
-<!--                <div class="flex items-start gap-2.5 mb-5">-->
-<!--                    <img-->
-<!--                        width="20"-->
-<!--                        height="20"-->
-<!--                        [ngSrc]="'hand-box' | asset: openSourceOptionsPath"-->
-<!--                        alt="Hand with box" />-->
-<!--                    <span class="text-span text-dark/[.25]">Usage</span>-->
-<!--                </div>-->
-<!--                <span class="uppercase tracking-[.25em] text-span text-dark/[.45]"-->
-<!--                    >Source code</span-->
-<!--                >-->
-<!--                <div class="block mt-2.5">-->
-<!--                    <pre class="flex text-span">-->
-<!--                        <code [highlight]="tile.code" language="html" class="bg-white w-full h-fit pl-15px rounded-10px border-none overflow-hidden whitespace-pre-line"></code>-->
-<!--                        <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="relative right-5 self-center" alt="Input vector" />-->
-<!--                    </pre>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <ng-container-->
-<!--                *ngTemplateOutlet="-->
-<!--                    exampleTmpl;-->
-<!--                    context: { $implicit: cardExamples()?.[i], placeholder: tile.header }-->
-<!--                "></ng-container>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--}-->
-
-<!--<ng-template #exampleTmpl let-ex let-placeholder="placeholder">-->
-<!--    <div class="flex-[45%] rounded-10px p-15px bg-black">-->
-<!--        <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="flex">-->
-<!--        <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 || null"-->
-<!--            [outputTransformFn]="ex._outputTransformFn || outputTransformFn"-->
-<!--            [inputTransformFn]="ex._inputTransformFn || inputTransformFn"-->
-<!--            class="w-full h-[51px] placeholder:text-white/25 text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25" />-->
-<!--    </div>-->
-<!--    <div class="flex gap-50px">-->
-<!--        <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>-->
+<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 21412270..5c149a1a 100644
--- a/src/app/options/options.component.scss
+++ b/src/app/options/options.component.scss
@@ -1,10 +1,3 @@
 :host {
     @apply flex flex-col gap-4 p-4 bg-full-white box-border border-t border-t-black/10 py-5 pl-[22px] pr-4;
-    input {
-        @apply w-full h-[51px] placeholder:text-white/25 text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25;
-    }
-    span,
-    button {
-        @apply text-full-white;
-    }
 }
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 05c8f58b..16d8b5b8 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -59,20 +59,4 @@ export class OptionsComponent {
             this.accordionService.onChangeAccordion(this.cards());
         });
     }
-
-    public hiddenInput = true;
-    public value = '';
-    public value1 = '12.10';
-    public value2 = '-50.40';
-
-    public changeHiddenInput() {
-        this.hiddenInput = !this.hiddenInput;
-    }
-
-    public fill() {
-        this.thousand = '.';
-    }
-
-    public input = '12033.30';
-    public thousand = ',';
 }