-
Notifications
You must be signed in to change notification settings - Fork 2
/
icon-button.ts
107 lines (96 loc) · 2.74 KB
/
icon-button.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { themes } from '../../theming/theming-decorator.js';
import { alternateName } from '../common/decorators/alternateName.js';
import { blazorInclude } from '../common/decorators/blazorInclude.js';
import { registerComponent } from '../common/definitions/register.js';
import IgcIconComponent from '../icon/icon.js';
import {
registerIconFromText as registerIconFromText_impl,
registerIcon as registerIcon_impl,
} from '../icon/icon.registry.js';
import { IgcButtonBaseComponent } from './button-base.js';
import { styles } from './themes/icon-button/icon-button.base.css.js';
import { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';
import { all } from './themes/icon-button/themes.js';
/**
* @element igc-icon-button
*
* @csspart base - The wrapping element.
* @csspart icon - The icon element.
*/
@themes(all)
export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
public static readonly tagName = 'igc-icon-button';
protected static styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(IgcIconButtonComponent, IgcIconComponent);
}
/**
* The name of the icon.
* @attr
*/
@alternateName('iconName')
@property()
public name!: string;
/**
* The name of the icon collection.
* @attr
*/
@property()
public collection!: string;
/**
* Whether to flip the icon button. Useful for RTL layouts.
* @attr
*/
@property({ type: Boolean })
public mirrored = false;
/**
* The visual variant of the icon button.
* @attr
*/
@property({ reflect: true })
public variant: 'flat' | 'contained' | 'outlined' = 'contained';
protected renderContent() {
return html`
${this.name || this.mirrored
? html`
<igc-icon
part="icon"
name=${ifDefined(this.name)}
collection=${ifDefined(this.collection)}
.mirrored=${this.mirrored}
size="small"
aria-hidden="true"
></igc-icon>
<slot></slot>
`
: html`<slot></slot>`}
`;
}
/* c8 ignore next 8 */
@blazorInclude()
protected async registerIcon(
name: string,
url: string,
collection = 'default'
) {
await registerIcon_impl(name, url, collection);
}
/* c8 ignore next 8 */
@blazorInclude()
protected registerIconFromText(
name: string,
iconText: string,
collection = 'default'
) {
registerIconFromText_impl(name, iconText, collection);
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-icon-button': IgcIconButtonComponent;
}
}