feat(html): preserve surrounding linebreaks (#5596)
parent
fa7eafaa6d
commit
d97fe0a1e0
|
@ -273,7 +273,12 @@ function forceBreakContent(node) {
|
||||||
(node.type === "element" &&
|
(node.type === "element" &&
|
||||||
node.children.length !== 0 &&
|
node.children.length !== 0 &&
|
||||||
(["body", "template", "script", "style"].indexOf(node.name) !== -1 ||
|
(["body", "template", "script", "style"].indexOf(node.name) !== -1 ||
|
||||||
node.children.some(child => hasNonTextChild(child))))
|
node.children.some(child => hasNonTextChild(child)))) ||
|
||||||
|
(node.firstChild &&
|
||||||
|
node.firstChild === node.lastChild &&
|
||||||
|
(hasLeadingLineBreak(node.firstChild) &&
|
||||||
|
(!node.lastChild.isTrailingSpaceSensitive ||
|
||||||
|
hasTrailingLineBreak(node.lastChild))))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -291,7 +296,7 @@ function preferHardlineAsLeadingSpaces(node) {
|
||||||
return (
|
return (
|
||||||
preferHardlineAsSurroundingSpaces(node) ||
|
preferHardlineAsSurroundingSpaces(node) ||
|
||||||
(node.prev && preferHardlineAsTrailingSpaces(node.prev)) ||
|
(node.prev && preferHardlineAsTrailingSpaces(node.prev)) ||
|
||||||
isCustomElementWithSurroundingLineBreak(node)
|
hasSurroundingLineBreak(node)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -299,19 +304,7 @@ function preferHardlineAsTrailingSpaces(node) {
|
||||||
return (
|
return (
|
||||||
preferHardlineAsSurroundingSpaces(node) ||
|
preferHardlineAsSurroundingSpaces(node) ||
|
||||||
(node.type === "element" && node.fullName === "br") ||
|
(node.type === "element" && node.fullName === "br") ||
|
||||||
isCustomElementWithSurroundingLineBreak(node)
|
hasSurroundingLineBreak(node)
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isCustomElementWithSurroundingLineBreak(node) {
|
|
||||||
return isCustomElement(node) && hasSurroundingLineBreak(node);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isCustomElement(node) {
|
|
||||||
return (
|
|
||||||
node.type === "element" &&
|
|
||||||
!node.namespace &&
|
|
||||||
(node.name.includes("-") || /[A-Z]/.test(node.name[0]))
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3458,7 +3458,10 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<p>My current hero is {{ currentHero.name }}</p>
|
<p>My current hero is {{ currentHero.name }}</p>
|
||||||
|
|
||||||
<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
|
<h3>
|
||||||
|
{{ title }}
|
||||||
|
<img src="{{ heroImageUrl }}" style="height:30px" />
|
||||||
|
</h3>
|
||||||
|
|
||||||
<!-- "The sum of 1 + 1 is 2" -->
|
<!-- "The sum of 1 + 1 is 2" -->
|
||||||
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
|
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
|
||||||
|
@ -3476,7 +3479,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
[hidden]="isUnchanged")
|
[hidden]="isUnchanged")
|
||||||
</p>
|
</p>
|
||||||
<div class="context">
|
<div class="context">
|
||||||
{{ title }} <span [hidden]="isUnchanged">changed</span>
|
{{ title }}
|
||||||
|
<span [hidden]="isUnchanged">changed</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Template input variable expression context (let hero)</p>
|
<p>Template input variable expression context (let hero)</p>
|
||||||
|
@ -3487,7 +3491,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<p>Template reference variable expression context (#heroInput)</p>
|
<p>Template reference variable expression context (#heroInput)</p>
|
||||||
<div (keyup)="(0)" class="context">
|
<div (keyup)="(0)" class="context">
|
||||||
Type something: <input #heroInput /> {{ heroInput.value }}
|
Type something:
|
||||||
|
<input #heroInput /> {{ heroInput.value }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
@ -3496,10 +3501,14 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<h2 id="statement-context">Statement context</h2>
|
<h2 id="statement-context">Statement context</h2>
|
||||||
|
|
||||||
<p>Component statement context ( (click)="onSave() )</p>
|
<p>Component statement context ( (click)="onSave() )</p>
|
||||||
<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
|
<div class="context">
|
||||||
|
<button (click)="deleteHero()">Delete hero</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template $event statement context</p>
|
<p>Template $event statement context</p>
|
||||||
<div class="context"><button (click)="onSave($event)">Save</button></div>
|
<div class="context">
|
||||||
|
<button (click)="onSave($event)">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template input variable statement context (let hero)</p>
|
<p>Template input variable statement context (let hero)</p>
|
||||||
<!-- template hides the following; plenty of examples later -->
|
<!-- template hides the following; plenty of examples later -->
|
||||||
|
@ -3523,7 +3532,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
|
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
|
||||||
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
|
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
|
||||||
<div class="special">Mental Model</div>
|
<div class="special">Mental Model</div>
|
||||||
<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
|
<img src="assets/images/hero.png" />
|
||||||
|
<button disabled>Save</button>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<!-- Normal HTML -->
|
<!-- Normal HTML -->
|
||||||
|
@ -3549,17 +3560,25 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<button (click)="onSave()">Save</button>
|
<button (click)="onSave()">Save</button>
|
||||||
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
|
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
|
||||||
<div (myClick)="clicked = $event" clickable>click me</div>
|
<div (myClick)="clicked = $event" clickable>click me</div>
|
||||||
{{ clicked }} <br /><br />
|
{{ clicked }}
|
||||||
|
|
||||||
<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<button [attr.aria-label]="help">help</button> <br /><br />
|
<div>
|
||||||
|
Hero Name:
|
||||||
|
<input [(ngModel)]="name" />
|
||||||
|
{{ name }}
|
||||||
|
</div>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
|
<button [attr.aria-label]="help">help</button>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
<div [class.special]="isSpecial">Special</div>
|
<div [class.special]="isSpecial">Special</div>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
|
<button [style.color]="isSpecial ? 'red' : 'green'">
|
||||||
|
button
|
||||||
|
</button>
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
|
||||||
|
@ -3571,7 +3590,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
|
<img [src]="iconUrl" />
|
||||||
|
<img bind-src="heroImageUrl" />
|
||||||
<img [attr.src]="villainImageUrl" />
|
<img [attr.src]="villainImageUrl" />
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
@ -3580,8 +3600,10 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<hr />
|
<hr />
|
||||||
<h2 id="buttons">Buttons</h2>
|
<h2 id="buttons">Buttons</h2>
|
||||||
|
|
||||||
<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
|
<button>Enabled (but does nothing)</button>
|
||||||
<button disabled="false">Still disabled</button> <br /><br />
|
<button disabled>Disabled</button>
|
||||||
|
<button disabled="false">Still disabled</button>
|
||||||
|
<br /><br />
|
||||||
<button disabled>disabled by attribute</button>
|
<button disabled>disabled by attribute</button>
|
||||||
<button [disabled]="isUnchanged">disabled by property binding</button>
|
<button [disabled]="isUnchanged">disabled by property binding</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
@ -3604,7 +3626,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<!-- ERROR: HeroDetailComponent.hero expects a
|
<!-- ERROR: HeroDetailComponent.hero expects a
|
||||||
Hero object, not the string "currentHero" -->
|
Hero object, not the string "currentHero" -->
|
||||||
<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
|
<div *ngIf="false">
|
||||||
|
<app-hero-detail hero="currentHero"></app-hero-detail>
|
||||||
|
</div>
|
||||||
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
||||||
|
|
||||||
<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
|
<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
|
||||||
|
@ -3769,14 +3793,20 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
[value]="currentHero.name"
|
[value]="currentHero.name"
|
||||||
(input)="currentHero.name = $event.target.value"
|
(input)="currentHero.name = $event.target.value"
|
||||||
/>
|
/>
|
||||||
without NgModel <br />
|
without NgModel
|
||||||
<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
|
<br />
|
||||||
<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
|
<input [(ngModel)]="currentHero.name" />
|
||||||
|
[(ngModel)]
|
||||||
|
<br />
|
||||||
|
<input bindon-ngModel="currentHero.name" />
|
||||||
|
bindon-ngModel
|
||||||
|
<br />
|
||||||
<input
|
<input
|
||||||
[ngModel]="currentHero.name"
|
[ngModel]="currentHero.name"
|
||||||
(ngModelChange)="currentHero.name = $event"
|
(ngModelChange)="currentHero.name = $event"
|
||||||
/>
|
/>
|
||||||
(ngModelChange)="...name=$event" <br />
|
(ngModelChange)="...name=$event"
|
||||||
|
<br />
|
||||||
<input
|
<input
|
||||||
[ngModel]="currentHero.name"
|
[ngModel]="currentHero.name"
|
||||||
(ngModelChange)="setUppercaseName($event)"
|
(ngModelChange)="setUppercaseName($event)"
|
||||||
|
@ -3804,7 +3834,8 @@ without NgModel <br />
|
||||||
[value]="!isUnchanged"
|
[value]="!isUnchanged"
|
||||||
(change)="isUnchanged = !isUnchanged"
|
(change)="isUnchanged = !isUnchanged"
|
||||||
/></label>
|
/></label>
|
||||||
| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
|
|
||||||
|
<label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
||||||
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
|
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<div [ngClass]="currentClasses">
|
<div [ngClass]="currentClasses">
|
||||||
|
@ -3840,7 +3871,8 @@ without NgModel <br />
|
||||||
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
|
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
|
||||||
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
|
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
|
||||||
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
||||||
<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
|
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
|
||||||
|
<br /><br />
|
||||||
<div [ngStyle]="currentStyles">
|
<div [ngStyle]="currentStyles">
|
||||||
This div should be {{ canSave ? "italic" : "plain" }},
|
This div should be {{ canSave ? "italic" : "plain" }},
|
||||||
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
||||||
|
@ -4033,7 +4065,8 @@ without NgModel <br />
|
||||||
<hr />
|
<hr />
|
||||||
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
|
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
|
||||||
|
|
||||||
<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
|
<img [src]="iconUrl" />
|
||||||
|
<button (click)="onSave()">Save</button>
|
||||||
|
|
||||||
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
|
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
|
||||||
</app-hero-detail>
|
</app-hero-detail>
|
||||||
|
@ -4050,7 +4083,10 @@ without NgModel <br />
|
||||||
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
||||||
|
|
||||||
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
||||||
<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
|
<div>
|
||||||
|
Title through a pipe chain:
|
||||||
|
{{ title | uppercase | lowercase }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- pipe with configuration argument => "February 25, 1970" -->
|
<!-- pipe with configuration argument => "February 25, 1970" -->
|
||||||
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
||||||
|
@ -4160,7 +4196,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
|
<div [hidden]="!heroForm.form.valid">
|
||||||
|
{{ submitMessage }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
@ -4949,7 +4987,10 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<p>My current hero is {{ currentHero.name }}</p>
|
<p>My current hero is {{ currentHero.name }}</p>
|
||||||
|
|
||||||
<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
|
<h3>
|
||||||
|
{{ title }}
|
||||||
|
<img src="{{ heroImageUrl }}" style="height:30px" />
|
||||||
|
</h3>
|
||||||
|
|
||||||
<!-- "The sum of 1 + 1 is 2" -->
|
<!-- "The sum of 1 + 1 is 2" -->
|
||||||
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
|
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
|
||||||
|
@ -4967,7 +5008,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
[hidden]="isUnchanged")
|
[hidden]="isUnchanged")
|
||||||
</p>
|
</p>
|
||||||
<div class="context">
|
<div class="context">
|
||||||
{{ title }} <span [hidden]="isUnchanged">changed</span>
|
{{ title }}
|
||||||
|
<span [hidden]="isUnchanged">changed</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Template input variable expression context (let hero)</p>
|
<p>Template input variable expression context (let hero)</p>
|
||||||
|
@ -4978,7 +5020,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<p>Template reference variable expression context (#heroInput)</p>
|
<p>Template reference variable expression context (#heroInput)</p>
|
||||||
<div (keyup)="(0)" class="context">
|
<div (keyup)="(0)" class="context">
|
||||||
Type something: <input #heroInput /> {{ heroInput.value }}
|
Type something:
|
||||||
|
<input #heroInput /> {{ heroInput.value }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
@ -4987,10 +5030,14 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<h2 id="statement-context">Statement context</h2>
|
<h2 id="statement-context">Statement context</h2>
|
||||||
|
|
||||||
<p>Component statement context ( (click)="onSave() )</p>
|
<p>Component statement context ( (click)="onSave() )</p>
|
||||||
<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
|
<div class="context">
|
||||||
|
<button (click)="deleteHero()">Delete hero</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template $event statement context</p>
|
<p>Template $event statement context</p>
|
||||||
<div class="context"><button (click)="onSave($event)">Save</button></div>
|
<div class="context">
|
||||||
|
<button (click)="onSave($event)">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template input variable statement context (let hero)</p>
|
<p>Template input variable statement context (let hero)</p>
|
||||||
<!-- template hides the following; plenty of examples later -->
|
<!-- template hides the following; plenty of examples later -->
|
||||||
|
@ -5014,7 +5061,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
|
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
|
||||||
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
|
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
|
||||||
<div class="special">Mental Model</div>
|
<div class="special">Mental Model</div>
|
||||||
<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
|
<img src="assets/images/hero.png" />
|
||||||
|
<button disabled>Save</button>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<!-- Normal HTML -->
|
<!-- Normal HTML -->
|
||||||
|
@ -5040,17 +5089,25 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<button (click)="onSave()">Save</button>
|
<button (click)="onSave()">Save</button>
|
||||||
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
|
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
|
||||||
<div (myClick)="clicked = $event" clickable>click me</div>
|
<div (myClick)="clicked = $event" clickable>click me</div>
|
||||||
{{ clicked }} <br /><br />
|
{{ clicked }}
|
||||||
|
|
||||||
<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<button [attr.aria-label]="help">help</button> <br /><br />
|
<div>
|
||||||
|
Hero Name:
|
||||||
|
<input [(ngModel)]="name" />
|
||||||
|
{{ name }}
|
||||||
|
</div>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
|
<button [attr.aria-label]="help">help</button>
|
||||||
|
<br /><br />
|
||||||
|
|
||||||
<div [class.special]="isSpecial">Special</div>
|
<div [class.special]="isSpecial">Special</div>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
|
<button [style.color]="isSpecial ? 'red' : 'green'">
|
||||||
|
button
|
||||||
|
</button>
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
|
||||||
|
@ -5062,7 +5119,8 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
|
<img [src]="iconUrl" />
|
||||||
|
<img bind-src="heroImageUrl" />
|
||||||
<img [attr.src]="villainImageUrl" />
|
<img [attr.src]="villainImageUrl" />
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
@ -5071,8 +5129,10 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<hr />
|
<hr />
|
||||||
<h2 id="buttons">Buttons</h2>
|
<h2 id="buttons">Buttons</h2>
|
||||||
|
|
||||||
<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
|
<button>Enabled (but does nothing)</button>
|
||||||
<button disabled="false">Still disabled</button> <br /><br />
|
<button disabled>Disabled</button>
|
||||||
|
<button disabled="false">Still disabled</button>
|
||||||
|
<br /><br />
|
||||||
<button disabled>disabled by attribute</button>
|
<button disabled>disabled by attribute</button>
|
||||||
<button [disabled]="isUnchanged">disabled by property binding</button>
|
<button [disabled]="isUnchanged">disabled by property binding</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
@ -5095,7 +5155,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<!-- ERROR: HeroDetailComponent.hero expects a
|
<!-- ERROR: HeroDetailComponent.hero expects a
|
||||||
Hero object, not the string "currentHero" -->
|
Hero object, not the string "currentHero" -->
|
||||||
<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
|
<div *ngIf="false">
|
||||||
|
<app-hero-detail hero="currentHero"></app-hero-detail>
|
||||||
|
</div>
|
||||||
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
||||||
|
|
||||||
<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
|
<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
|
||||||
|
@ -5260,14 +5322,20 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
[value]="currentHero.name"
|
[value]="currentHero.name"
|
||||||
(input)="currentHero.name = $event.target.value"
|
(input)="currentHero.name = $event.target.value"
|
||||||
/>
|
/>
|
||||||
without NgModel <br />
|
without NgModel
|
||||||
<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
|
<br />
|
||||||
<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
|
<input [(ngModel)]="currentHero.name" />
|
||||||
|
[(ngModel)]
|
||||||
|
<br />
|
||||||
|
<input bindon-ngModel="currentHero.name" />
|
||||||
|
bindon-ngModel
|
||||||
|
<br />
|
||||||
<input
|
<input
|
||||||
[ngModel]="currentHero.name"
|
[ngModel]="currentHero.name"
|
||||||
(ngModelChange)="currentHero.name = $event"
|
(ngModelChange)="currentHero.name = $event"
|
||||||
/>
|
/>
|
||||||
(ngModelChange)="...name=$event" <br />
|
(ngModelChange)="...name=$event"
|
||||||
|
<br />
|
||||||
<input
|
<input
|
||||||
[ngModel]="currentHero.name"
|
[ngModel]="currentHero.name"
|
||||||
(ngModelChange)="setUppercaseName($event)"
|
(ngModelChange)="setUppercaseName($event)"
|
||||||
|
@ -5295,7 +5363,8 @@ without NgModel <br />
|
||||||
[value]="!isUnchanged"
|
[value]="!isUnchanged"
|
||||||
(change)="isUnchanged = !isUnchanged"
|
(change)="isUnchanged = !isUnchanged"
|
||||||
/></label>
|
/></label>
|
||||||
| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
|
|
||||||
|
<label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
||||||
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
|
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<div [ngClass]="currentClasses">
|
<div [ngClass]="currentClasses">
|
||||||
|
@ -5331,7 +5400,8 @@ without NgModel <br />
|
||||||
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
|
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
|
||||||
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
|
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
|
||||||
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
|
||||||
<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
|
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
|
||||||
|
<br /><br />
|
||||||
<div [ngStyle]="currentStyles">
|
<div [ngStyle]="currentStyles">
|
||||||
This div should be {{ canSave ? "italic" : "plain" }},
|
This div should be {{ canSave ? "italic" : "plain" }},
|
||||||
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
||||||
|
@ -5524,7 +5594,8 @@ without NgModel <br />
|
||||||
<hr />
|
<hr />
|
||||||
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
|
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
|
||||||
|
|
||||||
<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
|
<img [src]="iconUrl" />
|
||||||
|
<button (click)="onSave()">Save</button>
|
||||||
|
|
||||||
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
|
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
|
||||||
</app-hero-detail>
|
</app-hero-detail>
|
||||||
|
@ -5541,7 +5612,10 @@ without NgModel <br />
|
||||||
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
||||||
|
|
||||||
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
||||||
<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
|
<div>
|
||||||
|
Title through a pipe chain:
|
||||||
|
{{ title | uppercase | lowercase }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- pipe with configuration argument => "February 25, 1970" -->
|
<!-- pipe with configuration argument => "February 25, 1970" -->
|
||||||
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
||||||
|
@ -5651,7 +5725,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
|
<div [hidden]="!heroForm.form.valid">
|
||||||
|
{{ submitMessage }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
@ -9917,10 +9993,14 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<h2 id="statement-context">Statement context</h2>
|
<h2 id="statement-context">Statement context</h2>
|
||||||
|
|
||||||
<p>Component statement context ( (click)="onSave() )</p>
|
<p>Component statement context ( (click)="onSave() )</p>
|
||||||
<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
|
<div class="context">
|
||||||
|
<button (click)="deleteHero()">Delete hero</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template $event statement context</p>
|
<p>Template $event statement context</p>
|
||||||
<div class="context"><button (click)="onSave($event)">Save</button></div>
|
<div class="context">
|
||||||
|
<button (click)="onSave($event)">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Template input variable statement context (let hero)</p>
|
<p>Template input variable statement context (let hero)</p>
|
||||||
<!-- template hides the following; plenty of examples later -->
|
<!-- template hides the following; plenty of examples later -->
|
||||||
|
@ -9996,7 +10076,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
|
<button [style.color]="isSpecial ? 'red' : 'green'">
|
||||||
|
button
|
||||||
|
</button>
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
|
||||||
|
@ -10047,7 +10129,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
|
|
||||||
<!-- ERROR: HeroDetailComponent.hero expects a
|
<!-- ERROR: HeroDetailComponent.hero expects a
|
||||||
Hero object, not the string "currentHero" -->
|
Hero object, not the string "currentHero" -->
|
||||||
<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
|
<div *ngIf="false">
|
||||||
|
<app-hero-detail hero="currentHero"></app-hero-detail>
|
||||||
|
</div>
|
||||||
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -10370,7 +10454,9 @@ bindon-ngModel
|
||||||
|
|
||||||
<!-- Does not show because isActive is false! -->
|
<!-- Does not show because isActive is false! -->
|
||||||
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
|
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
|
||||||
<ng-template [ngIf]="isActive"><app-hero-detail></app-hero-detail></ng-template>
|
<ng-template [ngIf]="isActive">
|
||||||
|
<app-hero-detail></app-hero-detail>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
<!-- isSpecial is true -->
|
<!-- isSpecial is true -->
|
||||||
<div [class.hidden]="!isSpecial">Show with class</div>
|
<div [class.hidden]="!isSpecial">Show with class</div>
|
||||||
|
@ -10583,7 +10669,10 @@ bindon-ngModel
|
||||||
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
<div>Title through uppercase pipe: {{ title | uppercase }}</div>
|
||||||
|
|
||||||
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
||||||
<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
|
<div>
|
||||||
|
Title through a pipe chain:
|
||||||
|
{{ title | uppercase | lowercase }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- pipe with configuration argument => "February 25, 1970" -->
|
<!-- pipe with configuration argument => "February 25, 1970" -->
|
||||||
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
|
||||||
|
@ -10706,7 +10795,9 @@ can be found in the LICENSE file at http://angular.io/license
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
|
<div [hidden]="!heroForm.form.valid">
|
||||||
|
{{ submitMessage }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
|
@ -228,7 +228,8 @@ printWidth: 80
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<label class="form-check-label">
|
<label class="form-check-label">
|
||||||
<input type="checkbox" class="form-check-input" /> Check me out
|
<input type="checkbox" class="form-check-input" />
|
||||||
|
Check me out
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
|
|
@ -99,8 +99,12 @@ printWidth: 80
|
||||||
In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
|
In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
|
||||||
-->
|
-->
|
||||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<p>123</p>
|
<p>
|
||||||
<span> 123 </span>
|
123
|
||||||
|
</p>
|
||||||
|
<span>
|
||||||
|
123
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</foreignObject>
|
</foreignObject>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
@ -181,8 +181,15 @@ printWidth: Infinity
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<div>aaaaaaaaaa <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a> cccccccccc</div>
|
<div>
|
||||||
<div>aaaaaaaaaa <a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>cccccccccc</div>
|
aaaaaaaaaa
|
||||||
|
<a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>
|
||||||
|
cccccccccc
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
aaaaaaaaaa
|
||||||
|
<a href="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong">bbbbbbbbbb</a>cccccccccc
|
||||||
|
</div>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
@ -1240,7 +1247,9 @@ ___________________________
|
||||||
|| ||
|
|| ||
|
||||||
___________________________
|
___________________________
|
||||||
</pre>
|
</pre>
|
||||||
<figcaption id="cow-caption">A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.</figcaption>
|
<figcaption id="cow-caption">
|
||||||
|
A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
|
||||||
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<pre data-attr-1="foo" data-attr-2="foo" data-attr-3="foo" data-attr-4="foo" data-attr-5="foo" data-attr-6="foo">
|
<pre data-attr-1="foo" data-attr-2="foo" data-attr-3="foo" data-attr-4="foo" data-attr-5="foo" data-attr-6="foo">
|
||||||
Foo Bar
|
Foo Bar
|
||||||
|
@ -1743,6 +1752,11 @@ printWidth: 80
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<br />
|
<br />
|
||||||
|
@ -1848,8 +1862,12 @@ printWidth: 80
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><div>string</div></div>
|
<div>
|
||||||
<div><div>string</div></div>
|
<div>string</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>string</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>string</div>
|
<div>string</div>
|
||||||
|
|
||||||
|
@ -1875,7 +1893,9 @@ printWidth: 80
|
||||||
<label
|
<label
|
||||||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
||||||
></label>
|
></label>
|
||||||
| <span></span> <br />
|
|
|
||||||
|
<span></span>
|
||||||
|
<br />
|
||||||
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
|
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
|
@ -1916,6 +1936,11 @@ printWidth: 80
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
@ -2036,6 +2061,11 @@ printWidth: 1
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<br />
|
<br />
|
||||||
|
@ -2410,6 +2440,17 @@ printWidth: 1
|
||||||
>seddoeiusmod</strong
|
>seddoeiusmod</strong
|
||||||
>.
|
>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i
|
||||||
|
class="fa fa-refresh fa-spin"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="fa fa-refresh fa-spin"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="fa fa-refresh fa-spin"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
@ -2529,6 +2570,11 @@ printWidth: Infinity
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<br />
|
<br />
|
||||||
|
@ -2584,8 +2630,12 @@ printWidth: Infinity
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><div>string</div></div>
|
<div>
|
||||||
<div><div>string</div></div>
|
<div>string</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>string</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>string</div>
|
<div>string</div>
|
||||||
|
|
||||||
|
@ -2598,20 +2648,25 @@ printWidth: Infinity
|
||||||
<li class="baz">Second</li>
|
<li class="baz">Second</li>
|
||||||
789
|
789
|
||||||
</ul>
|
</ul>
|
||||||
<span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
|
<span>*<b>200</b></span>
|
||||||
|
<img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
|
||||||
<div>123<meta attr />456</div>
|
<div>123<meta attr />456</div>
|
||||||
<p>x<span a="b"></span></p>
|
<p>x<span a="b"></span></p>
|
||||||
<p>x<meta a /></p>
|
<p>x<meta a /></p>
|
||||||
<p>x<meta /></p>
|
<p>x<meta /></p>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> | <span></span> <br />
|
<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
|
||||||
|
<span></span>
|
||||||
|
<br />
|
||||||
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
|
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
|
||||||
|
|
||||||
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
|
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
|
||||||
|
<br /><br />
|
||||||
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
|
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
|
||||||
|
|
||||||
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
|
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
|
||||||
|
<br /><br />
|
||||||
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
|
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
|
||||||
<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
|
<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
|
||||||
<div>
|
<div>
|
||||||
|
@ -2628,8 +2683,18 @@ printWidth: Infinity
|
||||||
<app-footer [input]="something"></app-footer>
|
<app-footer [input]="something"></app-footer>
|
||||||
</div>
|
</div>
|
||||||
<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
|
<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
|
||||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".</div>
|
<div>
|
||||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <strong>seddoeiusmod</strong>.</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
|
<strong>seddoeiusmod</strong>.
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
@ -2751,6 +2816,11 @@ printWidth: 80
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<br />
|
<br />
|
||||||
|
@ -2819,10 +2889,11 @@ printWidth: 80
|
||||||
>
|
>
|
||||||
<video width="320" height="240" controls>
|
<video width="320" height="240" controls>
|
||||||
<source src="movie.mp4" type="video/mp4" />
|
<source src="movie.mp4" type="video/mp4" />
|
||||||
<source src="movie.ogg" type="video/ogg" /> Your browser does not support the
|
<source src="movie.ogg" type="video/ogg" />
|
||||||
video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
<div><div>string</div></div> <div><div>string</div><div>string</div></div>
|
<div><div>string</div></div>
|
||||||
|
<div><div>string</div><div>string</div></div>
|
||||||
<div
|
<div
|
||||||
><div><div>string</div></div
|
><div><div>string</div></div
|
||||||
><div>string</div></div
|
><div>string</div></div
|
||||||
|
@ -2830,7 +2901,8 @@ printWidth: 80
|
||||||
<div
|
<div
|
||||||
><div>string</div><div><div>string</div></div></div
|
><div>string</div><div><div>string</div></div></div
|
||||||
>
|
>
|
||||||
<div><div></div></div> <div><div></div><div></div></div>
|
<div><div></div></div>
|
||||||
|
<div><div></div><div></div></div>
|
||||||
<div
|
<div
|
||||||
><div
|
><div
|
||||||
><div
|
><div
|
||||||
|
@ -2842,7 +2914,12 @@ printWidth: 80
|
||||||
></div
|
></div
|
||||||
></div
|
></div
|
||||||
>
|
>
|
||||||
<div> <div>string</div> </div> <div> <div>string</div> </div>
|
<div>
|
||||||
|
<div>string</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>string</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>string</div>
|
<div>string</div>
|
||||||
|
|
||||||
|
@ -2856,13 +2933,19 @@ printWidth: 80
|
||||||
<span>*<b>200</b></span>
|
<span>*<b>200</b></span>
|
||||||
<img
|
<img
|
||||||
src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
||||||
/>123 <div>123<meta attr />456</div> <p>x<span a="b"></span></p>
|
/>123
|
||||||
<p>x<meta a/></p> <p>x<meta /></p> <span></span>
|
<div>123<meta attr />456</div>
|
||||||
|
<p>x<span a="b"></span></p>
|
||||||
|
<p>x<meta a/></p>
|
||||||
|
<p>x<meta /></p>
|
||||||
|
<span></span>
|
||||||
|
|
||||||
<label
|
<label
|
||||||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
||||||
></label>
|
></label>
|
||||||
| <span></span> <br />
|
|
|
||||||
|
<span></span>
|
||||||
|
<br />
|
||||||
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
|
<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
||||||
|
@ -2903,6 +2986,11 @@ printWidth: 80
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
@ -3024,6 +3112,11 @@ printWidth: 80
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
<br />
|
<br />
|
||||||
|
@ -3129,8 +3222,12 @@ printWidth: 80
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><div>string</div></div>
|
<div>
|
||||||
<div><div>string</div></div>
|
<div>string</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>string</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>string</div>
|
<div>string</div>
|
||||||
|
|
||||||
|
@ -3228,6 +3325,11 @@ printWidth: 80
|
||||||
<strong>seddoeiusmod</strong>
|
<strong>seddoeiusmod</strong>
|
||||||
.
|
.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -108,3 +108,8 @@
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
<strong>seddoeiusmod</strong>.
|
<strong>seddoeiusmod</strong>.
|
||||||
</div>
|
</div>
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
<i class="fa fa-refresh fa-spin" />
|
||||||
|
</span>
|
||||||
|
|
|
@ -2437,7 +2437,10 @@ printWidth: 80
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<br />
|
<br />
|
||||||
<footer>foo <br /></footer>
|
<footer>
|
||||||
|
foo
|
||||||
|
<br />
|
||||||
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
|
@ -2466,7 +2469,10 @@ trailingComma: "es5"
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<br />
|
<br />
|
||||||
<footer>foo <br /></footer>
|
<footer>
|
||||||
|
foo
|
||||||
|
<br />
|
||||||
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
|
@ -2495,7 +2501,10 @@ semi: false
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<br />
|
<br />
|
||||||
<footer>foo <br /></footer>
|
<footer>
|
||||||
|
foo
|
||||||
|
<br />
|
||||||
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
|
|
|
@ -218,6 +218,50 @@ printWidth: 80
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`surrounding-linebreak.html 1`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: 80
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<span>123</span>
|
||||||
|
<span>
|
||||||
|
123</span>
|
||||||
|
<span>123
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div>123</div>
|
||||||
|
<div>
|
||||||
|
123</div>
|
||||||
|
<div>123
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
123
|
||||||
|
</div>
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<span>123</span>
|
||||||
|
<span> 123</span>
|
||||||
|
<span>123 </span>
|
||||||
|
<span>
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div>123</div>
|
||||||
|
<div>
|
||||||
|
123
|
||||||
|
</div>
|
||||||
|
<div>123</div>
|
||||||
|
<div>
|
||||||
|
123
|
||||||
|
</div>
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`table.html 1`] = `
|
exports[`table.html 1`] = `
|
||||||
====================================options=====================================
|
====================================options=====================================
|
||||||
parsers: ["html"]
|
parsers: ["html"]
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
<span>123</span>
|
||||||
|
<span>
|
||||||
|
123</span>
|
||||||
|
<span>123
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div>123</div>
|
||||||
|
<div>
|
||||||
|
123</div>
|
||||||
|
<div>123
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
123
|
||||||
|
</div>
|
Loading…
Reference in New Issue