@getflip/swirl-components 0.193.0 → 0.194.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +17 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-option-list_2.cjs.entry.js +5 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-tag/swirl-tag.css +22 -0
- package/dist/collection/components/swirl-tag/swirl-tag.js +21 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-tag2.js +6 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-option-list_2.entry.js +5 -2
- package/dist/swirl-components/{p-9a1f0385.entry.js → p-31363b5b.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tag/swirl-tag.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
gap: var(--s-space-4);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
.tag--bordered {
|
|
26
|
+
border-style: solid;
|
|
27
|
+
border-width: var(--s-border-width-default);
|
|
28
|
+
border-color: var(--s-border-strong);
|
|
29
|
+
}
|
|
30
|
+
|
|
25
31
|
.tag--intent-info {
|
|
26
32
|
color: var(--s-text-info);
|
|
27
33
|
background-color: var(--s-surface-info-subdued);
|
|
@@ -31,6 +37,10 @@
|
|
|
31
37
|
color: var(--icon-info);
|
|
32
38
|
}
|
|
33
39
|
|
|
40
|
+
.tag--intent-info.tag--bordered {
|
|
41
|
+
border-color: var(--s-border-info);
|
|
42
|
+
}
|
|
43
|
+
|
|
34
44
|
.tag--intent-critical {
|
|
35
45
|
color: var(--s-text-critical);
|
|
36
46
|
background-color: var(--s-surface-critical-subdued);
|
|
@@ -40,6 +50,10 @@
|
|
|
40
50
|
color: var(--icon-critical);
|
|
41
51
|
}
|
|
42
52
|
|
|
53
|
+
.tag--intent-critical.tag--bordered {
|
|
54
|
+
border-color: var(--s-border-critical);
|
|
55
|
+
}
|
|
56
|
+
|
|
43
57
|
.tag--intent-warning {
|
|
44
58
|
color: var(--s-text-warning);
|
|
45
59
|
background-color: var(--s-surface-warning-subdued);
|
|
@@ -49,6 +63,10 @@
|
|
|
49
63
|
color: var(--icon-warning);
|
|
50
64
|
}
|
|
51
65
|
|
|
66
|
+
.tag--intent-warning.tag--bordered {
|
|
67
|
+
border-color: var(--s-border-warning);
|
|
68
|
+
}
|
|
69
|
+
|
|
52
70
|
.tag--intent-success {
|
|
53
71
|
color: var(--s-text-success);
|
|
54
72
|
background-color: var(--s-surface-success-subdued);
|
|
@@ -58,6 +76,10 @@
|
|
|
58
76
|
color: var(--icon-success);
|
|
59
77
|
}
|
|
60
78
|
|
|
79
|
+
.tag--intent-success.tag--bordered {
|
|
80
|
+
border-color: var(--s-border-success);
|
|
81
|
+
}
|
|
82
|
+
|
|
61
83
|
.tag__label {
|
|
62
84
|
overflow: hidden;
|
|
63
85
|
min-width: 0;
|
|
@@ -8,10 +8,13 @@ export class SwirlTag {
|
|
|
8
8
|
this.intent = "default";
|
|
9
9
|
this.label = undefined;
|
|
10
10
|
this.removable = undefined;
|
|
11
|
+
this.bordered = undefined;
|
|
11
12
|
this.removalButtonLabel = "Remove";
|
|
12
13
|
}
|
|
13
14
|
render() {
|
|
14
|
-
const className = classnames("tag", `tag--intent-${this.intent}
|
|
15
|
+
const className = classnames("tag", `tag--intent-${this.intent}`, {
|
|
16
|
+
"tag--bordered": this.bordered,
|
|
17
|
+
});
|
|
15
18
|
return (h(Host, null, h("span", { class: className, part: "tag" }, h("span", { class: "tag__label" }, this.label), this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
|
|
16
19
|
}
|
|
17
20
|
static get is() { return "swirl-tag"; }
|
|
@@ -85,6 +88,23 @@ export class SwirlTag {
|
|
|
85
88
|
"attribute": "removable",
|
|
86
89
|
"reflect": false
|
|
87
90
|
},
|
|
91
|
+
"bordered": {
|
|
92
|
+
"type": "boolean",
|
|
93
|
+
"mutable": false,
|
|
94
|
+
"complexType": {
|
|
95
|
+
"original": "boolean",
|
|
96
|
+
"resolved": "boolean",
|
|
97
|
+
"references": {}
|
|
98
|
+
},
|
|
99
|
+
"required": false,
|
|
100
|
+
"optional": true,
|
|
101
|
+
"docs": {
|
|
102
|
+
"tags": [],
|
|
103
|
+
"text": ""
|
|
104
|
+
},
|
|
105
|
+
"attribute": "bordered",
|
|
106
|
+
"reflect": false
|
|
107
|
+
},
|
|
88
108
|
"removalButtonLabel": {
|
|
89
109
|
"type": "string",
|
|
90
110
|
"mutable": false,
|