Skip to content

Commit c9ddd75

Browse files
nikolasleblancnikolasleblanc
committed
Create kebab-case selectors for all components, use them
- Also sets up a deprecatedSelector method for outputting the warning - Cleans up dead imports
1 parent 08518ed commit c9ddd75

12 files changed

+65
-35
lines changed

‎lib/components/deprecated-loading.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Component, ViewContainerRef, ComponentFactoryResolver, Input, ComponentFactory, TemplateRef, AfterViewInit } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
32
import { TreeModel } from '../models/tree.model';
43
import { AdHocComponentFactoryCreator } from './adhoc-component-factory.service';
4+
import { deprecatedSelector } from '../deprecated-selector';
55

66
@Component({
7-
selector: 'LoadingComponent',
7+
selector: 'LoadingComponent, loading-component',
88
template: ''
99
})
1010
export class LoadingComponent implements AfterViewInit {
@@ -14,6 +14,7 @@ export class LoadingComponent implements AfterViewInit {
1414
private componentFactoryResolver: ComponentFactoryResolver,
1515
private viewContainerRef: ViewContainerRef,
1616
private adHocComponentFactoryCreator: AdHocComponentFactoryCreator) {
17+
deprecatedSelector('LoadingComponent', 'loading-component');
1718
}
1819

1920
ngAfterViewInit() {

‎lib/components/deprecated-tree-node-content.component.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import {
2-
Component, Input, ComponentFactoryResolver, ComponentFactory, ComponentRef, AfterViewInit,
2+
Component, Input, ComponentFactoryResolver, ComponentRef, AfterViewInit,
33
ViewContainerRef, TemplateRef
44
} from '@angular/core';
5-
import { CommonModule } from '@angular/common';
65
import { TreeNode } from '../models/tree-node.model';
76
import { TreeModel } from '../models/tree.model';
87
import { AdHocComponentFactoryCreator } from './adhoc-component-factory.service';
8+
import { deprecatedSelector } from '../deprecated-selector';
99

1010
export interface ITreeNodeTemplate {
1111
node: TreeNode;
1212
context: any;
1313
}
1414

1515
@Component({
16-
selector: 'TreeNodeContent',
16+
selector: 'TreeNodeContent, tree-node-content',
1717
template: '',
1818
})
1919
export class TreeNodeContent implements AfterViewInit {
@@ -26,6 +26,7 @@ export class TreeNodeContent implements AfterViewInit {
2626
private viewContainerRef: ViewContainerRef,
2727
private adHocComponentFactoryCreator: AdHocComponentFactoryCreator
2828
) {
29+
deprecatedSelector('TreeNodeContent', 'tree-node-content');
2930
}
3031

3132
ngAfterViewInit() {

‎lib/components/loading.component.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Component, Input, TemplateRef } from '@angular/core';
2-
import { TreeModel } from '../models/tree.model';
2+
import { deprecatedSelector } from '../deprecated-selector';
33

44
@Component({
5-
selector: 'LoadingComponent',
5+
selector: 'LoadingComponent, loading-component',
66
template: `<span *ngIf="!template">loading...</span>
77
<template [ngTemplateOutlet]="template"></template>`,
88
})
99
export class LoadingComponent {
1010
@Input() template: TemplateRef<any>;
11+
12+
constructor() {
13+
deprecatedSelector('LoadingComponent', 'loading-component');
14+
}
1115
}

‎lib/components/tree-node-children.component.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Component, Input, ViewEncapsulation } from '@angular/core';
22
import { TreeNode } from '../models/tree-node.model';
3+
import { deprecatedSelector } from '../deprecated-selector';
34

45
@Component({
5-
selector: 'TreeNodeChildren',
6+
selector: 'TreeNodeChildren, tree-node-children',
67
encapsulation: ViewEncapsulation.None,
78
styles: [
89
'.tree-children.tree-children-no-padding { padding-left: 0 }',
@@ -13,23 +14,27 @@ import { TreeNode } from '../models/tree-node.model';
1314
[class.tree-children-no-padding]="node.options.levelPadding"
1415
*ngIf="node.isExpanded">
1516
<div *ngIf="node.children">
16-
<TreeNode
17+
<tree-node
1718
*ngFor="let node of node.children; let i = index"
1819
[node]="node"
1920
[index]="i"
2021
[templates]="templates">
21-
</TreeNode>
22+
</tree-node>
2223
</div>
23-
<LoadingComponent
24+
<loading-component
2425
[style.padding-left]="node.getNodePadding()"
2526
class="tree-node-loading"
2627
*ngIf="!node.children"
2728
[template]="templates.loadingTemplate"
28-
></LoadingComponent>
29+
></loading-component>
2930
</div>
3031
`
3132
})
3233
export class TreeNodeChildrenComponent {
3334
@Input() node: TreeNode;
3435
@Input() templates: any;
36+
37+
constructor() {
38+
deprecatedSelector('TreeNodeChildren', 'tree-node-children');
39+
}
3540
}

‎lib/components/tree-node-content.component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Component, Input, ViewEncapsulation, TemplateRef } from '@angular/core';
22
import { TreeNode } from '../models/tree-node.model';
3+
import { deprecatedSelector } from '../deprecated-selector';
34

45
@Component({
5-
selector: 'TreeNodeContent',
6+
selector: 'TreeNodeContent, tree-node-content',
67
encapsulation: ViewEncapsulation.None,
78
template: `<span *ngIf="!template">{{ node.displayField }}</span>
89
<template
@@ -14,4 +15,8 @@ export class TreeNodeContent {
1415
@Input() node: TreeNode;
1516
@Input() index: number;
1617
@Input() template: TemplateRef<any>;
18+
19+
constructor() {
20+
deprecatedSelector('TreeNodeContent', 'tree-node-content');
21+
}
1722
}

‎lib/components/tree-node-drop-slot.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component, Input, ViewEncapsulation } from '@angular/core';
22
import { TreeNode } from '../models/tree-node.model';
3-
import { TreeDraggedElement } from '../models/tree-dragged-element.model';
3+
import { deprecatedSelector } from '../deprecated-selector';
44

55
@Component({
6-
selector: 'TreeNodeDropSlot',
6+
selector: 'TreeNodeDropSlot, tree-node-drop-slot',
77
encapsulation: ViewEncapsulation.None,
88
styles: [
99
'.node-drop-slot { display: block; height: 2px; width: 100%}',
@@ -22,6 +22,7 @@ export class TreeNodeDropSlot {
2222
@Input() dropIndex: number;
2323

2424
constructor() {
25+
deprecatedSelector('TreeNodeDropSlot', 'tree-node-drop-slot');
2526
}
2627

2728
onDrop($event) {

‎lib/components/tree-node-expander.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Component, Input, ViewEncapsulation } from '@angular/core';
22
import { TreeNode } from '../models/tree-node.model';
3+
import { deprecatedSelector } from '../deprecated-selector';
34

45
@Component({
5-
selector: 'TreeNodeExpander',
6+
selector: 'TreeNodeExpander, tree-node-expander',
67
encapsulation: ViewEncapsulation.None,
78
styles: [
89
'.toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }',
@@ -52,5 +53,6 @@ export class TreeNodeExpanderComponent {
5253
@Input() node: TreeNode;
5354

5455
constructor() {
56+
deprecatedSelector('TreeNodeExpander', 'tree-node-expander');
5557
}
5658
}

‎lib/components/tree-node.component.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Component, Input, ElementRef, AfterViewInit, ViewEncapsulation, TemplateRef } from '@angular/core';
1+
import { Component, Input, ElementRef, AfterViewInit, ViewEncapsulation } from '@angular/core';
22
import { TreeNode } from '../models/tree-node.model';
3+
import { deprecatedSelector } from '../deprecated-selector';
34

45
@Component({
5-
selector: 'TreeNode',
6+
selector: 'TreeNode, tree-node',
67
encapsulation: ViewEncapsulation.None,
78
styles: [
89
`.node-content-wrapper {
@@ -33,10 +34,10 @@ import { TreeNode } from '../models/tree-node.model';
3334
[class.tree-node-active]="node.isActive"
3435
[class.tree-node-focused]="node.isFocused">
3536
36-
<TreeNodeDropSlot *ngIf="index === 0" [dropIndex]="index" [node]="node.parent"></TreeNodeDropSlot>
37+
<tree-node-drop-slot *ngIf="index === 0" [dropIndex]="index" [node]="node.parent"></tree-node-drop-slot>
3738
3839
<div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
39-
<TreeNodeExpander [node]="node"></TreeNodeExpander>
40+
<tree-node-expander [node]="node"></tree-node-expander>
4041
<div class="node-content-wrapper"
4142
(click)="node.mouseAction('click', $event)"
4243
(dblclick)="node.mouseAction('dblClick', $event)"
@@ -46,13 +47,13 @@ import { TreeNode } from '../models/tree-node.model';
4647
[treeDrag]="node"
4748
[treeDragEnabled]="node.allowDrag()">
4849
49-
<TreeNodeContent [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
50-
</TreeNodeContent>
50+
<tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
51+
</tree-node-content>
5152
</div>
5253
</div>
5354
54-
<TreeNodeChildren [node]="node" [templates]="templates"></TreeNodeChildren>
55-
<TreeNodeDropSlot [dropIndex]="index + 1" [node]="node.parent"></TreeNodeDropSlot>
55+
<tree-node-children [node]="node" [templates]="templates"></tree-node-children>
56+
<tree-node-drop-slot [dropIndex]="index + 1" [node]="node.parent"></tree-node-drop-slot>
5657
</div>
5758
<template
5859
[ngTemplateOutlet]="templates.treeNodeFullTemplate"
@@ -66,6 +67,7 @@ export class TreeNodeComponent implements AfterViewInit {
6667
@Input() templates: any;
6768

6869
constructor(private elementRef: ElementRef) {
70+
deprecatedSelector('TreeNode', 'tree-node');
6971
}
7072

7173
ngAfterViewInit() {

‎lib/components/tree.component.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {
2-
Component, Input, Output, OnChanges, SimpleChange, EventEmitter,
3-
ViewEncapsulation, ContentChild, TemplateRef, HostListener, Renderer
2+
Component, Input, Output, OnChanges, EventEmitter,
3+
ViewEncapsulation, ContentChild, TemplateRef, HostListener,
4+
Renderer
45
} from '@angular/core';
56
import { TreeModel } from '../models/tree.model';
67
import { TreeDraggedElement } from '../models/tree-dragged-element.model';
78
import { TreeOptions } from '../models/tree-options.model';
8-
import { KEYS } from '../constants/keys';
99

1010
import * as _ from 'lodash';
11+
import { deprecatedSelector } from '../deprecated-selector';
1112

1213
@Component({
1314
selector: 'Tree, tree',
@@ -29,7 +30,7 @@ import * as _ from 'lodash';
2930
],
3031
template: `
3132
<div class="tree" [class.node-dragging]="treeDraggedElement.isDragging()">
32-
<TreeNode
33+
<tree-node
3334
*ngFor="let node of treeModel.roots; let i = index"
3435
[node]="node"
3536
[index]="i"
@@ -38,13 +39,13 @@ import * as _ from 'lodash';
3839
treeNodeTemplate: treeNodeTemplate,
3940
treeNodeFullTemplate: treeNodeFullTemplate
4041
}">
41-
</TreeNode>
42-
<TreeNodeDropSlot
42+
</tree-node>
43+
<tree-node-drop-slot
4344
class="empty-tree-drop-slot"
4445
*ngIf="treeModel.isEmptyTree()"
4546
[dropIndex]="0"
4647
[node]="treeModel.virtualRoot">
47-
</TreeNodeDropSlot>
48+
</tree-node-drop-slot>
4849
</div>
4950
`
5051
})
@@ -81,7 +82,7 @@ export class TreeComponent implements OnChanges {
8182
public treeModel: TreeModel,
8283
public treeDraggedElement: TreeDraggedElement,
8384
private renderer: Renderer) {
84-
85+
deprecatedSelector('Tree', 'tree');
8586
treeModel.eventNames.forEach((name) => this[name] = new EventEmitter());
8687
}
8788

‎lib/deprecated-selector.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function deprecatedSelector(deprecatedSelector, newSelector) {
2+
console.warn(`If you are using the ${deprecatedSelector} selector please move to the
3+
kebab-case ${newSelector} selector, as the UpperCase will be soon deprecated`);
4+
}

0 commit comments

Comments
 (0)