@proximus/lavender-tag 1.4.17-alpha.7 → 1.4.17-beta.1
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/dist/Tag.d.ts +1 -1
- package/dist/custom-elements.json +7 -9
- package/dist/index.es.js +13 -13
- package/dist/web-types.json +1 -2
- package/package.json +1 -1
package/dist/Tag.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ import '@proximus/lavender-button-icon';
|
|
|
4
4
|
export declare const tagSizeValues: string[];
|
|
5
5
|
export declare const tagStateValues: string[];
|
|
6
6
|
export declare class Tag extends PxElement<HTMLDivElement> {
|
|
7
|
+
protected static readonly template: HTMLTemplateElement;
|
|
7
8
|
static nativeName: string;
|
|
8
|
-
private template;
|
|
9
9
|
constructor();
|
|
10
10
|
connectedCallback(): void;
|
|
11
11
|
static get observedAttributes(): string[];
|
|
@@ -27,6 +27,13 @@
|
|
|
27
27
|
"description": "",
|
|
28
28
|
"name": "Tag",
|
|
29
29
|
"members": [
|
|
30
|
+
{
|
|
31
|
+
"kind": "field",
|
|
32
|
+
"name": "template",
|
|
33
|
+
"privacy": "protected",
|
|
34
|
+
"static": true,
|
|
35
|
+
"readonly": true
|
|
36
|
+
},
|
|
30
37
|
{
|
|
31
38
|
"kind": "field",
|
|
32
39
|
"name": "nativeName",
|
|
@@ -36,11 +43,6 @@
|
|
|
36
43
|
"static": true,
|
|
37
44
|
"default": "'div'"
|
|
38
45
|
},
|
|
39
|
-
{
|
|
40
|
-
"kind": "method",
|
|
41
|
-
"name": "template",
|
|
42
|
-
"privacy": "private"
|
|
43
|
-
},
|
|
44
46
|
{
|
|
45
47
|
"kind": "method",
|
|
46
48
|
"name": "updateStateStyles",
|
|
@@ -153,10 +155,6 @@
|
|
|
153
155
|
"kind": "field",
|
|
154
156
|
"name": "stateIconFrom"
|
|
155
157
|
},
|
|
156
|
-
{
|
|
157
|
-
"kind": "field",
|
|
158
|
-
"name": "innerHTML"
|
|
159
|
-
},
|
|
160
158
|
{
|
|
161
159
|
"kind": "field",
|
|
162
160
|
"name": "adoptedStyleSheets",
|
package/dist/index.es.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { PxElement as e } from "@proximus/lavender-common";
|
|
1
|
+
import { PxElement as e, createTemplate as t, renderTemplate as n } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-button-icon";
|
|
3
3
|
//#region src/tag.css?inline
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
var
|
|
4
|
+
var r = ":host:has(.tag){display:inline-block}.tag,.tag *{box-sizing:border-box}.tag{vertical-align:middle;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);justify-content:center;align-items:center;gap:var(--px-spacing-2xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main);display:inline-flex}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size=s]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size=m]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (width>=48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size=s]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=m]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=m]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=m]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}", i = new CSSStyleSheet();
|
|
5
|
+
i.replaceSync(r);
|
|
6
|
+
var a = [
|
|
7
7
|
"",
|
|
8
8
|
"s",
|
|
9
9
|
"m"
|
|
10
|
-
],
|
|
10
|
+
], o = [
|
|
11
11
|
"",
|
|
12
12
|
"success",
|
|
13
13
|
"error",
|
|
14
14
|
"warning"
|
|
15
|
-
],
|
|
15
|
+
], s = class r extends e {
|
|
16
16
|
static {
|
|
17
|
-
this.
|
|
17
|
+
this.template = t("<div class=\"tag\"><slot name=\"before\"></slot><slot></slot><slot name=\"after\"></slot></div>");
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
static {
|
|
20
|
+
this.nativeName = "div";
|
|
21
21
|
}
|
|
22
22
|
constructor() {
|
|
23
|
-
super(
|
|
23
|
+
super(i), n(this.shadowRoot, r.template), this.shadowRoot.adoptedStyleSheets = [i];
|
|
24
24
|
}
|
|
25
25
|
connectedCallback() {
|
|
26
26
|
this.styleBeforeIcon = this.styleBeforeIcon.bind(this), this.styleBeforeIcon(), this.$slotBefore?.addEventListener("slotchange", this.styleBeforeIcon), this.styleAfterBtnIcon = this.styleAfterBtnIcon.bind(this), this.styleAfterBtnIcon(), this.$slotAfter?.addEventListener("slotchange", this.styleAfterBtnIcon);
|
|
@@ -42,7 +42,7 @@ var r = [
|
|
|
42
42
|
this.hasAttribute("dismissible") && this.$slottedAfterBtnIcon.toggleAttribute("inverted");
|
|
43
43
|
break;
|
|
44
44
|
case "state":
|
|
45
|
-
this.hasAttribute("dismissible") || this.updateStateStyles(t, n,
|
|
45
|
+
this.hasAttribute("dismissible") || this.updateStateStyles(t, n, o);
|
|
46
46
|
break;
|
|
47
47
|
case "state-icon-aria-label":
|
|
48
48
|
this.hasAttribute("dismissible") || this.updateStateIconLabel(n);
|
|
@@ -136,6 +136,6 @@ var r = [
|
|
|
136
136
|
this.setAttribute("state-icon-from", e);
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
|
-
customElements.get("px-tag") || customElements.define("px-tag",
|
|
139
|
+
customElements.get("px-tag") || customElements.define("px-tag", s);
|
|
140
140
|
//#endregion
|
|
141
|
-
export {
|
|
141
|
+
export { s as Tag, a as tagSizeValues, o as tagStateValues };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-tag",
|
|
4
|
-
"version": "1.4.17-
|
|
4
|
+
"version": "1.4.17-beta.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
{ "name": "inverted" },
|
|
33
33
|
{ "name": "stateIconAriaLabel" },
|
|
34
34
|
{ "name": "stateIconFrom" },
|
|
35
|
-
{ "name": "innerHTML" },
|
|
36
35
|
{ "name": "adoptedStyleSheets", "type": "array" }
|
|
37
36
|
],
|
|
38
37
|
"events": []
|