-
Notifications
You must be signed in to change notification settings - Fork 300
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0d93d1f
commit bd6b39e
Showing
6 changed files
with
108 additions
and
156 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
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
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,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> |
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,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; | ||
| } | ||
| } |
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