igniteui-angular/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts at 2df89817948b87c9f8b41dd6affc6df2da907993 · IgniteUI/igniteui-angular · GitHub

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
108
109
110
111
112
113
114
115
116
117
import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef } from '@angular/core';
import { IgxCircularProgressBarComponent } from 'igniteui-angular';
import {
    IgcCircularProgressComponent,
    defineComponents,
} from 'igniteui-webcomponents';
import {
    Properties,
    PropertyChangeService,
    PropertyPanelConfig,
} from '../properties-panel/property-change.service';

defineComponents(IgcCircularProgressComponent);

@Component({
    selector: 'app-circular-progress-showcase-sample',
    styleUrls: ['circular-progress-showcase.sample.scss'],
    templateUrl: 'circular-progress-showcase.sample.html',
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [IgxCircularProgressBarComponent]
})

export class CircularProgressSampleComponent {
    public panelConfig: PropertyPanelConfig = {
        hasAnimation: {
            label: 'Enable none indeterminate animation (angular)',
            control: {
                type: 'boolean',
                defaultValue: true
            }
        },
        indeterminate: {
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        animationDuration: {
            label: 'Animation Duration',
            control: {
                type: 'number',
                defaultValue: 300
            }
        },
        max: {
            control: {
                type: 'number',
                defaultValue: 100
            }
        },
        value: {
            control: {
                type: 'number',
                defaultValue: 66
            }
        },
        text: {
            control: {
                type: 'text',
                defaultValue: null
            }
        },
        hideLabel: {
            label: 'Hide Label',
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        variant: {
            label: 'Variant (WebComponents)',
            control: {
                type: 'select',
                options: ['primary', 'info', 'success', 'warning', 'danger'],
                defaultValue: 'primary'
            }
        },
        diameter: {
            control: {
                type: 'number',
                defaultValue: null
            }
        },
    }

    public properties: Properties;

    constructor(
        private propertyChangeService: PropertyChangeService,
        private destroyRef: DestroyRef
    ) {
        this.propertyChangeService.setPanelConfig(this.panelConfig);

        const { unsubscribe } =
            this.propertyChangeService.propertyChanges.subscribe(
                (properties) => {
                    this.properties = properties;
                }
            );

        this.destroyRef.onDestroy(() => unsubscribe);
    }

    protected get variantAngular() {
        const variantValue = this.propertyChangeService.getProperty('variant');

        switch (variantValue) {
            case 'primary':
                return 'default';
            case 'danger':
                return 'error';
            default:
                return variantValue;
        }
    }
}