@proximus/lavender-tag 2.0.0-alpha.153 → 2.0.0-alpha.154
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/index.es.js +18 -18
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PxElement as n } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-button-icon";
|
|
3
|
-
const l = ':host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;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);gap:var(--px-spacing-
|
|
4
|
-
|
|
5
|
-
const
|
|
3
|
+
const l = ':host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;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);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)}.tag,.tag *{box-sizing:border-box}: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 (min-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 (min-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 (min-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)}}', r = new CSSStyleSheet();
|
|
4
|
+
r.replaceSync(l);
|
|
5
|
+
const g = ["", "s", "m"], d = ["", "success", "error", "warning"], o = class o extends n {
|
|
6
6
|
template() {
|
|
7
7
|
return `
|
|
8
8
|
<div class="tag">
|
|
@@ -13,7 +13,7 @@ const b = ["", "s", "m"], d = ["", "success", "error", "warning"], o = class o e
|
|
|
13
13
|
`;
|
|
14
14
|
}
|
|
15
15
|
constructor() {
|
|
16
|
-
super(
|
|
16
|
+
super(r), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
|
|
17
17
|
}
|
|
18
18
|
connectedCallback() {
|
|
19
19
|
var t, e;
|
|
@@ -30,37 +30,37 @@ const b = ["", "s", "m"], d = ["", "success", "error", "warning"], o = class o e
|
|
|
30
30
|
"state-icon-from"
|
|
31
31
|
];
|
|
32
32
|
}
|
|
33
|
-
attributeChangedCallback(t, e,
|
|
34
|
-
if (e !==
|
|
33
|
+
attributeChangedCallback(t, e, a) {
|
|
34
|
+
if (e !== a)
|
|
35
35
|
switch (t) {
|
|
36
36
|
case "inverted":
|
|
37
37
|
this.hasAttribute("dismissible") && this.$slottedAfterBtnIcon.toggleAttribute("inverted");
|
|
38
38
|
break;
|
|
39
39
|
case "state":
|
|
40
|
-
this.hasAttribute("dismissible") || this.updateStateStyles(e,
|
|
40
|
+
this.hasAttribute("dismissible") || this.updateStateStyles(e, a, d);
|
|
41
41
|
break;
|
|
42
42
|
case "state-icon-aria-label":
|
|
43
|
-
this.hasAttribute("dismissible") || this.updateStateIconLabel(
|
|
43
|
+
this.hasAttribute("dismissible") || this.updateStateIconLabel(a);
|
|
44
44
|
break;
|
|
45
45
|
case "state-icon-from":
|
|
46
|
-
this.hasAttribute("dismissible") || this.updateStateIconFrom(
|
|
46
|
+
this.hasAttribute("dismissible") || this.updateStateIconFrom(a);
|
|
47
47
|
break;
|
|
48
48
|
default:
|
|
49
|
-
super.attributeChangedCallback(t, e,
|
|
49
|
+
super.attributeChangedCallback(t, e, a);
|
|
50
50
|
break;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
updateStateStyles(t, e,
|
|
54
|
-
if (!
|
|
53
|
+
updateStateStyles(t, e, a) {
|
|
54
|
+
if (!a.includes(t) && a.includes(e)) {
|
|
55
55
|
const s = document.createElement("px-icon");
|
|
56
56
|
s.setAttribute("size", "xs"), s.setAttribute("color", "inherit"), s.setAttribute(
|
|
57
57
|
"from",
|
|
58
58
|
this.stateIconFrom ? this.stateIconFrom : "lavender"
|
|
59
59
|
), s.setAttribute("name", this.getStateIcon(e)), this.stateIconAriaLabel && (s.setAttribute("aria-label", this.stateIconAriaLabel), s.setAttribute("title", this.stateIconAriaLabel)), this.$el.insertAdjacentElement("afterbegin", s);
|
|
60
|
-
} else if (
|
|
60
|
+
} else if (a.includes(t) && !a.includes(e)) {
|
|
61
61
|
const s = this.$el.querySelector("px-icon");
|
|
62
62
|
s && this.$el.removeChild(s);
|
|
63
|
-
} else if (
|
|
63
|
+
} else if (a.includes(t) && a.includes(e)) {
|
|
64
64
|
const s = this.$el.querySelector("px-icon");
|
|
65
65
|
s && s.setAttribute("name", this.getStateIcon(e));
|
|
66
66
|
}
|
|
@@ -147,10 +147,10 @@ const b = ["", "s", "m"], d = ["", "success", "error", "warning"], o = class o e
|
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
149
|
o.nativeName = "div";
|
|
150
|
-
let
|
|
151
|
-
customElements.get("px-tag") || customElements.define("px-tag",
|
|
150
|
+
let i = o;
|
|
151
|
+
customElements.get("px-tag") || customElements.define("px-tag", i);
|
|
152
152
|
export {
|
|
153
|
-
|
|
154
|
-
|
|
153
|
+
i as Tag,
|
|
154
|
+
g as tagSizeValues,
|
|
155
155
|
d as tagStateValues
|
|
156
156
|
};
|