-
Notifications
You must be signed in to change notification settings - Fork 2
/
sizable.ts
41 lines (37 loc) · 1.11 KB
/
sizable.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
import type { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { watch } from '../decorators/watch.js';
import type { Constructor } from './constructor';
export declare class SizableInterface {
/**
* Determines the size of the component.
* @attr
* @type {"small" | "medium" | "large"}
*
* @deprecated since v4.5.0. Use the `--ig-size` CSS custom property instead.
*/
public size: 'small' | 'medium' | 'large';
}
export const SizableMixin = <T extends Constructor<LitElement>>(
superClass: T
) => {
class SizableElement extends superClass {
/**
* Determines the size of the component.
* @attr
* @type {"small" | "medium" | "large"}
*
* @deprecated since v4.5.0. Use the `--ig-size` CSS custom property instead.
*/
@property({ reflect: true })
public size: 'small' | 'medium' | 'large' = 'large';
@watch('size')
protected updateSize() {
this.style.setProperty(
'--component-size',
`var(--ig-size, var(--ig-size-${this.size}))`
);
}
}
return SizableElement as Constructor<SizableInterface> & T;
};