qui-badge/qui-badge.js at main · qomponent/qui-badge · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
import { LitElement, html, css} from 'lit';
import '@qomponent/qui-icons';

/**
 * Badge UI Component based on the vaadin theme one
 * see https://vaadin.com/docs/latest/components/badge
 */
export class QuiBadge extends LitElement {
    static styles = css`
        [theme~="badge"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0.4em calc(0.5em + var(--lumo-border-radius-s, 0.25em) / 4);
            color: var(--lumo-primary-text-color, hsla(211, 63%, 54%, 1.0));
            background-color: var(--lumo-primary-color-10pct, hsla(214, 100%, 60%, 0.13));
            border-radius: var(--lumo-border-radius-s, 0.25em);
            font-family: var(--lumo-font-family, "Open Sans", sans-serif);
            font-size: var(--lumo-font-size-s, 0.875rem);
            line-height: 1;
            font-weight: 500;
            text-transform: initial;
            letter-spacing: initial;
            min-width: calc(var (--lumo-line-height-xs, 1.25) * 1em + 0.45em);
        }
        [theme~="success"] {
            color: var(--lumo-success-text-color, hsla(145, 85%, 25%, 1.0));
            background-color: var(--lumo-success-color-10pct, hsla(145, 72%, 31%, 0.1));
        }
        [theme~="error"] {
            color: var(--lumo-error-text-color, hsla(3, 89%, 42%, 1.0));
            background-color: var(--lumo-error-color-10pct, hsla(3, 85%, 49%, 0.1));
        }
        [theme~="warning"] {
            color: var(--lumo-warning-text-color, hsla(30, 89%, 42%, 1.0));
            background-color: var(--lumo-warning-color-10pct, hsla(30, 100%, 50%, 0.1));
        }
        [theme~="contrast"] {
            color: var(--lumo-contrast-80pct, hsla(214, 41%, 17%, 0.83));
            background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
        }
        [theme~="small"] {
            font-size: var(--lumo-font-size-xxs, 0.75rem);
            line-height: 1;
        }
        [theme~="tiny"] {
            font-size: var(--lumo-font-size-xxs, 0.75rem);
            line-height: 1;
            padding: 0.2em calc(0.2em + var(--lumo-border-radius-s, 0.25em) / 4);
        }
        [theme~="primary"] {
            color: var(--lumo-primary-contrast-color, hsla(0, 100%, 100%, 1.0));
            background-color: var(--lumo-primary-color, hsla(211, 63%, 54%, 1.0));
        }
        [theme~="successprimary"] {
            color: var(--lumo-success-contrast-color, hsla(0, 100%, 100%, 1.0));
            background-color: var(--lumo-success-color, hsla(145, 72%, 30%, 1.0));
        }
        [theme~="warningprimary"] {
            color: var(--lumo-warning-contrast-color, hsla(0, 100%, 100%, 1.0));
            background-color: var(--lumo-warning-color, hsla(30, 100%, 50%, 1.0));
        }
        [theme~="errorprimary"] {
            color: var(--lumo-error-contrast-color, hsla(0, 100%, 100%, 1.0));
            background-color: var(--lumo-error-color, hsla(3, 85%, 48%, 1.0));
        }
        [theme~="contrastprimary"] {
            color: var(--lumo-base-color, hsla(0, 100%, 100%, 1.0));
            background-color: var(--lumo-contrast, hsla(214, 35%, 15%, 1.0));
        }
        [theme~="pill"] {
            --lumo-border-radius-s: 1em;
        }
    `;

    static properties = {
        background: {type: String},
        color: {type: String},
        size: {type: String},
        icon: {type: String},
        level: {type: String},
        small: {type: Boolean},
        tiny: {type: Boolean},
        primary: {type: Boolean},
        pill: {type: Boolean},
        clickable: {type: Boolean},
        _theme: {attribute: false},
        _style: {attribute: false},
    };

    constructor(){
        super();
        this.icon = null;
        this.level = null;
        this.background = null;
        this.color = null;
        this.small = false;
        this.tiny = false;
        this.primary = false;
        this.pill = false;
        this.clickable = false;
        this.size = null;
        this._theme = "badge";
        this._style = "";
    }

    connectedCallback() {
        super.connectedCallback();
        this._resetTheme();
        this._resetStyle();
    }

    _resetTheme() {
        this._theme = "badge";
        if(this.level){
            this._theme = this._theme + " " + this.level;
        }
        if(this.primary){
            if(this.level){
                this._theme = this._theme + "primary";
            }else{
                this._theme = this._theme + " primary";
            }
        }

        if(this.small && !this.tiny){
            this._theme = this._theme + " small";
            this.size = "small";
        }
        if(this.tiny){
            this._theme = this._theme + " tiny";
            this.size = "tiny";
        }
        if(!this.tiny && !this.small && this.size){
            this._theme = this._theme + " " + this.size;
        }

        if(this.pill){
            this._theme = this._theme + " pill";
        }
    }

    _resetStyle() {
        this._style = "";
        if(this.background){
            this._style = this._style + "background: " + this.background + ";";
        }
        if(this.color){
            this._style = this._style + "color: " + this.color + ";";
        }
        if(this.clickable){
            this._style = this._style + "cursor: pointer";
        }
    }

    update(changedProperties) {
        this._resetTheme();
        this._resetStyle();

        // this will invoke re-rendering
        super.update(changedProperties);
    }


    render() {
        return html`<span theme='${this._theme}' style='${this._style}'>
                ${this._renderIcon()}
                <slot></slot>
            </span>`;
    }

    _renderIcon(){
        if(this.icon){
            return html`<fas-icon icon="${this.icon}" size="${this.size}" style='padding: var(--lumo-space-xs, 0.25rem);'></fas-icon>`;
        }
    }

}
customElements.define('qui-badge', QuiBadge);