-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(ref: no-ref): fix view, remove extra divs
- Loading branch information
1 parent
b0774fa
commit 21ac794
Showing
3 changed files
with
122 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters