@proximus/lavender-patch 1.4.10-alpha.2 → 1.4.10-alpha.4
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 +13 -13
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { log as
|
|
2
|
-
const i = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media
|
|
1
|
+
import { log as r } from "@proximus/lavender-common";
|
|
2
|
+
const i = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-laptop);font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", o = new CSSStyleSheet();
|
|
3
3
|
o.replaceSync(i);
|
|
4
4
|
const s = [
|
|
5
5
|
"",
|
|
@@ -9,7 +9,7 @@ const s = [
|
|
|
9
9
|
"eco",
|
|
10
10
|
"greyed"
|
|
11
11
|
], d = ["", "default", "bottom-right", "bottom-left"];
|
|
12
|
-
class
|
|
12
|
+
class l extends HTMLElement {
|
|
13
13
|
template() {
|
|
14
14
|
return `
|
|
15
15
|
<div class="patch">
|
|
@@ -23,14 +23,14 @@ class c extends HTMLElement {
|
|
|
23
23
|
static get observedAttributes() {
|
|
24
24
|
return ["variant", "shape", "inverted"];
|
|
25
25
|
}
|
|
26
|
-
attributeChangedCallback(t, e,
|
|
27
|
-
if (e !==
|
|
26
|
+
attributeChangedCallback(t, e, a) {
|
|
27
|
+
if (e !== a)
|
|
28
28
|
switch (t) {
|
|
29
29
|
case "variant":
|
|
30
|
-
this.updateVariant(e,
|
|
30
|
+
this.updateVariant(e, a);
|
|
31
31
|
break;
|
|
32
32
|
case "shape":
|
|
33
|
-
this.updateShape(t,
|
|
33
|
+
this.updateShape(t, a, d);
|
|
34
34
|
break;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -41,13 +41,13 @@ class c extends HTMLElement {
|
|
|
41
41
|
return t.includes(e);
|
|
42
42
|
}
|
|
43
43
|
updateVariant(t, e) {
|
|
44
|
-
this._toggleClass(t, e), this.checkName(s, e) ||
|
|
44
|
+
this._toggleClass(t, e), this.checkName(s, e) || r(
|
|
45
45
|
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
46
46
|
);
|
|
47
47
|
}
|
|
48
|
-
updateShape(t, e,
|
|
49
|
-
if (!this.checkName(
|
|
50
|
-
|
|
48
|
+
updateShape(t, e, a) {
|
|
49
|
+
if (!this.checkName(a, e)) {
|
|
50
|
+
r(
|
|
51
51
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
52
52
|
);
|
|
53
53
|
return;
|
|
@@ -76,9 +76,9 @@ class c extends HTMLElement {
|
|
|
76
76
|
this.setAttribute("inverted", t);
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
customElements.get("px-patch") || customElements.define("px-patch",
|
|
79
|
+
customElements.get("px-patch") || customElements.define("px-patch", l);
|
|
80
80
|
export {
|
|
81
|
-
|
|
81
|
+
l as Patch,
|
|
82
82
|
d as patchShapeValues,
|
|
83
83
|
s as patchVariantValues
|
|
84
84
|
};
|